valknarandClaude Sonnet 5
f7503d03d0
Adds a pink/purple/blue SVG brand mark (favicon + header) and reworks the visual language around the app's actual interaction - fader-driven device control - via LED-style indicators, mono instrument readouts, hairline-framed cards, console-tab nav, and an oscilloscope-style session timeline. Leaves components/ui/* untouched, restyling only via design tokens and the app's own composed components. Also fixes a proxy.ts matcher gap that was gating /icon.svg behind auth. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01W8WkFF5ppURBAB918593Eb
29 lines
1.0 KiB
TypeScript
29 lines
1.0 KiB
TypeScript
"use client";
|
|
|
|
import { Slider } from "@/components/ui/slider";
|
|
import type { ActuatorInfo } from "@/lib/buttplug/types";
|
|
|
|
interface ActuatorSliderProps {
|
|
actuator: ActuatorInfo;
|
|
value: number;
|
|
transmitting: boolean;
|
|
onChange: (value: number) => void;
|
|
}
|
|
|
|
export function ActuatorSlider({ actuator, value, transmitting, onChange }: ActuatorSliderProps) {
|
|
return (
|
|
<div className="flex flex-col gap-2 rounded-md border border-border/70 bg-background/40 p-3">
|
|
<div className="flex items-center justify-between text-xs">
|
|
<span className="flex items-center gap-2 font-medium text-foreground">
|
|
<span className="bp-led" data-on={transmitting} aria-hidden />
|
|
{actuator.descriptor}
|
|
</span>
|
|
<span className="bp-readout text-sm text-muted-foreground data-[on=true]:text-primary" data-on={transmitting}>
|
|
{Math.round(value * 100)}%
|
|
</span>
|
|
</div>
|
|
<Slider value={[value * 100]} min={0} max={100} step={1} onValueChange={([v]) => onChange(v / 100)} />
|
|
</div>
|
|
);
|
|
}
|