wheel-picker-block-01

1import type { WheelPickerOption } from "@/registry/wheel-picker";
2import { WheelPicker, WheelPickerWrapper } from "@/registry/wheel-picker";
3 
4const createArray = (length: number, add = 0): WheelPickerOption<number>[] =>
5  Array.from({ length }, (_, i) => {
6    const value = i + add;
7    return {
8      label: value.toString().padStart(2, "0"),
9      value: value,
10    };
11  });
12 
13const hourOptions = createArray(12, 1);
14const minuteOptions = createArray(60);
15const meridiemOptions: WheelPickerOption[] = [
16  { label: "AM", value: "AM" },
17  { label: "PM", value: "PM" },
18];
19 
20export default function WheelPickerDemo() {
21  return (
22    <div className="w-56">
23      <WheelPickerWrapper>
24        <WheelPicker options={hourOptions} defaultValue={9} infinite />
25        <WheelPicker options={minuteOptions} defaultValue={41} infinite />
26        <WheelPicker options={meridiemOptions} defaultValue="AM" />
27      </WheelPickerWrapper>
28    </div>
29  );
30}