// Shared atoms, tokens, and small bits that look exactly like Portal.
// Tailwind isn't loaded — use inline width/height (rem-based) instead of utility classes.
const remFromClass = (cls) => {
const m = /(?:w|h)-(\d+(?:\.\d+)?)/.exec(cls || "");
return m ? `${parseFloat(m[1]) * 0.25}rem` : "0.75rem";
};
const Check = ({ className = "w-3 h-3", stroke = 3 }) => {
const s = remFromClass(className);
return (
);
};
const Plus = ({ className = "w-2.5 h-2.5" }) => {
const s = remFromClass(className);
return (
);
};
const Minus = ({ className = "w-2.5 h-2.5" }) => {
const s = remFromClass(className);
return (
);
};
const ChevronR = ({ className = "w-3 h-3" }) => {
const s = remFromClass(className);
return (
);
};
const ChevronD = ({ className = "w-3 h-3" }) => {
const s = remFromClass(className);
return (
);
};
const SearchIcon = ({ className = "w-3.5 h-3.5" }) => {
const s = remFromClass(className);
return (
);
};
const formatPrice = (n) =>
n == null ? "POA"
: "$" + n.toLocaleString("en-AU", { maximumFractionDigits: 0 });
const Label = ({ children, dim = false, className = "" }) => (
{children}
);
// Small "kicker" used at the top of each marketing section.
const Kicker = ({ n, children }) => (
{String(n).padStart(2, "0")}
{children}
);
// Pill / tag mirrors Portal's Tag component
const Tag = ({ children, dark = false }) => (
{children}
);
// Status pill for bookings
const STATUS_STYLES = {
Pending: { bg: "#fefce8", fg: "#854d0e", dot: "#ca8a04" },
Confirmed: { bg: "#eff6ff", fg: "#1e40af", dot: "#2563eb" },
"In Production": { bg: "#f5f3ff", fg: "#5b21b6", dot: "#7c3aed" },
Delivered: { bg: "#ecfdf5", fg: "#065f46", dot: "#059669" },
Cancelled: { bg: "#f9fafb", fg: "#6b7280", dot: "#9ca3af" },
};
const StatusPill = ({ status }) => {
const s = STATUS_STYLES[status] || STATUS_STYLES.Pending;
return (
{status}
);
};
// "Mac-style" chrome row for showing a portal screen
const BrowserChrome = ({ children, tall = false, noShadow = false }) => (
);
// Portal sidebar (icon-only rail) — matches header/client-layout shape
const PortalSidebar = ({ active = "bookings" }) => {
const Icon = ({ name, activeThis }) => {
const paths = {
book: <>,
list: <>,
chat: <>,
help: <>,
user: <>,
};
return (
);
};
return (
);
};
// Underline input (matches editorial input style)
const UnderlineInput = ({ label, value, placeholder, right = null, large = false }) => (
{label}
{value || placeholder}
{right}
);
// Progress stepper matching Portal's
const BookingProgress = ({ current = 0, steps = ["Service", "Details", "Review"] }) => (
{steps.map((s, i) => (
{i < current ? : i + 1}
{s}
{i < steps.length - 1 && (
)}
))}
{name}
{sub}
{meta}
{price}
);
Object.assign(window, {
Check, Plus, Minus, ChevronR, ChevronD, SearchIcon,
formatPrice, Label, Kicker, Tag, StatusPill,
BrowserChrome, PortalSidebar, UnderlineInput, BookingProgress, TableRow,
});