62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
'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>
|
|
)
|
|
}
|