chore: add CreditsTest component

This commit is contained in:
javayhu 2025-08-24 19:26:49 +08:00
parent 95a6f3b9d5
commit 0fb4ef93d2
2 changed files with 57 additions and 0 deletions

View File

@ -1,3 +1,4 @@
import { CreditsTest } from '@/components/dev/credits-test';
import Container from '@/components/layout/container';
import { BlurFadeDemo } from '@/components/magicui/example/blur-fade-example';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
@ -101,6 +102,9 @@ export default async function AboutPage() {
{/* image section */}
{/* <BlurFadeDemo /> */}
{/* credits test */}
{/* <CreditsTest /> */}
</div>
</Container>
);

View File

@ -0,0 +1,53 @@
'use client';
import { Button } from '@/components/ui/button';
import { useConsumeCredits, useCreditBalance } from '@/hooks/use-credits';
import { CoinsIcon } from 'lucide-react';
import { useState } from 'react';
import { toast } from 'sonner';
export function CreditsTest() {
const { data: balance = 0, isLoading } = useCreditBalance();
const consumeCreditsMutation = useConsumeCredits();
const [loading, setLoading] = useState(false);
const handleConsume = async () => {
setLoading(true);
try {
await consumeCreditsMutation.mutateAsync({
amount: 10,
description: 'Test credit consumption',
});
toast.success('10 credits consumed successfully!');
} catch (error) {
toast.error('Failed to consume credits');
} finally {
setLoading(false);
}
};
return (
<div className="p-4 border rounded-lg space-y-4">
<h3 className="text-lg font-semibold">Credits Store Test</h3>
<div className="space-y-2">
<p>
<strong>Store Balance:</strong> {balance}
</p>
</div>
<div className="flex gap-2">
<Button
onClick={handleConsume}
disabled={loading || consumeCreditsMutation.isPending}
size="sm"
>
<CoinsIcon className="w-4 h-4 mr-2" />
Consume 10 Credits
</Button>
</div>
{loading && <p className="text-sm text-muted-foreground">Loading...</p>}
</div>
);
}