Spaces:
Configuration error
Configuration error
File size: 5,954 Bytes
2c6bb7b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 |
import { useState } from 'react'
import { useAuthStore } from '@/store/authStore'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Textarea } from '@/components/ui/textarea'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { getInitials } from '@/lib/utils'
import { User, Settings } from 'lucide-react'
export default function ProfilePage() {
const { user, updateUser } = useAuthStore()
const [isEditing, setIsEditing] = useState(false)
const [formData, setFormData] = useState({
displayName: user?.displayName || '',
bio: user?.bio || '',
})
const handleSave = () => {
if (user) {
updateUser(formData)
setIsEditing(false)
}
}
const handleCancel = () => {
setFormData({
displayName: user?.displayName || '',
bio: user?.bio || '',
})
setIsEditing(false)
}
if (!user) return null
return (
<div className="min-h-screen bg-background p-6">
<div className="max-w-2xl mx-auto space-y-6">
<div className="flex items-center space-x-4">
<Button variant="ghost" size="icon">
<User className="w-5 h-5" />
</Button>
<h1 className="text-3xl font-bold">Profile</h1>
</div>
<Card>
<CardHeader>
<CardTitle>Personal Information</CardTitle>
<CardDescription>
Manage your account details and preferences
</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<div className="flex items-center space-x-4">
<Avatar className="w-20 h-20">
<AvatarImage src={user.avatar} />
<AvatarFallback className="text-lg">
{getInitials(user.displayName)}
</AvatarFallback>
</Avatar>
<div>
<Button variant="outline" size="sm">
Change Avatar
</Button>
<p className="text-sm text-muted-foreground mt-1">
JPG, PNG or GIF. Max size 2MB.
</p>
</div>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label>Email</Label>
<Input value={user.email} disabled />
</div>
<div className="space-y-2">
<Label>Username</Label>
<Input value={user.username} disabled />
</div>
</div>
<div className="space-y-2">
<Label htmlFor="displayName">Display Name</Label>
<Input
id="displayName"
value={formData.displayName}
onChange={(e) => setFormData(prev => ({ ...prev, displayName: e.target.value }))}
disabled={!isEditing}
/>
</div>
<div className="space-y-2">
<Label htmlFor="bio">Bio</Label>
<Textarea
id="bio"
placeholder="Tell us about yourself..."
value={formData.bio}
onChange={(e) => setFormData(prev => ({ ...prev, bio: e.target.value }))}
disabled={!isEditing}
rows={3}
/>
</div>
<div className="flex justify-end space-x-2">
{isEditing ? (
<>
<Button variant="outline" onClick={handleCancel}>
Cancel
</Button>
<Button onClick={handleSave}>
Save Changes
</Button>
</>
) : (
<Button onClick={() => setIsEditing(true)}>
Edit Profile
</Button>
)}
</div>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Account Settings</CardTitle>
<CardDescription>
Security and privacy settings
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="flex items-center justify-between">
<div>
<h4 className="font-medium">Change Password</h4>
<p className="text-sm text-muted-foreground">
Update your password to keep your account secure
</p>
</div>
<Button variant="outline">
Change Password
</Button>
</div>
<div className="flex items-center justify-between">
<div>
<h4 className="font-medium">Two-Factor Authentication</h4>
<p className="text-sm text-muted-foreground">
Add an extra layer of security to your account
</p>
</div>
<Button variant="outline">
Enable 2FA
</Button>
</div>
<div className="flex items-center justify-between">
<div>
<h4 className="font-medium">Privacy Settings</h4>
<p className="text-sm text-muted-foreground">
Control who can see your information
</p>
</div>
<Button variant="outline">
<Settings className="w-4 h-4 mr-2" />
Manage
</Button>
</div>
</CardContent>
</Card>
</div>
</div>
)
}
|