Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
2.1 kB · 71 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172import { ChevronProps, DayPicker as ReactDayPicker } 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> );};
interface DayPickerProps { selected: Date | undefined; onSelect: (date: Date | undefined) => void; disabled?: (date: Date) => boolean;}
export const DatePicker = ({ selected, onSelect, disabled,}: DayPickerProps) => { return ( <ReactDayPicker components={{ Chevron: (props: ChevronProps) => <CustomChevron {...props} />, }} 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: "w-full table-fixed", weekdays: "text-secondary text-sm", selected: "bg-accent-1! text-accent-2 rounded-md font-bold", day: "h-[34px] text-center rounded-md sm:hover:bg-border-light", outside: "text-tertiary", today: "font-bold", disabled: "text-border cursor-not-allowed hover:bg-transparent!", }} mode="single" selected={selected} defaultMonth={selected} onSelect={onSelect} disabled={disabled} /> );};
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}`} /> );};