replace modals with a centralized component
This commit is contained in:
@@ -11,6 +11,7 @@ import { Button } from "../components/ui/button"
|
||||
import { Camera, Edit2, Trash2, User as UserIcon, UploadCloud } from "lucide-react"
|
||||
import JalaliDatePicker from "../components/ui/JalaliDatePicker"
|
||||
import { toast } from "sonner"
|
||||
import { Modal } from "../components/Modal"
|
||||
|
||||
export interface UserProfile {
|
||||
id?: string;
|
||||
@@ -261,18 +262,33 @@ export default function Profile() {
|
||||
|
||||
{/* Edit Profile Modal */}
|
||||
{isEditModalOpen && (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm px-4"
|
||||
onClick={() => !isSaving && setIsEditModalOpen(false)}
|
||||
<Modal
|
||||
isOpen={isEditModalOpen}
|
||||
isFa={isFa}
|
||||
onClose={() => setIsEditModalOpen(false)}
|
||||
title={t.profile?.title || "Edit Profile"}
|
||||
maxWidth="max-w-lg"
|
||||
footer={
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsEditModalOpen(false)}
|
||||
className="px-4 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700 rounded-lg"
|
||||
>
|
||||
{t.cancel || "Cancel"}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSaveProfile}
|
||||
disabled={isSaving}
|
||||
className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg disabled:opacity-50"
|
||||
>
|
||||
{isSaving ? "Saving..." : t.profile?.save || "Save"}
|
||||
</button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="w-full max-w-lg rounded-xl bg-white p-6 shadow-lg dark:bg-slate-900 border dark:border-slate-800"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<h2 className="mb-4 text-xl font-bold text-slate-900 dark:text-white">
|
||||
{t.profile?.editInfo || 'Edit Profile'}
|
||||
</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
@@ -323,98 +339,94 @@ export default function Profile() {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 flex justify-end gap-3">
|
||||
<Button variant="outline" onClick={() => setIsEditModalOpen(false)} disabled={isSaving}>
|
||||
{t.profile?.cancel || t.cancel || 'Cancel'}
|
||||
</Button>
|
||||
<Button onClick={handleSaveProfile} disabled={isSaving}>
|
||||
{isSaving ? '...' : (t.profile?.save || 'Save')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)}
|
||||
|
||||
{/* Profile Picture Modal */}
|
||||
|
||||
{isPicModalOpen && (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm px-4"
|
||||
onClick={() => !isSaving && setIsPicModalOpen(false)}
|
||||
>
|
||||
<div
|
||||
className="w-full max-w-sm rounded-xl bg-white p-6 shadow-lg dark:bg-slate-900 border dark:border-slate-800"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
<Modal
|
||||
isOpen={isPicModalOpen}
|
||||
onClose={() => !isSaving && setIsPicModalOpen(false)}
|
||||
title={t.profile?.changePicture || 'Profile Picture'}
|
||||
maxWidth="max-w-sm"
|
||||
footer={
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setIsPicModalOpen(false)}
|
||||
disabled={isSaving}
|
||||
>
|
||||
<h2 className="mb-4 text-xl font-bold text-slate-900 dark:text-white">
|
||||
{t.profile?.changePicture || 'Profile Picture'}
|
||||
</h2>
|
||||
{t.profile?.cancel || t.cancel || 'Cancel'}
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
{/* Drag and Drop Zone */}
|
||||
<div
|
||||
onDragEnter={handleDrag}
|
||||
onDragLeave={handleDrag}
|
||||
onDragOver={handleDrag}
|
||||
onDrop={handleDrop}
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className={`relative flex flex-col items-center justify-center w-full h-48 border-2 border-dashed rounded-xl cursor-pointer transition-colors ${
|
||||
dragActive
|
||||
? "border-blue-500 bg-blue-50 dark:bg-blue-900/20"
|
||||
: "border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 hover:bg-slate-100 dark:hover:bg-slate-800/80"
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
onChange={(e) => setSelectedFile(e.target.files?.[0] || null)}
|
||||
/>
|
||||
|
||||
<div className="space-y-4">
|
||||
|
||||
{/* Drag and Drop Zone */}
|
||||
<div
|
||||
onDragEnter={handleDrag}
|
||||
onDragLeave={handleDrag}
|
||||
onDragOver={handleDrag}
|
||||
onDrop={handleDrop}
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className={`relative flex flex-col items-center justify-center w-full h-48 border-2 border-dashed rounded-xl cursor-pointer transition-colors ${
|
||||
dragActive
|
||||
? "border-blue-500 bg-blue-50 dark:bg-blue-900/20"
|
||||
: "border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 hover:bg-slate-100 dark:hover:bg-slate-800/80"
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
onChange={(e) => setSelectedFile(e.target.files?.[0] || null)}
|
||||
{selectedFile ? (
|
||||
<div className="absolute inset-0 p-2">
|
||||
<img
|
||||
src={URL.createObjectURL(selectedFile)}
|
||||
alt="Preview"
|
||||
className="w-full h-full object-contain rounded-lg"
|
||||
/>
|
||||
|
||||
{selectedFile ? (
|
||||
<div className="absolute inset-0 p-2">
|
||||
<img
|
||||
src={URL.createObjectURL(selectedFile)}
|
||||
alt="Preview"
|
||||
className="w-full h-full object-contain rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center text-center p-4">
|
||||
<UploadCloud className="h-10 w-10 text-slate-400 mb-2" />
|
||||
<p className="text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||
{ t.profile?.imageInput }
|
||||
</p>
|
||||
<p className="text-xs text-slate-500 mt-1">
|
||||
SVG, PNG, JPG (MAX. 800x400px)
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2 mt-4">
|
||||
<Button onClick={handlePictureUpload} disabled={!selectedFile || isSaving} className="w-full">
|
||||
{t.profile?.upload || 'Upload'}
|
||||
</Button>
|
||||
|
||||
{user.profile_picture && (
|
||||
<Button variant="destructive" onClick={handleDeletePicture} disabled={isSaving} className="w-full flex items-center justify-center gap-2">
|
||||
<Trash2 className="h-4 w-4" />
|
||||
{t.profile?.remove || "Remove"}
|
||||
</Button>
|
||||
)}
|
||||
) : (
|
||||
<div className="flex flex-col items-center text-center p-4">
|
||||
<UploadCloud className="h-10 w-10 text-slate-400 mb-2" />
|
||||
<p className="text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||
{ t.profile?.imageInput }
|
||||
</p>
|
||||
<p className="text-xs text-slate-500 mt-1">
|
||||
SVG, PNG, JPG (MAX. 800x400px)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-6 flex justify-end">
|
||||
<Button variant="outline" onClick={() => setIsPicModalOpen(false)} disabled={isSaving}>
|
||||
{t.profile?.cancel || t.cancel || 'Cancel'}
|
||||
<div className="flex flex-col gap-2 mt-4">
|
||||
<Button
|
||||
onClick={handlePictureUpload}
|
||||
disabled={!selectedFile || isSaving}
|
||||
className="w-full"
|
||||
>
|
||||
{t.profile?.upload || 'Upload'}
|
||||
</Button>
|
||||
|
||||
{user?.profile_picture && (
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={handleDeletePicture}
|
||||
disabled={isSaving}
|
||||
className="w-full flex items-center justify-center gap-2"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
{t.profile?.remove || "Remove"}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user