// BookUno mobile redesign — shared components
// Phone frame, logo system, bottom nav, icons, gradient placeholders.
const { useEffect, useRef, useState } = React;
/* ─── Icon set ────────────────────────────────────────────── */
const Ic = {
search: (p) => ,
home: (p) => ,
cal: (p) => ,
heart: (p) => ,
heartF: (p) => ,
user: (p) => ,
star: (p) => ,
chev: (p) => ,
chevL: (p) => ,
chevDn: (p) => ,
close: (p) => ,
plus: (p) => ,
filter: (p) => ,
pin: (p) => ,
bell: (p) => ,
msg: (p) => ,
check: (p) => ,
clock: (p) => ,
share: (p) => ,
more: (p) => ,
apple: (p) => ,
google: (p) => ,
mail: (p) => ,
phone: (p) => ,
arrow: (p) => ,
spark: (p) => ,
shield: (p) => ,
zap: (p) => ,
card: (p) => ,
globe: (p) => ,
gift: (p) => ,
tag: (p) => ,
truck: (p) => ,
// Category iconography (simple, monoline)
catBarber: (p) => ,
catBeauty: (p) => ,
catWell: (p) => ,
catClean: (p) => ,
catTrade: (p) => ,
catGarden: (p) => ,
catFit: (p) => ,
catCamp: (p) => ,
catHire: (p) => ,
catEvent: (p) => ,
catPet: (p) => ,
catAuto: (p) => ,
catEdu: (p) => ,
catPro: (p) => ,
catCreative: (p) => ,
};
/* ─── Logo system ─────────────────────────────────────────── */
// BookUno logo — multiple variants. The "default" variant is the
// star-square wordmark from the existing brand.
function BULogo({ variant = 'default', size = 28, dark = false, label = true }) {
const fg = dark ? '#fff' : 'var(--ink)';
const accent = 'var(--pri)';
const mark = (() => {
switch (variant) {
case 'star':
return (
B
);
case 'orb':
return (
);
case 'cal':
return (
);
case 'ring':
return (
);
case 'mono':
return (
B
);
case 'chip':
return (
B
);
case 'default':
default:
return (
B
);
}
})();
return (
{mark}
{label && (
Bookuno
)}
);
}
/* ─── Phone frame (compact, for canvas) ───────────────────── */
function Phone({ width = 320, height = 680, dark = false, statusDark, children, label, noBezel = false, time = '9:41' }) {
const sd = statusDark ?? dark;
if (noBezel) {
return (
);
}
return (
{/* dynamic island */}
{children}
{/* home indicator */}
);
}
function PhoneStatus({ dark, time = '9:41' }) {
const c = dark ? '#fff' : '#15111F';
return (
);
}
/* ─── Bottom nav ──────────────────────────────────────────── */
function BottomNav({ active = 'home', onChange = () => {}, variant = 'fab' }) {
const items = [
{ id: 'home', icon: Ic.home, label: 'Home' },
{ id: 'explore', icon: Ic.search,label: 'Explore' },
{ id: 'book', icon: Ic.plus, label: 'Book', fab: variant === 'fab' },
{ id: 'saved', icon: Ic.heart, label: 'Saved' },
{ id: 'me', icon: Ic.user, label: 'Account' },
];
return (
{items.map(it => {
const Icon = it.icon;
const isAct = active === it.id;
if (it.fab) return (
);
return (
);
})}
{photo && (
)}
{Icon && (
)}
{badge && (
{badge}
)}
{label && (
{label}
)}
{children}