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