Time picker

import {
  TimePicker,
  TimePickerClear,
  TimePickerSegment,
  TimePickerSeparator,
} from "@gpuixui/components/time-picker";
import { Button } from "@gpuixui/primitives";
import { useState } from "react";

export const DeploymentWindow = () => {
  const [opens, setOpens] = useState<string | null>("09:30");
  const [saved, setSaved] = useState<string | null>(null);

  return (
    <>
      <TimePicker
        clearable
        label="Opens at"
        minuteStep={15}
        onValueChange={(next) => {
          setOpens(next);
          setSaved(null);
        }}
        value={opens}
      >
        <TimePickerSegment segment="hours" />
        <TimePickerSeparator />
        <TimePickerSegment segment="minutes" />
        <TimePickerClear />
      </TimePicker>
      {/* `opens` is `HH:mm` or `null`. */}
      <Button disabled={opens === null} onClick={() => setSaved(opens)}>
        {saved === null ? "Save window" : `Saved ${saved}`}
      </Button>
    </>
  );
};

TimePicker
├── TimePickerSegment
├── TimePickerSeparator
└── TimePickerClear