60 lines
3.4 KiB
TypeScript
60 lines
3.4 KiB
TypeScript
|
import { useState } from 'react';
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
locale: string;
|
||
|
|
dashboard: { brandName: string; navHome: string; navStore: string; navDivination: string; navManual: string; navAuto: string; navHistory: string; navLanguage: string; navSettings: string; logout: string };
|
||
|
|
profile: { avatarTitle: string; avatarHint: string; uploadBtn: string; formTitle: string; emailLabel: string; displayNameLabel: string; displayNamePlaceholder: string; bioLabel: string; bioPlaceholder: string; saveBtn: string; cancelBtn: string };
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function ProfileDetailPage({ profile: p }: Props) {
|
||
|
|
const [displayName, setDisplayName] = useState('');
|
||
|
|
const [bio, setBio] = useState('');
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex flex-col lg:flex-row gap-6 min-h-full">
|
||
|
|
{/* Avatar edit */}
|
||
|
|
<div className="w-full lg:w-[360px] bg-white rounded-2xl p-7 border border-slate-200 flex flex-col items-center gap-5 shrink-0 self-start">
|
||
|
|
<div className="w-32 h-32 rounded-full bg-violet-50 border-2 border-violet-200 flex items-center justify-center">
|
||
|
|
<span className="text-violet-600 text-4xl font-bold">U</span>
|
||
|
|
</div>
|
||
|
|
<h3 className="text-slate-900 text-lg font-bold">{p.avatarTitle}</h3>
|
||
|
|
<p className="text-slate-500 text-[13px] text-center">{p.avatarHint}</p>
|
||
|
|
<button className="w-full h-[42px] rounded-full bg-violet-600 text-white text-sm font-semibold hover:bg-violet-700 transition-colors">{p.uploadBtn}</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Form */}
|
||
|
|
<div className="flex-1 bg-white rounded-2xl p-7 border border-slate-200 flex flex-col gap-6">
|
||
|
|
<h3 className="text-slate-900 text-xl font-bold">{p.formTitle}</h3>
|
||
|
|
|
||
|
|
{/* Email readonly */}
|
||
|
|
<div className="bg-slate-50 rounded-xl px-4 py-4 flex items-center gap-4">
|
||
|
|
<span className="material-symbols-rounded text-slate-400 text-lg">email</span>
|
||
|
|
<div>
|
||
|
|
<p className="text-slate-400 text-xs">{p.emailLabel}</p>
|
||
|
|
<p className="text-slate-600 text-sm">user@example.com</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Display name */}
|
||
|
|
<div className="flex flex-col gap-2">
|
||
|
|
<label className="text-slate-700 text-sm font-medium">{p.displayNameLabel}</label>
|
||
|
|
<input value={displayName} onChange={e => setDisplayName(e.target.value)} placeholder={p.displayNamePlaceholder}
|
||
|
|
className="w-full h-11 px-4 rounded-lg bg-slate-50 border border-slate-200 text-sm focus:outline-none focus:border-violet-400 focus:ring-1 focus:ring-violet-400" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Bio */}
|
||
|
|
<div className="flex flex-col gap-2">
|
||
|
|
<label className="text-slate-700 text-sm font-medium">{p.bioLabel}</label>
|
||
|
|
<textarea value={bio} onChange={e => setBio(e.target.value)} placeholder={p.bioPlaceholder} rows={4}
|
||
|
|
className="w-full px-4 py-3 rounded-lg bg-slate-50 border border-slate-200 text-sm focus:outline-none focus:border-violet-400 focus:ring-1 focus:ring-violet-400 resize-none" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex gap-3 justify-end mt-auto">
|
||
|
|
<button className="px-5 py-2.5 rounded-lg text-sm text-slate-500 hover:bg-slate-50 transition-colors">{p.cancelBtn}</button>
|
||
|
|
<button className="px-5 py-2.5 rounded-lg bg-violet-600 text-white text-sm font-semibold hover:bg-violet-700 transition-colors">{p.saveBtn}</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|