56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import { getCreditBalanceAction } from '@/actions/get-credit-balance';
|
|
import { Button } from '@/components/ui/button';
|
|
import { useLocaleRouter } from '@/i18n/navigation';
|
|
import { Routes } from '@/routes';
|
|
import { useTransactionStore } from '@/stores/transaction-store';
|
|
import { CoinsIcon, Loader2Icon } from 'lucide-react';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
export function CreditsBalanceButton() {
|
|
const router = useLocaleRouter();
|
|
const { refreshTrigger } = useTransactionStore();
|
|
const [credits, setCredits] = useState<number>(0);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const fetchCredits = async () => {
|
|
try {
|
|
const result = await getCreditBalanceAction();
|
|
if (result?.data?.success && result.data.credits !== undefined) {
|
|
setCredits(result.data.credits);
|
|
}
|
|
} catch (error) {
|
|
console.error('CreditsBalanceButton, fetch credits error:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchCredits();
|
|
}, [refreshTrigger]);
|
|
|
|
const handleClick = () => {
|
|
router.push(Routes.SettingsCredits);
|
|
};
|
|
|
|
return (
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-8 gap-2 px-2 text-sm font-medium cursor-pointer"
|
|
onClick={handleClick}
|
|
>
|
|
<CoinsIcon className="h-4 w-4" />
|
|
<span className="">
|
|
{loading ? (
|
|
<Loader2Icon className="h-4 w-4 animate-spin" />
|
|
) : (
|
|
credits.toLocaleString()
|
|
)}
|
|
</span>
|
|
</Button>
|
|
);
|
|
}
|