The AIWalletCard component is a sleek and professional interface element designed to display and manage a user’s AI credit balance. Built with a minimalist black-and-white aesthetic, it adapts seamlessly to both light and dark themes, offering a clean and distraction-free experience. The component shows essential details such as the current balance, usage progress, and recent transactions, making it perfect for AI-based platforms, subscription dashboards, or credit management systems. Its simple structure, configurable props, and responsive design ensure easy customization while maintaining a modern, utility-first look that aligns well with professional dashboard interfaces.
"use client";
import { useState } from "react";
import { AIWalletCard } from "@/components/ui/aiwallet-card";
export default function AIWalletDemoPage() {
const [balance, setBalance] = useState(120);
const [usage, setUsage] = useState(60);
const handleTopUp = () => {
setBalance((prev) => prev + 50);
setUsage((prev) => Math.max(prev - 20, 0));
};
return (
<div className="min-h-screen w-full flex flex-col items-center justify-center bg-gray-50 dark:bg-[#0D1117] p-6 space-y-6 transition-colors">
<h1 className="text-3xl font-bold text-gray-900 dark:text-white">AI Wallet Card Demo</h1>
<AIWalletCard
title="AI Credit Wallet"
description="Track, manage and top-up your AI credits."
balance={balance}
usage={usage}
currency="$"
onTopUp={handleTopUp}
showTransactions={true}
/>
</div>
);
}