Goutam/LynkedUpPro_CRM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

redesigned createItemModal with responsive and light /dark mode

Browse Source
This commit is contained in:
Satyam-Rastogi
2026-05-15 15:19:51 +05:30
parent a9d3d1ce48
commit 932e1bdbaa
1 changed files with 73 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/owner/CreateItemModal.jsx
+28 -17
View File
@@ -20,35 +20,38 @@ const CreateItemModal = ({ isOpen, onClose, title, icon: Icon, iconColor = "text
onClose(); onClose();
}; };
const inputBase = "w-full bg-white dark:bg-[#18181b] border border-zinc-200 dark:border-white/10 rounded-xl px-4 py-3 text-sm text-zinc-900 dark:text-white placeholder-zinc-400 dark:placeholder-zinc-600 focus:outline-none focus:border-[#00f0ff] focus:ring-1 focus:ring-[#00f0ff] transition-all";
return createPortal( return createPortal(
<div className="fixed inset-0 z-[9999] flex items-center justify-center p-4" role="dialog" aria-modal="true"> <div className="fixed inset-0 z-[9999] flex items-center justify-center p-3 sm:p-4" role="dialog" aria-modal="true">
<div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} /> <div className="absolute inset-0 bg-black/50 dark:bg-black/60 backdrop-blur-sm" onClick={onClose} />
<div className="relative w-full max-w-md bg-[#121214] rounded-2xl shadow-[0_0_40px_rgba(0,0,0,0.8)] border border-white/10 overflow-hidden animate-in zoom-in-95 duration-200"> <div className="relative w-full max-w-md max-h-[92vh] sm:max-h-[90vh] bg-white dark:bg-[#121214] rounded-2xl shadow-2xl shadow-zinc-900/20 dark:shadow-[0_0_40px_rgba(0,0,0,0.8)] border border-zinc-200 dark:border-white/10 overflow-hidden flex flex-col animate-in zoom-in-95 duration-200">
{/* Header */} {/* Header */}
<div className="px-6 py-5 border-b border-white/10 flex justify-between items-center bg-white/5"> <div className="px-5 sm:px-6 py-4 sm:py-5 border-b border-zinc-200 dark:border-white/10 flex justify-between items-center bg-zinc-50 dark:bg-white/5 shrink-0">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3 min-w-0">
{Icon && ( {Icon && (
<div className={`p-2 rounded-xl ${iconBg} ${iconColor}`}> <div className={`p-2 rounded-xl ${iconBg} ${iconColor} shrink-0`}>
<Icon size={20} /> <Icon size={20} />
</div> </div>
)} )}
<h2 className="text-lg font-bold text-white tracking-widest uppercase">{title}</h2> <h2 className="text-base sm:text-lg font-bold text-zinc-900 dark:text-white tracking-widest uppercase truncate">{title}</h2>
</div> </div>
<button onClick={onClose} className="p-2 rounded-lg hover:bg-white/10 text-zinc-500 hover:text-white transition-colors"> <button onClick={onClose} className="p-2 rounded-lg hover:bg-zinc-100 dark:hover:bg-white/10 text-zinc-500 hover:text-zinc-900 dark:hover:text-white transition-colors shrink-0">
<X size={18} /> <X size={18} />
</button> </button>
</div> </div>
{/* Content */} {/* Content */}
<form onSubmit={handleSubmit} className="p-6 space-y-5"> <form onSubmit={handleSubmit} className="flex-1 flex flex-col min-h-0">
<div className="flex-1 overflow-y-auto px-5 sm:px-6 py-5 space-y-5">
{fields.map((field, i) => ( {fields.map((field, i) => (
<div key={i} className="space-y-1.5"> <div key={i} className="space-y-1.5">
<label htmlFor={field.name} className="text-xs font-bold uppercase tracking-wider text-zinc-400">{field.label}</label> <label htmlFor={field.name} className="text-xs font-bold uppercase tracking-wider text-zinc-600 dark:text-zinc-400">{field.label}</label>
{field.type === 'textarea' ? ( {field.type === 'textarea' ? (
<textarea <textarea
id={field.name} id={field.name}
name={field.name} name={field.name}
className="w-full bg-[#18181b] border border-white/10 rounded-xl px-4 py-3 text-sm text-white placeholder-zinc-600 focus:outline-none focus:border-[#00f0ff] focus:ring-1 focus:ring-[#00f0ff] transition-all" className={inputBase}
rows={4} rows={4}
placeholder={field.placeholder || ''} placeholder={field.placeholder || ''}
required={field.required} required={field.required}
@@ -59,7 +62,7 @@ const CreateItemModal = ({ isOpen, onClose, title, icon: Icon, iconColor = "text
<select <select
id={field.name} id={field.name}
name={field.name} name={field.name}
className="w-full bg-[#18181b] border border-white/10 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-[#00f0ff] focus:ring-1 focus:ring-[#00f0ff] transition-all" className={inputBase}
required={field.required} required={field.required}
value={formData[field.name] || ''} value={formData[field.name] || ''}
onChange={e => setFormData({ ...formData, [field.name]: e.target.value })} onChange={e => setFormData({ ...formData, [field.name]: e.target.value })}
@@ -73,7 +76,7 @@ const CreateItemModal = ({ isOpen, onClose, title, icon: Icon, iconColor = "text
name={field.name} name={field.name}
type="file" type="file"
accept={field.accept} accept={field.accept}
className="w-full text-sm text-zinc-400 file:mr-4 file:py-2.5 file:px-4 file:rounded-xl file:border file:border-white/10 file:text-sm file:font-bold file:bg-[#18181b] file:text-white hover:file:bg-white/5 transition-all" className="w-full text-sm text-zinc-600 dark:text-zinc-400 file:mr-4 file:py-2.5 file:px-4 file:rounded-xl file:border file:border-zinc-200 dark:file:border-white/10 file:text-sm file:font-bold file:bg-zinc-50 dark:file:bg-[#18181b] file:text-zinc-900 dark:file:text-white hover:file:bg-zinc-100 dark:hover:file:bg-white/5 transition-all"
required={field.required} required={field.required}
onChange={e => setFormData({ ...formData, [field.name]: e.target.files[0] })} onChange={e => setFormData({ ...formData, [field.name]: e.target.files[0] })}
/> />
@@ -82,7 +85,7 @@ const CreateItemModal = ({ isOpen, onClose, title, icon: Icon, iconColor = "text
id={field.name} id={field.name}
name={field.name} name={field.name}
type={field.type || 'text'} type={field.type || 'text'}
className="w-full bg-[#18181b] border border-white/10 rounded-xl px-4 py-3 text-sm text-white placeholder-zinc-600 focus:outline-none focus:border-[#00f0ff] focus:ring-1 focus:ring-[#00f0ff] transition-all" className={inputBase}
placeholder={field.placeholder || ''} placeholder={field.placeholder || ''}
required={field.required} required={field.required}
value={formData[field.name] || ''} value={formData[field.name] || ''}
@@ -91,13 +94,21 @@ const CreateItemModal = ({ isOpen, onClose, title, icon: Icon, iconColor = "text
)} )}
</div> </div>
))} ))}
</div>
{/* Footer */} {/* Footer */}
<div className="pt-4 flex justify-end gap-3"> <div className="px-5 sm:px-6 py-4 border-t border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/[0.02] flex flex-col-reverse sm:flex-row sm:justify-end gap-2 sm:gap-3 shrink-0">
<button type="button" onClick={onClose} className="px-5 py-2.5 text-sm font-bold text-zinc-400 hover:text-white transition-colors"> <button
type="button"
onClick={onClose}
className="px-5 py-2.5 text-sm font-bold rounded-xl border border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-white/5 hover:text-zinc-900 dark:hover:text-white transition-colors"
>
Cancel Cancel
</button> </button>
<button type="submit" className={`px-6 py-2.5 text-sm font-bold rounded-xl border ${submitColor} hover:brightness-110 transition-all shadow-[0_0_15px_rgba(0,0,0,0.5)]`}> <button
type="submit"
className={`px-6 py-2.5 text-sm font-bold rounded-xl border ${submitColor} hover:brightness-110 transition-all shadow-sm dark:shadow-[0_0_15px_rgba(0,0,0,0.5)]`}
>
{submitLabel} {submitLabel}
</button> </button>
</div> </div>