initial commit

components/profile/ProfileCard.tsx

@@ -0,0 +1,189 @@
+'use client'
+import Image from 'next/image'
+import { useState } from 'react'
+import { useAuth } from '@/contexts/AuthContext'
+import { useProfileData } from '@/hooks/useProfileData'
+import { Card, CardContent, CardHeader } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Camera, Mail, Calendar, Shield, Copy, Check, Server, Wallet } from 'lucide-react'
+import { BalanceDisplay } from '@/components/balance'
+
+export function ProfileCard() {
+  const { user } = useAuth()
+  const { profileStats, isLoading } = useProfileData()
+  const [copied, setCopied] = useState(false)
+
+  if (!user) return null
+
+  // Generate Silicon ID (dummy implementation for UI testing)
+  const siliconId = user.siliconId || ''
+  // const siliconId = user.email?.split('@')[0]?.toUpperCase() || 'SILICON001'
+
+  const handleCopySiliconId = async () => {
+    try {
+      await navigator.clipboard.writeText(siliconId)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch (err) {
+      console.error('Failed to copy: ', err)
+    }
+  }
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    })
+  }
+
+  const getProviderBadge = (provider: string) => {
+    const variants = {
+      local: { variant: 'secondary' as const, label: 'Email' },
+      google: { variant: 'default' as const, label: 'Google' },
+      github: { variant: 'outline' as const, label: 'GitHub' },
+    }
+
+    const config = variants[provider as keyof typeof variants] || variants.local
+
+    return (
+      <Badge variant={config.variant} className="text-xs">
+        {config.label}
+      </Badge>
+    )
+  }
+
+  return (
+    <Card>
+      <CardHeader className="text-center">
+        <div className="relative mx-auto">
+          <div className="w-24 h-24 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white text-2xl font-bold mb-4 mx-auto">
+            {user.avatar ? (
+              <Image
+                src={user.avatar}
+                alt={user.name}
+                width={96}
+                height={96}
+                className="w-24 h-24 rounded-full object-cover"
+              />
+            ) : (
+              user.name.charAt(0).toUpperCase()
+            )}
+          </div>
+          <Button
+            size="sm"
+            variant="outline"
+            className="absolute bottom-0 right-0 rounded-full w-8 h-8 p-0"
+          >
+            <Camera className="w-4 h-4" />
+          </Button>
+        </div>
+
+        <div className="space-y-3">
+          <h2 className="text-xl font-semibold">{user.name}</h2>
+
+          <div className="flex items-center justify-center gap-1 text-sm">
+            <span className="text-muted-foreground">Silicon ID:</span>
+            <code className="px-2 py-1 bg-muted rounded text-sm font-mono">{siliconId}</code>
+            <Button size="sm" variant="ghost" className="h-6 w-6 p-0" onClick={handleCopySiliconId}>
+              {copied ? <Check className="w-3 h-3 text-green-600" /> : <Copy className="w-3 h-3" />}
+            </Button>
+          </div>
+
+          <div className="flex items-center justify-center gap-2">
+            {getProviderBadge(user.provider)}
+            {user.role === 'admin' && (
+              <Badge variant="destructive" className="text-xs">
+                <Shield className="w-3 h-3 mr-1" />
+                Admin
+              </Badge>
+            )}
+          </div>
+        </div>
+      </CardHeader>
+
+      <CardContent className="space-y-4">
+        <div className="flex items-center space-x-3 text-sm">
+          <Mail className="w-4 h-4 text-muted-foreground" />
+          <span className="text-muted-foreground">{user.email}</span>
+        </div>
+
+        <div className="flex items-center space-x-3 text-sm">
+          <Calendar className="w-4 h-4 text-muted-foreground" />
+          <div className="flex flex-col">
+            <span className="text-muted-foreground">Joined {formatDate(user.createdAt)}</span>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-4 pt-4 border-t">
+          <div className="text-center">
+            <div className="flex items-center justify-center gap-1 mb-1">
+              <Server className="w-4 h-4 text-muted-foreground" />
+              {isLoading ? (
+                <Skeleton className="h-6 w-4" />
+              ) : (
+                <span className="text-lg font-semibold">{profileStats?.activeServices || 3}</span>
+              )}
+            </div>
+            <span className="text-xs text-muted-foreground">Active Services</span>
+          </div>
+          <div className="text-center">
+            <div className="flex items-center justify-center gap-1 mb-1">
+              {/* <Wallet className="w-4 h-4 text-muted-foreground" /> */}
+              {isLoading ? (
+                <Skeleton className="h-6 w-16" />
+              ) : (
+                <BalanceDisplay
+                  className="text-lg font-semibold text-green-600"
+                  variant="default"
+                />
+                // <span className="text-lg font-semibold text-green-600">
+                //   ₹
+                //   {profileS'tats?.balance?.toLocaleString('en-IN', { minimumFractionDigits: 2 }) ||
+                //     '1,250.00'}
+                // </span>
+              )}
+            </div>
+            <span className="text-xs text-muted-foreground">Balance</span>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-4 pt-3">
+          <div className="text-center">
+            {isLoading ? (
+              <Skeleton className="h-6 w-8 mx-auto mb-1" />
+            ) : (
+              <div className="text-lg font-semibold text-blue-600">
+                {profileStats?.totalTopics || 0}
+              </div>
+            )}
+            <span className="text-xs text-muted-foreground">Total Topics</span>
+          </div>
+          <div className="text-center">
+            {isLoading ? (
+              <Skeleton className="h-6 w-12 mx-auto mb-1" />
+            ) : (
+              <div className="text-lg font-semibold text-purple-600">
+                {profileStats?.totalViews
+                  ? profileStats.totalViews >= 1000
+                    ? `${(profileStats.totalViews / 1000).toFixed(1)}K`
+                    : profileStats.totalViews.toLocaleString()
+                  : '0'}
+              </div>
+            )}
+            <span className="text-xs text-muted-foreground">Total Views</span>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between pt-2">
+          <span className="text-sm text-muted-foreground">Account Status</span>
+          <Badge variant={user.isVerified ? 'default' : 'secondary'}>
+            {user.isVerified ? 'Verified' : 'Unverified'}
+          </Badge>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}