Range control

"use client";
import * as React from "react";
import { RangeControl, type RangePeriod } from "@/components/ui/notchset/range-control";

const FIG: Record<RangePeriod, [string, string, string]> = {
  day: ["6 h 57", "last night", "Through the night"],
  week: ["6 h 51", "this week", "+9 min against last week"],
  month: ["6 h 48", "this month", "+4 min against last month"],
  "6m": ["6 h 44", "the last 6 months", "−2 min against the 6 months before"],
  year: ["6 h 46", "this year", "Same as the year before"],
  ytd: ["6 h 47", "the year to date", "+1 min against last year to date"],
};

export default function RangeControlDemo() {
  const [p, setP] = React.useState<RangePeriod>("week");
  const [figure, words, delta] = FIG[p];
  return (
    <div className="max-w-[720px]">
      <RangeControl value={p} onValueChange={setP} figure={figure} words={words} delta={delta} tone={delta.startsWith("+") ? "ok" : "neutral"} />
    </div>
  );
}