Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
2.1 kB · 68 lines
TSX
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869import { ChevronProps, DayPicker as ReactDayPicker, DayPickerProps,} from "react-day-picker";import { ArrowRightTiny } from "components/Icons/ArrowRightTiny";
const CustomChevron = (props: ChevronProps) => { return ( <div {...props} className="w-full pointer-events-none"> <ArrowRightTiny /> </div> );};
export const DatePicker = (props: DayPickerProps) => { const dayPickerProps = { ...props, required: props.required ?? false, mode: props.mode ?? "single", components: { Chevron: (chevronProps: ChevronProps) => ( <CustomChevron {...chevronProps} /> ), ...props.components, }, classNames: { months: "relative", month_caption: "font-bold text-center w-full bg-border-light mb-2 py-1 rounded-md", button_next: "absolute right-0 top-1 p-1 text-secondary hover:text-accent-contrast flex align-center", button_previous: "absolute left-0 top-1 p-1 text-secondary hover:text-accent-contrast rotate-180 flex align-center", chevron: "text-inherit", month_grid: "border-separate [border-spacing:2px]", weekdays: "text-secondary text-sm", selected: "bg-accent-1 text-accent-2 rounded-md font-bold", range_middle: "bg-[var(--accent-light)]!", day: "h-8! w-8! text-center rounded-md sm:hover:bg-border-light", outside: "text-tertiary", today: "font-bold", disabled: "text-border cursor-not-allowed hover:bg-transparent!", ...props.classNames, }, } as DayPickerProps;
return <ReactDayPicker {...dayPickerProps} />;};
export const TimePicker = (props: { value: string; onChange: (time: string) => void; className?: string;}) => { let handleTimeChange: React.ChangeEventHandler<HTMLInputElement> = (e) => { props.onChange(e.target.value); };
return ( <input type="time" value={props.value} onChange={handleTimeChange} className={`dateBlockTimeInput input-with-border bg-bg-page text-primary w-full ${props.className}`} /> );};