initial commit

components/balance/BalanceDisplay.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import React from 'react'
+import { useAuth } from '@/contexts/AuthContext'
+import { Badge } from '@/components/ui/badge'
+import { Wallet } from 'lucide-react'
+
+interface BalanceDisplayProps {
+  variant?: 'default' | 'compact' | 'badge'
+  showIcon?: boolean
+  className?: string
+}
+
+export function BalanceDisplay({
+  variant = 'default',
+  showIcon = true,
+  className = '',
+}: BalanceDisplayProps) {
+  const { user } = useAuth()
+
+  if (!user) return null
+
+  const balance = user.balance || 0
+
+  const formatBalance = (amount: number) => {
+    return new Intl.NumberFormat('en-IN', {
+      style: 'currency',
+      currency: 'INR',
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 2,
+    }).format(amount)
+  }
+
+  if (variant === 'badge') {
+    return (
+      <Badge variant="secondary" className={`${className}`}>
+        {showIcon && <Wallet className="h-3 w-3 mr-1" />}
+        {formatBalance(balance)}
+      </Badge>
+    )
+  }
+
+  if (variant === 'compact') {
+    return (
+      <div className={`flex items-center space-x-1 text-sm ${className}`}>
+        {showIcon && <Wallet className="h-4 w-4 text-muted-foreground" />}
+        <span className="font-medium">{formatBalance(balance)}</span>
+      </div>
+    )
+  }
+
+  return (
+    <div className={`flex items-center space-x-2 ${className}`}>
+      {showIcon && <Wallet className="h-5 w-5 text-muted-foreground" />}
+      <div>
+        <div className="text-lg font-semibold">{formatBalance(balance)}</div>
+        {/* <div className="text-xs text-muted-foreground">Balance</div> */}
+      </div>
+    </div>
+  )
+}