Initial commit

components/CoinBalance.tsx

@@ -0,0 +1,19 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Coins } from 'lucide-react'
+
+export default function CoinBalance({ coinBalance }: { coinBalance: number }) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Coin Balance</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="flex items-center justify-center">
+          <Coins className="h-12 w-12 text-yellow-400 mr-4" />
+          <span className="text-4xl font-bold">{coinBalance}</span>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+