/* global React */ const { useState, useEffect, useRef } = React; // ---------- Icon set ---------- const Ic = { search: (p) => , bell: (p) => , grid: (p) => , list: (p) => , box: (p) => , calendar: (p) => , activity: (p) => , bookmark: (p) => , webhook: (p) => , settings: (p) => , help: (p) => , shield: (p) => , plus: (p) => , filter: (p) => , zap: (p) => , link: (p) => , arrowRight: (p) => , chevDown: (p) => , chevLeft: (p) => , chevRight: (p) => , copy: (p) => , external: (p) => , trash: (p) => , edit: (p) => , user: (p) => , discord: (p) => , download: (p) => , clock: (p) => , tag: (p) => , globe: (p) => , cmd: (p) => , trend: (p) => , database: (p) => , check: (p) => , x: (p) => , upload: (p) => , history: (p) => , }; // ---------- Logo ---------- function Logo({ name = "Drops", sub = "Drop Database", accentClass = "" }) { return (
Flux {name}
{sub}
); } // ---------- Big landing orb ---------- function BigOrb({ size = 110 }) { return (
); } // ---------- Retailer chip palette ---------- const RETAILERS = { "Target AU": { swatch: "#cc0000", short: "TGT" }, "Big W": { swatch: "#0d62ad", short: "BIG" }, "Kmart AU": { swatch: "#e3171f", short: "KM" }, "JB Hi-Fi": { swatch: "#fcdc02", short: "JB" }, "EB Games": { swatch: "#e30613", short: "EB" }, "Hype DC": { swatch: "#000000", short: "HYP" }, "Foot Locker": { swatch: "#ff5400", short: "FL" }, "Culture Kings":{ swatch: "#101010", short: "CK" }, "Shopify": { swatch: "#95bf47", short: "SHP" }, "Above The Clouds": { swatch: "#7a3aff", short: "ATC" }, "Finesse": { swatch: "#d4af37", short: "FIN" }, "Sneaker LAH": { swatch: "#22c1e4", short: "SLH" }, }; function Retailer({ name }) { const r = RETAILERS[name] || { swatch: "#444", short: "—" }; return ( {name} ); } // ---------- Sparkline (svg) ---------- function Spark({ data, color = "#6366f1", w = 120, h = 28 }) { const max = Math.max(...data); const min = Math.min(...data); const range = max - min || 1; const pts = data.map((v, i) => { const x = (i / (data.length - 1)) * w; const y = h - ((v - min) / range) * (h - 4) - 2; return `${x.toFixed(1)},${y.toFixed(1)}`; }).join(" "); return ( ); } // ---------- Sidebar variants ---------- function Sidebar({ active = "Search", role = "Admin", username = "jcds.", brand = "Drops", brandSub = "DROP DATABASE", items }) { const defaultItems = [ { name: "Search", icon: "search" }, { name: "Calendar", icon: "calendar" }, { name: "Activity", icon: "activity" }, { name: "Quick Bank", icon: "bookmark", count: "12" }, { name: "Catalog", icon: "database" }, { name: "_group_", label: "Account" }, { name: "Settings", icon: "settings" }, { name: "Help & FAQ", icon: "help" }, { name: "_group_", label: "Admin" }, { name: "Admin", icon: "shield" }, { name: "Sources", icon: "webhook" }, ]; const list = items || defaultItems; return (
{list.map((it, i) => { if (it.name === "_group_") return
{it.label}
; const Icon = Ic[it.icon]; return (
{it.name} {it.count && {it.count}}
); })}
{username}
{role}
); } // ---------- exports ---------- Object.assign(window, { Ic, Logo, BigOrb, Retailer, Spark, Sidebar, RETAILERS });