Online storeOnline store

1import { useMemo, useState } from "react";2import { dashboard as d } from "./dashboard";3import { Chart } from "./Chart";4import { Icon } from "./Icon";5import type { Tone } from "./types";6 7const TONE: Record<Tone, string> = {8  good: "bg-good/10 text-good ring-good/25",9  warn: "bg-warn/10 text-warn ring-warn/25",10  bad: "bg-bad/10 text-bad ring-bad/25",11  neutral: "bg-surface text-muted ring-line",12  accent: "bg-accent/10 text-accent ring-accent/25",13};14 15function Pill({ value }: { value: string }) {16  const tone = d.table.tones?.[value] ?? "neutral";17  return <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ring-1 ring-inset ${TONE[tone]}`}>{value}</span>;18}19 20function Sidebar({ onNavigate }: { onNavigate?: () => void }) {21  return (22    <nav aria-label="Dashboard" className="flex h-full flex-col gap-1 p-4">23      <a href="#" className="mb-6 flex items-center gap-2.5 px-2 font-heading text-lg font-semibold">24        <span className="grid h-8 w-8 place-items-center rounded-card bg-accent text-sm font-bold text-accent-fg">{d.brand[0]}</span>25        {d.brand}26      </a>27      {d.nav.map((n, i) => (28        <a29          key={n.label}30          href={n.href}31          onClick={onNavigate}32          className={`flex items-center gap-3 rounded-card px-3 py-2 text-[15px] transition ${i === 0 ? "bg-bg font-medium text-fg shadow-sm ring-1 ring-line" : "text-muted hover:bg-bg hover:text-fg"}`}33        >34          <Icon name={n.icon} className="h-[18px] w-[18px]" />35          {n.label}36        </a>37      ))}38      <div className="mt-auto flex items-center gap-3 rounded-card px-2 py-2">39        <span className="grid h-9 w-9 place-items-center rounded-full bg-fg text-sm font-semibold text-bg">40          {d.user.name41            .split(" ")42            .map((w) => w[0])43            .join("")}44        </span>45        <span className="min-w-0 text-sm">46          <span className="block truncate font-medium">{d.user.name}</span>47          <span className="block truncate text-muted">{d.user.role}</span>48        </span>49      </div>50    </nav>51  );52}53 54export default function App() {55  const [range, setRange] = useState(d.ranges[d.ranges.length - 1]);56  const [query, setQuery] = useState("");57  const [sort, setSort] = useState<{ col: number; dir: 1 | -1 } | null>(null);58  const [menu, setMenu] = useState(false);59 60  const labels = d.chart.labels.slice(-range.points);61  const series = d.chart.series.map((s) => ({ ...s, values: s.values.slice(-range.points) }));62 63  const rows = useMemo(() => {64    const q = query.trim().toLowerCase();65    const list = q ? d.table.rows.filter((r) => r.some((c) => c.toLowerCase().includes(q))) : d.table.rows.slice();66    if (sort) {67      const num = (s: string) => Number(s.replace(/[^0-9.-]/g, ""));68      list.sort((a, b) => {69        const [x, y] = [a[sort.col], b[sort.col]];70        const nx = num(x);71        const ny = num(y);72        const cmp = !Number.isNaN(nx) && !Number.isNaN(ny) && /\d/.test(x) && /\d/.test(y) ? nx - ny : x.localeCompare(y);73        return cmp * sort.dir;74      });75    }76    return list;77  }, [query, sort]);78 79  return (80    <div className="min-h-screen bg-bg font-body text-fg antialiased lg:grid lg:grid-cols-[248px_1fr]">81      <aside className="sticky top-0 hidden h-screen border-r border-line bg-surface lg:block">82        <Sidebar />83      </aside>84      {menu ? (85        <div className="fixed inset-0 z-50 bg-black/30 lg:hidden" onClick={() => setMenu(false)}>86          <aside className="h-full w-72 bg-surface" onClick={(e) => e.stopPropagation()}>87            <Sidebar onNavigate={() => setMenu(false)} />88          </aside>89        </div>90      ) : null}91 92      <div className="min-w-0">93        <header className="sticky top-0 z-30 flex h-16 items-center gap-3 border-b border-line bg-bg/90 px-5 backdrop-blur sm:px-8">94          <button type="button" className="grid h-10 w-10 place-items-center rounded-card border border-line lg:hidden" aria-label="Open navigation" onClick={() => setMenu(true)}>95            <span className="block h-0.5 w-4 bg-fg shadow-[0_5px_0_currentColor,0_-5px_0_currentColor]" />96          </button>97          <label className="relative flex-1 sm:max-w-sm">98            <span className="sr-only">Search {d.table.title.toLowerCase()}</span>99            <input100              value={query}101              onChange={(e) => setQuery(e.target.value)}102              placeholder={`Search ${d.table.title.toLowerCase()}`}103              className="h-10 w-full rounded-card border border-line bg-surface px-3.5 text-[15px] outline-none placeholder:text-muted focus:border-accent"104            />105          </label>106          <div className="ml-auto flex items-center gap-1 rounded-card border border-line p-1" role="group" aria-label="Date range">107            {d.ranges.map((r) => (108              <button109                key={r.label}110                type="button"111                aria-pressed={range.label === r.label}112                onClick={() => setRange(r)}113                className={`h-8 rounded-[calc(var(--radius-card)-2px)] px-3 text-sm font-medium ${range.label === r.label ? "bg-fg text-bg" : "text-muted hover:text-fg"}`}114              >115                {r.label}116              </button>117            ))}118          </div>119        </header>120 121        <main className="mx-auto max-w-[1280px] space-y-6 px-5 py-8 sm:px-8">122          <div id="overview" className="scroll-mt-24">123            <h1 className="font-heading text-2xl font-semibold tracking-tight sm:text-3xl">{d.title}</h1>124            <p className="mt-1 text-muted">{d.subtitle}</p>125          </div>126 127          <section aria-label="Key figures" className="grid grid-cols-2 gap-4 xl:grid-cols-4">128            {d.kpis.map((k) => {129              const good = k.up === (k.upIsGood ?? true);130              return (131                <div key={k.label} className="rounded-card border border-line bg-bg p-5">132                  <p className="text-sm text-muted">{k.label}</p>133                  <p className="mt-2 font-heading text-2xl font-semibold tabular-nums tracking-tight sm:text-3xl">{k.value}</p>134                  <p className={`mt-2 text-sm font-medium tabular-nums ${good ? "text-good" : "text-bad"}`}>135                    {k.up ? "▲" : "▼"} {k.delta} <span className="font-normal text-muted">vs previous</span>136                  </p>137                </div>138              );139            })}140          </section>141 142          <div className="grid gap-6 xl:grid-cols-[1.75fr_1fr]">143            <section id="trends" aria-labelledby="chart-title" className="scroll-mt-24 rounded-card border border-line bg-bg p-5 sm:p-6">144              <div className="mb-4 flex flex-wrap items-center justify-between gap-3">145                <h2 id="chart-title" className="font-semibold">146                  {d.chart.title}147                </h2>148                <div className="flex gap-4 text-sm text-muted">149                  {d.chart.series.map((s, i) => (150                    <span key={s.name} className="flex items-center gap-2">151                      <span className="h-2.5 w-2.5 rounded-full" style={{ background: i === 0 ? "var(--color-accent)" : "var(--color-muted)" }} />152                      {s.name}153                    </span>154                  ))}155                </div>156              </div>157              <Chart type={d.chart.type} labels={labels} series={series} unit={d.chart.unit} />158            </section>159 160            <section id="breakdown" aria-labelledby="side-title" className="scroll-mt-24 rounded-card border border-line bg-bg p-5 sm:p-6">161              <h2 id="side-title" className="font-semibold">162                {d.side.title}163              </h2>164              <ul className="mt-5 space-y-4">165                {d.side.items.map((i) => (166                  <li key={i.label}>167                    <div className="flex justify-between gap-3 text-[15px]">168                      <span>{i.label}</span>169                      <span className="font-medium tabular-nums">{i.value}</span>170                    </div>171                    <div className="mt-2 h-2 rounded-full bg-surface" role="presentation">172                      <div className="h-2 rounded-full bg-accent" style={{ width: `${Math.max(2, Math.min(100, i.pct))}%` }} />173                    </div>174                  </li>175                ))}176              </ul>177            </section>178          </div>179 180          <div className={d.feed ? "grid gap-6 xl:grid-cols-[1.75fr_1fr]" : ""}>181            <section id="table" aria-labelledby="table-title" className="scroll-mt-24 overflow-hidden rounded-card border border-line bg-bg">182              <div className="flex items-center justify-between gap-3 border-b border-line px-5 py-4 sm:px-6">183                <h2 id="table-title" className="font-semibold">184                  {d.table.title}185                </h2>186                <span className="text-sm text-muted tabular-nums">187                  {rows.length} of {d.table.rows.length}188                </span>189              </div>190              <div className="overflow-x-auto">191                <table className="w-full min-w-[640px] text-left text-[15px]">192                  <thead className="bg-surface text-sm text-muted">193                    <tr>194                      {d.table.columns.map((c, i) => (195                        <th key={c} scope="col" className="whitespace-nowrap px-5 py-3 font-medium sm:px-6" aria-sort={sort?.col === i ? (sort.dir === 1 ? "ascending" : "descending") : "none"}>196                          <button type="button" className="inline-flex items-center gap-1 hover:text-fg" onClick={() => setSort((s) => (s?.col === i ? { col: i, dir: s.dir === 1 ? -1 : 1 } : { col: i, dir: 1 }))}>197                            {c}198                            <span aria-hidden="true" className="text-xs">199                              {sort?.col === i ? (sort.dir === 1 ? "↑" : "↓") : "↕"}200                            </span>201                          </button>202                        </th>203                      ))}204                    </tr>205                  </thead>206                  <tbody className="divide-y divide-line">207                    {rows.map((r) => (208                      <tr key={r.join("|")} className="hover:bg-surface/60">209                        {r.map((c, i) => (210                          <td key={i} className={`whitespace-nowrap px-5 py-3.5 sm:px-6 ${i === 0 ? "font-medium" : "tabular-nums"}`}>211                            {i === d.table.statusColumn ? <Pill value={c} /> : c}212                          </td>213                        ))}214                      </tr>215                    ))}216                    {rows.length === 0 ? (217                      <tr>218                        <td colSpan={d.table.columns.length} className="px-6 py-12 text-center text-muted">219                          Nothing matches &ldquo;{query}&rdquo;.220                        </td>221                      </tr>222                    ) : null}223                  </tbody>224                </table>225              </div>226            </section>227 228            {d.feed ? (229              <section id="activity" aria-labelledby="feed-title" className="scroll-mt-24 rounded-card border border-line bg-bg p-5 sm:p-6">230                <h2 id="feed-title" className="font-semibold">231                  {d.feed.title}232                </h2>233                <ol className="mt-5 space-y-5 border-l border-line pl-5">234                  {d.feed.items.map((f) => (235                    <li key={f.text} className="relative">236                      <span className="absolute -left-[25px] top-1.5 h-2 w-2 rounded-full bg-accent ring-4 ring-bg" />237                      <p className="text-[15px]">{f.text}</p>238                      <p className="mt-0.5 text-sm text-muted">{f.time}</p>239                    </li>240                  ))}241                </ol>242              </section>243            ) : null}244          </div>245          <p className="pb-4 text-center text-sm text-muted">Sample data in src/dashboard.ts. Connect your own API or database to make it live.</p>246        </main>247      </div>248    </div>249  );250}