tyler
7203cf1ead
- Add CSS design tokens for consistency (--admin-danger-hover, --admin-accent-dot, shadow-md warm tone) - Replace unicode icons with inline SVG (⋮, ✕, ▼, ▶) - Consolidate duplicate PageHeader/AdminPageHeader components - Standardize border-radius (rounded-xl → rounded-lg for ViewModeTabs) - Remove hardcoded brand UUID in products page - Replace hardcoded bg-red-600 with CSS variables in delete buttons - Add AdminButton, AdminFilterTabs, AdminSearchInput, PageHeader design system components - Fix GlassModal and AdminModal close button styling - Remove duplicate 'New Lot' button on Route Trace dashboard
91 lines
3.0 KiB
TypeScript
91 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect } from "react";
|
|
|
|
type Props = {
|
|
title: string;
|
|
titleIcon?: React.ReactNode;
|
|
subtitle?: string;
|
|
onClose: () => void;
|
|
children: React.ReactNode;
|
|
maxWidth?: string;
|
|
};
|
|
|
|
export default function GlassModal({ title, titleIcon, subtitle, onClose, children, maxWidth = "max-w-lg" }: Props) {
|
|
// Lock body scroll
|
|
useEffect(() => {
|
|
document.body.style.overflow = "hidden";
|
|
return () => { document.body.style.overflow = ""; };
|
|
}, []);
|
|
|
|
// Escape key
|
|
useEffect(() => {
|
|
const handleEscape = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape") onClose();
|
|
};
|
|
window.addEventListener("keydown", handleEscape);
|
|
return () => window.removeEventListener("keydown", handleEscape);
|
|
}, [onClose]);
|
|
|
|
const handleBackdropClick = (e: React.MouseEvent) => {
|
|
if (e.target === e.currentTarget) onClose();
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 z-50 flex items-center justify-center p-4"
|
|
onClick={handleBackdropClick}
|
|
style={{ backgroundColor: "rgba(60, 56, 37, 0.5)" }}
|
|
>
|
|
{/* Modal card - solid white with shadow for high contrast */}
|
|
<div
|
|
className={`relative w-full ${maxWidth} rounded-2xl bg-white shadow-[0_25px_50px_-12px_rgba(0,0,0,0.15)]`}
|
|
>
|
|
{/* Subtle top border accent */}
|
|
<div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-[var(--admin-accent)] to-[var(--admin-accent-hover)] rounded-t-2xl" />
|
|
|
|
{/* Header */}
|
|
<div
|
|
className="flex items-center justify-between px-8 py-6"
|
|
style={{ borderBottom: "1px solid var(--admin-border-light)" }}
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
{titleIcon && (
|
|
<div
|
|
className="flex h-10 w-10 items-center justify-center rounded-xl"
|
|
style={{ backgroundColor: "var(--admin-accent-light)" }}
|
|
>
|
|
{titleIcon}
|
|
</div>
|
|
)}
|
|
<div>
|
|
<h2
|
|
className="text-xl font-semibold text-[var(--admin-text-primary)]"
|
|
style={{ letterSpacing: "-0.02em" }}
|
|
>
|
|
{title}
|
|
</h2>
|
|
{subtitle && (
|
|
<p className="mt-0.5 text-sm text-[var(--admin-text-muted)]">{subtitle}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
className="flex h-9 w-9 items-center justify-center rounded-full transition-all duration-150"
|
|
style={{ backgroundColor: "var(--admin-bg-subtle)", color: "var(--admin-text-muted)" }}
|
|
>
|
|
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="relative px-8 py-8">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |