54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import { ImageCropper } from '@/components/ui/ImageCropper';
|
|
import { useEditProfile } from './useEditProfile';
|
|
import { EditProfileImagesCard } from './EditProfileImagesCard';
|
|
import { EditProfileIdentityCard } from './EditProfileIdentityCard';
|
|
import { EditProfileSidebar } from './EditProfileSidebar';
|
|
|
|
export const EditProfile: React.FC = () => {
|
|
const {
|
|
avatar,
|
|
banner,
|
|
cropImage,
|
|
cropType,
|
|
loading,
|
|
formData,
|
|
handleSave,
|
|
handleFileChange,
|
|
handleCropComplete,
|
|
setFormField,
|
|
cancelCrop,
|
|
requestVerification,
|
|
} = useEditProfile();
|
|
|
|
return (
|
|
<div className="space-y-8 animate-fadeIn max-w-4xl mx-auto">
|
|
<EditProfileImagesCard
|
|
avatar={avatar}
|
|
banner={formData.banner_url || banner}
|
|
bannerUrl={formData.banner_url}
|
|
onBannerUrlChange={(url) => setFormField('banner_url', url)}
|
|
loading={loading}
|
|
onFileChange={handleFileChange}
|
|
onSave={handleSave}
|
|
/>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
<div className="lg:col-span-2 space-y-6">
|
|
<EditProfileIdentityCard formData={formData} setFormField={setFormField} />
|
|
</div>
|
|
<EditProfileSidebar onRequestVerification={requestVerification} />
|
|
</div>
|
|
|
|
{cropImage && cropType && (
|
|
<ImageCropper
|
|
imageSrc={cropImage}
|
|
aspectRatio={cropType === 'avatar' ? 1 : 3}
|
|
circularCrop={cropType === 'avatar'}
|
|
onCancel={cancelCrop}
|
|
onCropComplete={handleCropComplete}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|