Skip to content

Commit 0657587

Browse files
tomihqtomihq
authored
Merge pull request #17 from tomihq/refactor/styling-calendar
Styling calendar
2 parents 57acaa3 + 4b5398a commit 0657587

File tree

6 files changed

+203
-160
lines changed

6 files changed

+203
-160
lines changed

‎components/accordion/calendar-accordion.tsx‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
"use client";
22

33
import { AnimatePresence, motion } from "framer-motion";
4+
import { Button, buttonVariants } from "../ui/button";
45
import { useLocale, useTranslations } from "next-intl";
56

6-
import { Button } from "../ui/button";
77
import { Calendar as CalendarComponent } from "@/components/ui/calendar";
88
import { CalendarIcon } from "lucide-react";
99
import { PRIMARY_COLOR } from "@/lib/colors";
@@ -53,15 +53,19 @@ const CalendarAccordion = ({
5353
)}
5454
defaultMonth={date}
5555
classNames={{
56-
day_selected: cn(
57-
"",
58-
`bg-${PRIMARY_COLOR[theme]}-500 text-white hover:bg-${PRIMARY_COLOR[theme]}-500 hover:text-${PRIMARY_COLOR[theme]}-50 focus:bg-${PRIMARY_COLOR[theme]}-500 focus:text-${PRIMARY_COLOR[theme]}-50`
59-
),
60-
day_today: cn(
61-
"",
62-
`bg-${PRIMARY_COLOR[theme]}-100 text-${PRIMARY_COLOR[theme]}-900`
56+
months: "w-full",
57+
head_row: "flex justify-between",
58+
row: "w-full mt-2 flex justify-between",
59+
day: cn(
60+
buttonVariants({ variant: "ghost" }),
61+
"h-8 w-8 p-0 text-lg aria-selected:opacity-100"
6362
),
6463
}}
64+
modifiersClassNames={{
65+
today: "text-green-500",
66+
selected:
67+
"bg-green-500 text-white hover:bg-green-500 hover:text-white",
68+
}}
6569
mode='single'
6670
selected={date}
6771
onSelect={(date) => {

‎components/navigation/navigation-menu.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export function NavigationMenu({
6363
<header className='bg-white dark:bg-gradient-to-br dark:from-gray-900 dark:via-gray-900 dark:to-gray-900 dark:backdrop-blur-xl border-b-2 border-gray-200 dark:border-slate-800/85 '>
6464
<div className='max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 py-4 flex justify-between items-center'>
6565
{showCalendar && (
66-
<div className='sm:hidden relative'>
66+
<div className='sm:hidden relative mx-4'>
6767
<Dialog>
6868
<DialogTrigger asChild>
6969
<Button
@@ -79,12 +79,15 @@ export function NavigationMenu({
7979
</span>
8080
</Button>
8181
</DialogTrigger>
82-
<DialogContent>
82+
<DialogContent
83+
showCloseButton={false}
84+
className='p-2 w-[90%] max-w-sm rounded-md dark:border-slate-700 dark:bg-slate-900 dark:text-white focus:border-gray-300 focus:ring focus:ring-gray-200 focus:ring-opacity-50'
85+
>
8386
<ThemedCalendar
8487
mode='single'
8588
selected={date}
8689
onSelect={(newDate) => newDate && setDate(newDate)}
87-
className='rounded-lg shadow-sm border border-gray-200'
90+
className='rounded-lg shadow-sm '
8891
/>
8992
</DialogContent>
9093
</Dialog>

‎components/tasks/task-recurrence.tsx‎

Lines changed: 35 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,41 @@
1-
"use client"
1+
"use client";
22

3-
import React from 'react'
4-
import { Dialog, DialogTitle, DialogContent, DialogTrigger, DialogHeader } from '../ui/dialog'
5-
import { TaskRecurrenceOptions } from './task-recurrence-options'
6-
import { BLACK_BACKGROUND } from '@/lib/colors'
7-
import { cn } from '@/lib/utils'
8-
import { useTranslations } from 'next-intl'
3+
import {
4+
Dialog,
5+
DialogContent,
6+
DialogHeader,
7+
DialogTitle,
8+
DialogTrigger,
9+
} from "../ui/dialog";
910

10-
const TaskRecurrence = ({ isOpen, setIsOpen, }) => {
11-
const t = useTranslations("taskRecurrence")
11+
import { BLACK_BACKGROUND } from "@/lib/colors";
12+
import React from "react";
13+
import { TaskRecurrenceOptions } from "./task-recurrence-options";
14+
import { cn } from "@/lib/utils";
15+
import { useTranslations } from "next-intl";
1216

13-
return (
14-
<Dialog open={isOpen} onOpenChange={(open) => setIsOpen(open)}>
15-
16-
<DialogContent className={
17-
cn("bg-white dark:bg-gradient-to-br rounded-2xl p-6 max-w-xl shadow-xl space-y-4 max-h-[90vh] overflow-y-auto ", BLACK_BACKGROUND)
18-
}>
19-
<DialogHeader className='text-left'>
20-
<DialogTitle className="text-2xl font-semibold text-green-600 dark:text-white mb-2">{t("title")}</DialogTitle>
21-
<p className="text-gray-700 dark:text-gray-300">{t("subtitle")}</p>
22-
</DialogHeader>
23-
24-
<TaskRecurrenceOptions
25-
setIsOpen={setIsOpen}
26-
/>
17+
const TaskRecurrence = ({ isOpen, setIsOpen }) => {
18+
const t = useTranslations("taskRecurrence");
2719

28-
</DialogContent>
20+
return (
21+
<Dialog open={isOpen} onOpenChange={(open) => setIsOpen(open)}>
22+
<DialogContent
23+
className={cn(
24+
"p-6 w-[90%] max-w-md rounded-md dark:border-slate-700 dark:bg-slate-900 dark:text-white focus:border-gray-300 focus:ring focus:ring-gray-200 focus:ring-opacity-50 bg-white dark:bg-gradient-to-br shadow-xl space-y-4 max-h-[90vh] overflow-y-auto ",
25+
BLACK_BACKGROUND
26+
)}
27+
>
28+
<DialogHeader className='text-left'>
29+
<DialogTitle className='text-2xl font-semibold text-green-600 dark:text-white mb-2'>
30+
{t("title")}
31+
</DialogTitle>
32+
<p className='text-gray-700 dark:text-gray-300'>{t("subtitle")}</p>
33+
</DialogHeader>
2934

30-
</Dialog>
31-
)
32-
}
35+
<TaskRecurrenceOptions setIsOpen={setIsOpen} />
36+
</DialogContent>
37+
</Dialog>
38+
);
39+
};
3340

34-
export default TaskRecurrence
41+
export default TaskRecurrence;

‎components/ui/calendar.tsx‎

Lines changed: 29 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,13 @@
22

33
import * as React from "react";
44

5-
import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
5+
import { CaptionProps, DayPicker, useNavigation } from "react-day-picker";
6+
import {
7+
ChevronLeft,
8+
ChevronLeftIcon,
9+
ChevronRight,
10+
ChevronRightIcon,
11+
} from "lucide-react";
612
import {
713
Select,
814
SelectContent,
@@ -11,16 +17,34 @@ import {
1117
SelectValue,
1218
} from "./select";
1319
import { enUS, es } from "date-fns/locale";
20+
import { format, formatDate } from "date-fns";
1421

15-
import { DayPicker } from "react-day-picker";
1622
import { buttonVariants } from "./button";
1723
import { capitalizeFirstDateLetter } from "@/utils/date";
1824
import { cn } from "@/lib/utils";
19-
import { format } from "date-fns";
2025
import { useLocale } from "next-intl";
2126

2227
export type CalendarProps = React.ComponentProps<typeof DayPicker>;
23-
28+
function CustomCaptionComponent(props: CaptionProps) {
29+
const { goToMonth, nextMonth, previousMonth } = useNavigation();
30+
return (
31+
<div className='flex items-center justify-between '>
32+
<button
33+
disabled={!previousMonth}
34+
onClick={() => previousMonth && goToMonth(previousMonth)}
35+
>
36+
<ChevronLeft />
37+
</button>
38+
<h2 className='text-lg'>{formatDate(props.displayMonth, "MMM yyy")} </h2>
39+
<button
40+
disabled={!nextMonth}
41+
onClick={() => nextMonth && goToMonth(nextMonth)}
42+
>
43+
<ChevronRight />
44+
</button>
45+
</div>
46+
);
47+
}
2448
function Calendar({
2549
className,
2650
classNames,
@@ -101,6 +125,7 @@ function Calendar({
101125
...classNames,
102126
}}
103127
components={{
128+
Caption: CustomCaptionComponent,
104129
IconLeft: ({ ...props }) => <ChevronLeftIcon className='h-4 w-4' />,
105130
IconRight: ({ ...props }) => <ChevronRightIcon className='h-4 w-4' />,
106131
Dropdown: ({ ...props }) => (

0 commit comments

Comments
 (0)