feat: modernize sign-in and responsive refactor
This commit is contained in:
CycroftX
170
src/components/features/Profile.tsx
Normal file
170
src/components/features/Profile.tsx
Normal file
@@ -0,0 +1,170 @@
|
||||
import React, { useState } from 'react';
|
||||
import { GlassCard } from '@/components/ui/GlassCard';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import {
|
||||
User,
|
||||
ShieldCheck,
|
||||
Globe,
|
||||
Bell,
|
||||
Moon,
|
||||
Download,
|
||||
Trash2,
|
||||
LogOut,
|
||||
CheckCircle,
|
||||
Building
|
||||
} from 'lucide-react';
|
||||
|
||||
export const Profile = () => {
|
||||
const [isShariaEnabled, setIsShariaEnabled] = useState(false);
|
||||
const [notifications, setNotifications] = useState(true);
|
||||
const [currency, setCurrency] = useState('AED');
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto space-y-6 animate-fade-in pb-20">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col sm:flex-row items-center sm:items-start gap-4 mb-8 text-center sm:text-left">
|
||||
<div className="w-20 h-20 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-3xl shadow-lg border-4 border-white shrink-0">
|
||||
👩💼
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-900">Anjali</h1>
|
||||
<div className="flex flex-col sm:flex-row items-center gap-2 mt-1">
|
||||
<Badge variant="outline" className="bg-green-50 text-green-700 border-green-200 gap-1">
|
||||
<CheckCircle className="w-3 h-3" /> Verified Investor
|
||||
</Badge>
|
||||
<span className="text-sm text-slate-500">Member since 2023</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Identity & KYC */}
|
||||
<GlassCard className="p-6 space-y-6">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="p-2 bg-blue-100 rounded-lg text-blue-600">
|
||||
<ShieldCheck className="w-5 h-5" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold">Identity & KYC</h3>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center p-3 bg-white/50 rounded-lg border border-white/40">
|
||||
<div>
|
||||
<p className="text-xs text-slate-500 uppercase tracking-wide">Emirates ID</p>
|
||||
<p className="font-mono text-slate-800">784-1988-1234567-9</p>
|
||||
</div>
|
||||
<Badge className="bg-green-100 text-green-700 hover:bg-green-100">Verified via UAE Pass</Badge>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center p-3 bg-white/50 rounded-lg border border-white/40">
|
||||
<div>
|
||||
<p className="text-xs text-slate-500 uppercase tracking-wide">Investor Number (NIN)</p>
|
||||
<p className="font-mono text-slate-800">99200312</p>
|
||||
</div>
|
||||
<Badge variant="outline" className="text-xs">ADX / DFM Linked</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</GlassCard>
|
||||
|
||||
{/* Regional Preferences */}
|
||||
<GlassCard className="p-6 space-y-6">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="p-2 bg-purple-100 rounded-lg text-purple-600">
|
||||
<Globe className="w-5 h-5" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold">Regional Preferences</h3>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-0.5">
|
||||
<Label className="text-base">Base Currency</Label>
|
||||
<p className="text-sm text-slate-500">Locked to AED for local compliance</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 bg-slate-100 rounded-lg p-1">
|
||||
<Button
|
||||
size="sm"
|
||||
variant={currency === 'AED' ? 'default' : 'ghost'}
|
||||
className={currency === 'AED' ? "bg-white text-slate-900 shadow-sm" : ""}
|
||||
onClick={() => setCurrency('AED')}
|
||||
>
|
||||
AED
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant={currency === 'USD' ? 'default' : 'ghost'}
|
||||
className={currency === 'USD' ? "bg-white text-slate-900 shadow-sm" : ""}
|
||||
onClick={() => setCurrency('USD')}
|
||||
>
|
||||
USD
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-0.5">
|
||||
<Label className="text-base flex items-center gap-2">
|
||||
Islamic Finance Mode <Moon className="w-4 h-4 text-green-600" />
|
||||
</Label>
|
||||
<p className="text-sm text-slate-500">Hide non-Sharia compliant assets</p>
|
||||
</div>
|
||||
<Switch checked={isShariaEnabled} onCheckedChange={setIsShariaEnabled} className="data-[state=checked]:bg-green-600" />
|
||||
</div>
|
||||
</div>
|
||||
</GlassCard>
|
||||
|
||||
{/* App Settings */}
|
||||
<GlassCard className="p-6 space-y-6">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="p-2 bg-orange-100 rounded-lg text-orange-600">
|
||||
<User className="w-5 h-5" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold">App Settings</h3>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-0.5">
|
||||
<Label className="text-base">Notifications</Label>
|
||||
<p className="text-sm text-slate-500">Market alerts and diverse insights</p>
|
||||
</div>
|
||||
<Switch checked={notifications} onCheckedChange={setNotifications} />
|
||||
</div>
|
||||
</div>
|
||||
</GlassCard>
|
||||
|
||||
{/* Data Privacy (UAE PDPL) */}
|
||||
<GlassCard className="p-6 space-y-6 border-red-100/50">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="p-2 bg-red-100 rounded-lg text-red-600">
|
||||
<ShieldCheck className="w-5 h-5" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold">Data Privacy</h3>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<Button variant="outline" className="w-full justify-start gap-2 border-slate-200">
|
||||
<Download className="w-4 h-4" /> Download My Data (UAE PDPL)
|
||||
</Button>
|
||||
<Button variant="ghost" className="w-full justify-start gap-2 text-red-600 hover:text-red-700 hover:bg-red-50">
|
||||
<Trash2 className="w-4 h-4" /> Delete Account
|
||||
</Button>
|
||||
<p className="text-xs text-slate-400 text-center pt-2">
|
||||
Your data is stored locally in UAE data centers in compliance with Federal Decree-Law No. 45 of 2021.
|
||||
</p>
|
||||
</div>
|
||||
</GlassCard>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center pt-8">
|
||||
<Button variant="ghost" className="text-slate-500 gap-2">
|
||||
<LogOut className="w-4 h-4" /> Sign Out
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user