Night dot row

"use client";
import * as React from "react";
import { NightDotRow } from "@/components/ui/notchset/night-dot-row";

const NIGHTS = [
  { id: "19", day: "Mon 19", value: "7:04" },
  { id: "20", day: "Tue 20", value: "6:22", below: true },
  { id: "21", day: "Wed 21", value: "7:18" },
  { id: "22", day: "Thu 22", value: "6:41" },
  { id: "23", day: "Fri 23", value: "6:12", below: true },
  { id: "24", day: "Sat 24", value: "7:25" },
  { id: "25", day: "Sun 25", value: "6:57" },
];

export default function NightDotRowDemo() {
  const [night, setNight] = React.useState("25");
  return (
    <div className="max-w-[720px]">
      <NightDotRow nights={NIGHTS} value={night} onValueChange={setNight} />
    </div>
  );
}