-
Notifications
You must be signed in to change notification settings - Fork 51
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: reschedule calendar modal on inbox
- Loading branch information
1 parent
af54092
commit de6281f
Showing
5 changed files
with
264 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
71 changes: 71 additions & 0 deletions
71
apps/frontend/src/components/Inbox/RescheduleCalendar/Calendar.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| "use client" | ||
|
|
||
| import React from "react" | ||
| import { DayPicker } from "react-day-picker" | ||
|
|
||
| import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons" | ||
|
|
||
| import { cn } from "@/lib/utils" | ||
|
|
||
| export type CalendarProps = React.ComponentProps<typeof DayPicker> | ||
|
|
||
| function Calendar({ | ||
| className, | ||
| classNames, | ||
| showOutsideDays = true, | ||
| ...props | ||
| }: CalendarProps) { | ||
| return ( | ||
| <DayPicker | ||
| showOutsideDays={showOutsideDays} | ||
| className={cn("p-3", className)} | ||
| classNames={{ | ||
| months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0", | ||
| month: "space-y-4 text-primary-foreground", | ||
| caption: "flex justify-center pt-1 relative items-center", | ||
| caption_label: "text-sm font-medium", | ||
| nav: "space-x-1 flex items-center", | ||
| nav_button: cn( | ||
| "h-7 w-7 text-center bg-transparent p-1 text-secondary-foreground hover-text" | ||
| ), | ||
| nav_button_previous: "absolute left-1", | ||
| nav_button_next: "absolute right-1", | ||
| table: "w-full border-collapse space-y-1", | ||
| head_row: "flex", | ||
| head_cell: | ||
| "text-secondary-foreground rounded-md w-8 font-normal text-[0.8rem]", | ||
| row: "flex w-full mt-2", | ||
| cell: cn( | ||
| "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md", | ||
| props.mode === "range" | ||
| ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md" | ||
| : "[&:has([aria-selected])]:rounded-md" | ||
| ), | ||
| day: cn( | ||
| "h-8 w-8 p-0 font-normal aria-selected:opacity-100 text-secondary-foreground hover-bg hover-text rounded-lg" | ||
| ), | ||
| day_range_start: "day-range-start", | ||
| day_range_end: "day-range-end", | ||
| day_selected: | ||
| "bg-background-hover border border-border !text-foreground", | ||
| day_today: "bg-background-hover text-foreground", | ||
| day_outside: | ||
| "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30", | ||
| day_disabled: "text-muted-foreground opacity-50", | ||
| day_range_middle: | ||
| "aria-selected:bg-accent aria-selected:text-accent-foreground", | ||
| day_hidden: "invisible", | ||
|
|
||
| ...classNames, | ||
| }} | ||
| components={{ | ||
| IconLeft: ({ ...props }) => <ChevronLeftIcon className="size-4" />, | ||
| IconRight: ({ ...props }) => <ChevronRightIcon className="size-4" />, | ||
| }} | ||
| {...props} | ||
| /> | ||
| ) | ||
| } | ||
| Calendar.displayName = "Calendar" | ||
|
|
||
| export { Calendar } |
23 changes: 23 additions & 0 deletions
23
apps/frontend/src/components/Inbox/RescheduleCalendar/DateSelectionButton.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| export default function DateSelectionButton({ | ||
| label, | ||
| icon: Icon, | ||
| formattedDate, | ||
| onClick, | ||
| }: { | ||
| label: string | ||
| icon: React.ElementType | ||
| formattedDate: string | ||
| onClick: () => void | ||
| }) { | ||
| return ( | ||
| <button | ||
| className="hover-bg hover-text flex w-full cursor-pointer items-center justify-between gap-4 rounded-lg p-2" | ||
| onClick={onClick} | ||
| > | ||
| <span className="flex items-center gap-2"> | ||
| <Icon size={24} /> {label} | ||
| </span> | ||
| <span className="text-sm">{formattedDate}</span> | ||
| </button> | ||
| ) | ||
| } |
110 changes: 110 additions & 0 deletions
110
apps/frontend/src/components/Inbox/RescheduleCalendar/RescheduleCalendar.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| "use client" | ||
|
|
||
| import * as React from "react" | ||
|
|
||
| import { CalendarDot, CalendarDots, CalendarX } from "@phosphor-icons/react" | ||
| import { addDays, format } from "date-fns" | ||
| import { Calendar as CalendarIcon, SquareChevronRightIcon } from "lucide-react" | ||
|
|
||
| import { Calendar } from "@/src/components/Inbox/RescheduleCalendar/Calendar" | ||
| import DateSelectionButton from "@/src/components/Inbox/RescheduleCalendar/DateSelectionButton" | ||
|
|
||
| interface RescheduleCalendarProps { | ||
| date: Date | null | ||
| setDate: (date: Date | null) => void | ||
| dateChanged: boolean | ||
| setDateChanged: (state: boolean) => void | ||
| icon?: React.ReactNode | ||
| [key: string]: any | ||
| } | ||
|
|
||
| export function RescheduleCalendar({ | ||
| date, | ||
| setDate, | ||
| dateChanged, | ||
| setDateChanged, | ||
| ...props | ||
| }: RescheduleCalendarProps) { | ||
| const [noDate, setNoDateFlag] = React.useState<boolean>(false) | ||
|
|
||
| const setToday = () => { | ||
| setNoDateFlag(false) | ||
| setDate(new Date()) | ||
| setDateChanged(true) | ||
| } | ||
| const setTomorrow = () => { | ||
| setNoDateFlag(false) | ||
| setDate(addDays(new Date(), 1)) | ||
| setDateChanged(true) | ||
| } | ||
| const setNextWeek = () => { | ||
| setNoDateFlag(false) | ||
| setDate(addDays(new Date(), 7)) | ||
| setDateChanged(true) | ||
| } | ||
| const setNoDate = () => { | ||
| setNoDateFlag(true) | ||
| setDate(null) | ||
| setDateChanged(true) | ||
| } | ||
|
|
||
| const todayFormatted = format(new Date(), "eee") | ||
| const tomorrowFormatted = format(addDays(new Date(), 1), "eee") | ||
| const nextWeekFormatted = format(addDays(new Date(), 7), "eee MMM dd") | ||
|
|
||
| const dueDateFormatted = noDate | ||
| ? "No Date Assigned" | ||
| : date | ||
| ? format(date, "eee MMM dd") | ||
| : "No Date Assigned" | ||
|
|
||
| return ( | ||
| <div | ||
| className="flex flex-row-reverse overflow-hidden rounded-lg bg-background text-secondary-foreground" | ||
| {...props} | ||
| > | ||
| <div className="p-4 text-sm"> | ||
| <div className="mb-2 text-primary-foreground"> | ||
| Due Date:{" "} | ||
| <strong className="text-foreground">{dueDateFormatted}</strong> | ||
| </div> | ||
| <div> | ||
| <DateSelectionButton | ||
| label="Today" | ||
| icon={CalendarDot} | ||
| formattedDate={todayFormatted} | ||
| onClick={setToday} | ||
| /> | ||
| <DateSelectionButton | ||
| label="Tomorrow" | ||
| icon={SquareChevronRightIcon} | ||
| formattedDate={tomorrowFormatted} | ||
| onClick={setTomorrow} | ||
| /> | ||
| <DateSelectionButton | ||
| label="Next Week" | ||
| icon={CalendarDots} | ||
| formattedDate={nextWeekFormatted} | ||
| onClick={setNextWeek} | ||
| /> | ||
| <DateSelectionButton | ||
| label="No Date" | ||
| icon={CalendarX} | ||
| formattedDate={""} | ||
| onClick={setNoDate} | ||
| /> | ||
| </div> | ||
| </div> | ||
| <Calendar | ||
| mode="single" | ||
| selected={date || undefined} | ||
| onSelect={(selectedDate) => { | ||
| setNoDateFlag(false) | ||
| setDate(selectedDate || null) | ||
| setDateChanged(true) | ||
| }} | ||
| initialFocus | ||
| /> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters