vasyansk
36964c9f21
Top bar (breadcrumb + actions + account), rounded panel cards with active accent + rich headers, sidebar count pills/collapsible groups/daemon footer, preset chips + scrollback pill, Event Center tabs + external-notify footer, JetBrains Mono + Inter via @fontsource, shared theme tokens. Backend-absent pieces are mocked (search, zoom, uptime, channels) pending SP1–SP5. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
36 lines
1.3 KiB
TypeScript
36 lines
1.3 KiB
TypeScript
export const PRESETS: { id: string; label: string; slots: number }[] = [
|
||
{ id: "1", label: "1", slots: 1 },
|
||
{ id: "2lr", label: "2↔", slots: 2 },
|
||
{ id: "2tb", label: "2↕", slots: 2 },
|
||
{ id: "2+1", label: "2+1", slots: 3 },
|
||
{ id: "1+2", label: "1+2", slots: 3 },
|
||
{ id: "3", label: "3", slots: 3 },
|
||
{ id: "2x2", label: "2×2", slots: 4 },
|
||
{ id: "4", label: "4", slots: 4 },
|
||
{ id: "2x3", label: "2×3", slots: 6 },
|
||
{ id: "2x4", label: "2×4", slots: 8 },
|
||
];
|
||
|
||
import { COLORS, FONT } from "./theme";
|
||
|
||
export function PresetPicker({ selected, onSelect }: { selected: string; onSelect: (id: string) => void }) {
|
||
return (
|
||
<div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
|
||
{PRESETS.map((p) => {
|
||
const on = p.id === selected;
|
||
return (
|
||
<button key={p.id} onClick={() => onSelect(p.id)}
|
||
style={{
|
||
display: "flex", alignItems: "center", height: 24, padding: "0 8px", borderRadius: 6, fontFamily: FONT.mono, fontSize: 12,
|
||
background: on ? COLORS.bgElevated : "transparent",
|
||
border: `1px solid ${on ? COLORS.borderStrong : "transparent"}`,
|
||
color: on ? COLORS.textPrimary : COLORS.textSecondary,
|
||
}}>
|
||
{p.label}
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
);
|
||
}
|