Time and date-time pickers

"use client";

import { DateTimePicker, Label, TimePicker } from "@waveinno/ui";
import * as React from "react";

export default function TimeDemo() {
  const [t24, setT24] = React.useState("14:30");
  const [t12, setT12] = React.useState("");
  const [dt, setDt] = React.useState("");
  return (
    <div className="grid max-w-2xl gap-4 sm:grid-cols-3">
      <div className="space-y-1.5">
        <Label>Opens at (24h)</Label>
        <TimePicker value={t24} onChange={setT24} />
      </div>
      <div className="space-y-1.5">
        <Label>Closes at (12h, 15 min)</Label>
        <TimePicker value={t12} onChange={setT12} hourCycle={12} step={15} />
      </div>
      <div className="space-y-1.5">
        <Label>Publish at</Label>
        <DateTimePicker value={dt} onChange={setDt} />
      </div>
    </div>
  );
}