marketing-shibata50/9router
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Enhance layout

Browse source
This commit is contained in:
decolua 2026-01-31 12:58:04 +07:00
parent 8c37b39eed
commit 8897df5036
23 changed files with 458 additions and 326 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/shared/components/Modal.js
View file

@ -52,7 +52,7 @@ export default function Modal({
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
{/* Overlay */}
<div
className="absolute inset-0 bg-black/50 backdrop-blur-sm"
className="absolute inset-0 bg-black/30 backdrop-blur-sm"
onClick={closeOnOverlay ? onClose : undefined}
/>
@ -60,8 +60,8 @@ export default function Modal({
<div
className={cn(
"relative w-full bg-surface",
"border border-border",
"rounded-2xl shadow-elevated",
"border border-black/10 dark:border-white/10",
"rounded-xl shadow-2xl",
"animate-in fade-in zoom-in-95 duration-200",
sizes[size],
className
@ -69,16 +69,23 @@ export default function Modal({
>
{/* Header */}
{(title || showCloseButton) && (
<div className="flex items-center justify-between p-6 border-b border-border">
{title && (
<h2 className="text-lg font-semibold text-text-main">
{title}
</h2>
)}
<div className="flex items-center justify-between p-6 border-b border-black/5 dark:border-white/5">
<div className="flex items-center">
<div className="flex items-center gap-2 mr-4">
<div className="w-3 h-3 rounded-full bg-[#FF5F56]" />
<div className="w-3 h-3 rounded-full bg-[#FFBD2E]" />
<div className="w-3 h-3 rounded-full bg-[#27C93F]" />
</div>
{title && (
<h2 className="text-lg font-semibold text-text-main">
{title}
</h2>
)}
</div>
{showCloseButton && (
<button
onClick={onClose}
className="p-1.5 rounded-lg text-text-muted hover:bg-black/5 transition-colors"
className="p-1.5 rounded-lg text-text-muted hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
>
<span className="material-symbols-outlined text-[20px]">close</span>
</button>
@ -91,7 +98,7 @@ export default function Modal({
{/* Footer */}
{footer && (
<div className="flex items-center justify-end gap-3 p-6 border-t border-border">
<div className="flex items-center justify-end gap-3 p-6 border-t border-black/5 dark:border-white/5">
{footer}
</div>
)}