79 lines
2.7 KiB
TypeScript
79 lines
2.7 KiB
TypeScript
import { Card } from '@/components/ui/card';
|
|
import { Input } from '@/components/ui/input';
|
|
import type { EditProfileFormData } from './types';
|
|
|
|
interface EditProfileIdentityCardProps {
|
|
formData: EditProfileFormData;
|
|
setFormField: <K extends keyof EditProfileFormData>(
|
|
key: K,
|
|
value: EditProfileFormData[K],
|
|
) => void;
|
|
}
|
|
|
|
export function EditProfileIdentityCard({
|
|
formData,
|
|
setFormField,
|
|
}: EditProfileIdentityCardProps) {
|
|
return (
|
|
<Card variant="default">
|
|
<h3 className="font-bold text-foreground mb-6 border-b border-border pb-2 tracking-tight">
|
|
Identity
|
|
</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
|
<Input
|
|
label="Username"
|
|
value={formData.username}
|
|
onChange={(e) => setFormField('username', e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
|
<Input
|
|
label="First Name"
|
|
value={formData.first_name}
|
|
onChange={(e) => setFormField('first_name', e.target.value)}
|
|
/>
|
|
<Input
|
|
label="Last Name"
|
|
value={formData.last_name}
|
|
onChange={(e) => setFormField('last_name', e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="mb-4">
|
|
<label className="block text-sm font-medium text-muted-foreground mb-2">
|
|
Bio
|
|
</label>
|
|
<textarea
|
|
className="w-full bg-muted border border-border rounded-xl p-4 text-foreground focus:border-primary outline-none min-h-24 transition-colors duration-[var(--duration-normal)]"
|
|
value={formData.bio}
|
|
onChange={(e) => setFormField('bio', e.target.value)}
|
|
maxLength={500}
|
|
/>
|
|
<p className="text-xs text-muted-foreground text-right mt-1">
|
|
{formData.bio.length}/500
|
|
</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<Input
|
|
label="Location"
|
|
value={formData.location}
|
|
onChange={(e) => setFormField('location', e.target.value)}
|
|
/>
|
|
<div>
|
|
<label className="block text-sm font-medium text-muted-foreground mb-2">
|
|
Gender
|
|
</label>
|
|
<select
|
|
className="w-full bg-muted border border-border rounded-xl p-4 text-foreground focus:border-primary outline-none transition-colors duration-[var(--duration-normal)]"
|
|
value={formData.gender}
|
|
onChange={(e) => setFormField('gender', e.target.value)}
|
|
>
|
|
<option>Male</option>
|
|
<option>Female</option>
|
|
<option>Other</option>
|
|
<option>Prefer not to say</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|