// ui.jsx — shared building blocks for nailz.jae // ───────────────────────────────────────────────────────────── // Icons (single stroke, 22x22) // ───────────────────────────────────────────────────────────── const Icon = { home: (p) => ( ), grid: (p) => ( ), calendar: (p) => ( ), sparkle: (p) => ( ), more: (p) => ( ), back: (p) => ( ), close: (p) => ( ), check: (p) => ( ), copy: (p) => ( ), arrow: (p) => ( ), instagram: (p) => ( ), facebook: (p) => ( ), snapchat: (p) => ( ), cog: (p) => ( ), plus: (p) => ( ), trash: (p) => ( ), phone: (p) => ( ), message: (p) => ( ), mail: (p) => ( ), }; // ───────────────────────────────────────────────────────────── // Wordmark — the brand logo // ───────────────────────────────────────────────────────────── function Wordmark({ size = 38, color, style = {} }) { return ( nailz.jae ); } // ───────────────────────────────────────────────────────────── // AppBar — top bar with optional back button & title // ───────────────────────────────────────────────────────────── function AppBar({ title, onBack, right }) { return (
{onBack ? ( ) :
} {title &&
{title}
}
{right}
); } // ───────────────────────────────────────────────────────────── // Bottom tab bar // ───────────────────────────────────────────────────────────── function TabBar({ active, onChange }) { const tabs = [ { id: 'home', label: 'Home', icon: Icon.home }, { id: 'gallery', label: 'Gallery', icon: Icon.grid }, { id: 'services', label: 'Services', icon: Icon.sparkle }, { id: 'contact', label: 'Contact', icon: Icon.more }, ]; return ( ); } // ───────────────────────────────────────────────────────────── // Sheet — bottom sheet modal // ───────────────────────────────────────────────────────────── function Sheet({ open, onClose, children }) { if (!open) return null; return (
{ if (e.target === e.currentTarget) onClose && onClose(); }}>
{children}
); } // ───────────────────────────────────────────────────────────── // CopyButton — copy to clipboard with feedback // ───────────────────────────────────────────────────────────── function CopyButton({ value, label = 'Copy' }) { const [copied, setCopied] = React.useState(false); return ( ); } // ───────────────────────────────────────────────────────────── // PriceTag // ───────────────────────────────────────────────────────────── function PriceTag({ amount, size = 22 }) { return ( ${amount} ); } // ───────────────────────────────────────────────────────────── // NailTile — placeholder visual for nail photo with subtle gradient // ───────────────────────────────────────────────────────────── function NailTile({ slotId, src, caption, tall = false, onClick }) { return (
); } // expose Object.assign(window, { Icon, Wordmark, AppBar, TabBar, Sheet, CopyButton, PriceTag, NailTile, });