a tool for shared writing and social publishing
leaflet.pub
1import { ChevronProps, DayPicker as ReactDayPicker } from "react-day-picker";
2import { ArrowRightTiny } from "components/Icons/ArrowRightTiny";
3
4const CustomChevron = (props: ChevronProps) => {
5 return (
6 <div {...props} className="w-full pointer-events-none">
7 <ArrowRightTiny />
8 </div>
9 );
10};
11
12interface DayPickerProps {
13 selected: Date | undefined;
14 onSelect: (date: Date | undefined) => void;
15 disabled?: (date: Date) => boolean;
16}
17
18export const DatePicker = ({
19 selected,
20 onSelect,
21 disabled,
22}: DayPickerProps) => {
23 return (
24 <ReactDayPicker
25 components={{
26 Chevron: (props: ChevronProps) => <CustomChevron {...props} />,
27 }}
28 classNames={{
29 months: "relative",
30 month_caption:
31 "font-bold text-center w-full bg-border-light mb-2 py-1 rounded-md",
32 button_next:
33 "absolute right-0 top-1 p-1 text-secondary hover:text-accent-contrast flex align-center",
34 button_previous:
35 "absolute left-0 top-1 p-1 text-secondary hover:text-accent-contrast rotate-180 flex align-center",
36 chevron: "text-inherit",
37 month_grid: "w-full table-fixed",
38 weekdays: "text-secondary text-sm",
39 selected: "bg-accent-1! text-accent-2 rounded-md font-bold",
40 day: "h-[34px] text-center rounded-md sm:hover:bg-border-light",
41 outside: "text-tertiary",
42 today: "font-bold",
43 disabled: "text-border cursor-not-allowed hover:bg-transparent!",
44 }}
45 mode="single"
46 selected={selected}
47 defaultMonth={selected}
48 onSelect={onSelect}
49 disabled={disabled}
50 />
51 );
52};
53
54export const TimePicker = (props: {
55 value: string;
56 onChange: (time: string) => void;
57 className?: string;
58}) => {
59 let handleTimeChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
60 props.onChange(e.target.value);
61 };
62
63 return (
64 <input
65 type="time"
66 value={props.value}
67 onChange={handleTimeChange}
68 className={`dateBlockTimeInput input-with-border bg-bg-page text-primary w-full ${props.className}`}
69 />
70 );
71};