+ {/*
*/}
+ {!events?.length ? (
+
no events
+ ) : (
+
+ {events?.map(event => )}
+
+ )}
+
+
+ );
+};
+
+export default EventsList;
diff --git a/src/components/Modal/index.tsx b/src/components/common/Modal/index.tsx
similarity index 80%
rename from src/components/Modal/index.tsx
rename to src/components/common/Modal/index.tsx
index e2129d5..6d86984 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/common/Modal/index.tsx
@@ -20,12 +20,12 @@ const Modal = ({refItem, className, children, onClose}: TModalProps) => {
+ className="relative bg-mainBackgroundColor border border-sky-500 rounded-lg md:min-w-96 sm:min-w-56">
{children}
,
diff --git a/src/components/Modal/types.ts b/src/components/common/Modal/types.ts
similarity index 100%
rename from src/components/Modal/types.ts
rename to src/components/common/Modal/types.ts
diff --git a/src/components/common/MonthSmallCalendar/index.tsx b/src/components/common/MonthSmallCalendar/index.tsx
new file mode 100644
index 0000000..3d1b6cd
--- /dev/null
+++ b/src/components/common/MonthSmallCalendar/index.tsx
@@ -0,0 +1,51 @@
+import moment from 'moment';
+import {useSelector} from 'react-redux';
+
+import {selectFullDate, selectMonth, selectYear} from '@/redux/date/selectors';
+import {formatDate, generateDatesArray, getDate, getWeekDays} from '@/services/dateUtils';
+import {cx} from '@/services/utils';
+
+const MonthSmallCalendar = () => {
+ const fullDate = useSelector(selectFullDate);
+ const year = useSelector(selectYear);
+ const month = useSelector(selectMonth);
+
+ const dates = generateDatesArray(year as string, month as string);
+ const weekDays = getWeekDays();
+
+ return (
+
+
+ {month} {year}
+
+
+
+ {weekDays.map(weekday => (
+
+ {weekday.slice(0, 1)}
+
+ ))}
+
+ {dates.map(date => {
+ const day = formatDate(getDate(date), 'DD');
+ const currentMonth = formatDate(moment(fullDate), 'M');
+ const dateMonth = formatDate(moment(date), 'M');
+ const currentDate = formatDate(getDate(new Date()), 'YYYY-MM-DD');
+
+ return (
+
+
+
+ );
+ })}
+
+
+ );
+};
+
+export default MonthSmallCalendar;
diff --git a/src/components/formInputs/DropdownControl.tsx b/src/components/common/formInputs/DropdownControl.tsx
similarity index 100%
rename from src/components/formInputs/DropdownControl.tsx
rename to src/components/common/formInputs/DropdownControl.tsx
diff --git a/src/components/formInputs/InputControl.tsx b/src/components/common/formInputs/InputControl.tsx
similarity index 100%
rename from src/components/formInputs/InputControl.tsx
rename to src/components/common/formInputs/InputControl.tsx
diff --git a/src/components/formInputs/TextareaControl.tsx b/src/components/common/formInputs/TextareaControl.tsx
similarity index 100%
rename from src/components/formInputs/TextareaControl.tsx
rename to src/components/common/formInputs/TextareaControl.tsx
diff --git a/src/components/inputs/Dropdown/index.tsx b/src/components/common/inputs/Dropdown/index.tsx
similarity index 86%
rename from src/components/inputs/Dropdown/index.tsx
rename to src/components/common/inputs/Dropdown/index.tsx
index bfb2ab9..cb148be 100644
--- a/src/components/inputs/Dropdown/index.tsx
+++ b/src/components/common/inputs/Dropdown/index.tsx
@@ -1,8 +1,8 @@
import {memo, useCallback, useEffect, useRef, useState} from 'react';
+import ArrowDown from '@/components/ui/icons/ArrowDown';
+import CheckIcon from '@/components/ui/icons/CheckIcon';
import {useOpeningItem} from '@/hooks/useOpeningItem';
-import ArrowDown from '@/icons/ArrowDown';
-import CheckIcon from '@/icons/CheckIcon';
import {cx} from '@/services/utils';
import Button from '../../Button';
@@ -53,7 +53,7 @@ const Dropdown = ({
return (
-
+
{options.map(option => (
- handleChange(option)}>
{option}
diff --git a/src/components/inputs/Dropdown/types.ts b/src/components/common/inputs/Dropdown/types.ts
similarity index 100%
rename from src/components/inputs/Dropdown/types.ts
rename to src/components/common/inputs/Dropdown/types.ts
diff --git a/src/components/inputs/Input/index.tsx b/src/components/common/inputs/Input/index.tsx
similarity index 100%
rename from src/components/inputs/Input/index.tsx
rename to src/components/common/inputs/Input/index.tsx
diff --git a/src/components/inputs/Input/types.ts b/src/components/common/inputs/Input/types.ts
similarity index 100%
rename from src/components/inputs/Input/types.ts
rename to src/components/common/inputs/Input/types.ts
diff --git a/src/components/inputs/Textarea/index.tsx b/src/components/common/inputs/Textarea/index.tsx
similarity index 100%
rename from src/components/inputs/Textarea/index.tsx
rename to src/components/common/inputs/Textarea/index.tsx
diff --git a/src/components/inputs/Textarea/types.ts b/src/components/common/inputs/Textarea/types.ts
similarity index 100%
rename from src/components/inputs/Textarea/types.ts
rename to src/components/common/inputs/Textarea/types.ts
diff --git a/src/components/layout/Aside/components/MyCalendarsList/index.tsx b/src/components/layout/Aside/components/MyCalendarsList/index.tsx
new file mode 100644
index 0000000..0926b5d
--- /dev/null
+++ b/src/components/layout/Aside/components/MyCalendarsList/index.tsx
@@ -0,0 +1,57 @@
+import {useSelector} from 'react-redux';
+
+import {setSelectedCalendar} from '@/redux/myCalendars/myCalendarsSlice';
+import {selectCalendarsList, selectSelectedCalendar} from '@/redux/myCalendars/selectors';
+import {useAppDispatch} from '@/redux/store';
+import {CalendarsNames} from '@/services/types';
+import {cx} from '@/services/utils';
+
+const MyCalendarsList = () => {
+ const dispatch = useAppDispatch();
+ // TODO: for day page - filter by date
+ const calendarsList = useSelector(selectCalendarsList);
+ const selectedCalendar = useSelector(selectSelectedCalendar);
+
+ const selectCalendar = (name: CalendarsNames) => {
+ if (selectedCalendar === name) {
+ dispatch(setSelectedCalendar(null));
+ } else {
+ dispatch(setSelectedCalendar(name));
+ }
+ };
+
+ return (
+
+
My calendars
+
+
+ {calendarsList?.map(({name, count, itemColor}) => {
+ const isSelected = selectedCalendar === name;
+
+ return (
+
selectCalendar(name)}>
+
+
{name}
+
{count}
+
+ );
+ })}
+
+
{children}
;
+ return {children}
;
};
export default Container;
diff --git a/src/components/Error/index.tsx b/src/components/layout/Error/index.tsx
similarity index 100%
rename from src/components/Error/index.tsx
rename to src/components/layout/Error/index.tsx
diff --git a/src/components/MainLayout/index.tsx b/src/components/layout/MainLayout/index.tsx
similarity index 68%
rename from src/components/MainLayout/index.tsx
rename to src/components/layout/MainLayout/index.tsx
index ea6da27..6cf19d9 100644
--- a/src/components/MainLayout/index.tsx
+++ b/src/components/layout/MainLayout/index.tsx
@@ -2,9 +2,11 @@ import {Suspense, useEffect} from 'react';
import {useSelector} from 'react-redux';
import {Outlet} from 'react-router';
-import Loading from '@/components/Loading';
+import Loading from '@/components/ui/Loading';
import {selectOpenedItems} from '@/redux/overflow/selectors';
+import Aside from '../Aside';
+
const MainLayout = () => {
const openedItems = useSelector(selectOpenedItems);
@@ -21,11 +23,14 @@ const MainLayout = () => {
}, [openedItems]);
return (
-
- }>
-
-
-
+ <>
+
+
+ }>
+
+
+
+
);
};
diff --git a/src/components/ui/Divider/index.tsx b/src/components/ui/Divider/index.tsx
new file mode 100644
index 0000000..2a838bd
--- /dev/null
+++ b/src/components/ui/Divider/index.tsx
@@ -0,0 +1,22 @@
+import classNames from 'classnames';
+import {ReactNode} from 'react';
+
+interface IDividerProps {
+ children?: ReactNode;
+ className?: string;
+}
+
+const Divider = ({className = '', children}: IDividerProps) => {
+ return (
+
+ );
+};
+
+export default Divider;
diff --git a/src/components/ui/Loading/index.tsx b/src/components/ui/Loading/index.tsx
new file mode 100644
index 0000000..be02e8d
--- /dev/null
+++ b/src/components/ui/Loading/index.tsx
@@ -0,0 +1,34 @@
+const Loading = () => {
+ return (
+
+
+ {/* Background track - light blue full circle */}
+
+
+ {/* Rotating arc - blue partial circle */}
+
+
+
-
{name}
-
{description}
-
- {parsedContent?.fact && (
- <>
-
Fun fact
-
- {isLoading ?
: parsedContent.fact}
+ <>
+ {parsedContent?.holiday && (
+
+
+
{parsedContent.holiday.name}
+
+ {/* TODO: add tooltip with description */}
+ {/*
} className="w-auto min-w-[25px] flex justify-end">
+
{parsedContent.holiday.description}
+ */}
-
+
)}
- {parsedContent?.holidays && (
- <>
-
Holidays
- {isLoading ? (
-
- ) : (
-
- {parsedContent?.holidays?.map(holiday => (
-
- ))}
-
- )}
-
+ {parsedContent?.fact && (
+
+
Did you know
+
{parsedContent.fact}
+
)}
-
+
);
};
diff --git a/src/pages/Day/components/AIInfo/types.ts b/src/pages/Day/components/AIInfo/types.ts
index 942130e..dd279d2 100644
--- a/src/pages/Day/components/AIInfo/types.ts
+++ b/src/pages/Day/components/AIInfo/types.ts
@@ -1,6 +1,4 @@
-export type THoliday = {name: string; description: string};
-
export interface IParsedContent {
- holidays: {name: string; description: string}[];
+ holiday: {name: string; description: string};
fact: string;
}
diff --git a/src/pages/Day/index.tsx b/src/pages/Day/index.tsx
index d88eabc..0d4752c 100644
--- a/src/pages/Day/index.tsx
+++ b/src/pages/Day/index.tsx
@@ -1,9 +1,12 @@
+import moment from 'moment';
import {useNavigate, useParams} from 'react-router';
-import Button from '@/components/Button';
-import Container from '@/components/Container';
-import EventsList from '@/components/EventsList';
-import ArrowLeft from '@/icons/ArrowLeft';
+import Button from '@/components/common/Button';
+import EventsList from '@/components/common/EventsList';
+import Divider from '@/components/ui/Divider';
+import ArrowLeft from '@/components/ui/icons/ArrowLeft';
+import {useMediaQuery} from '@/hooks/useMediaQuery';
+import {formatDate} from '@/services/dateUtils';
import AddEvent from '../Main/components/Header/Controls/AddEvent';
import AIInfo from './components/AIInfo';
@@ -14,28 +17,103 @@ import AIInfo from './components/AIInfo';
const DayPage = () => {
const navigate = useNavigate();
const {date} = useParams<{date: string}>();
+ const showEventsCount = useMediaQuery({size: 'sm', direction: 'to'});
const handleReturn = () => {
navigate(-1);
};
+ const isGroqEnabled = import.meta.env.VITE_REACT_APP_IS_GROQ_ENABLED === 'true';
+
return (
-
-
-
-
} className="w-fit" />
-
+ <>
+
+
+
+
+
-
- Events for {date}
-
+ {isGroqEnabled && (
+
+ )}
+
+
+
+
+
+
+
+ {isGroqEnabled && (
+
+ )}
+
-
+
-
+
);
};
diff --git a/src/pages/Main/components/Calendar/Day/DayEventsList/Event/index.tsx b/src/pages/Main/components/Calendar/Day/DayEventsList/Event/index.tsx
index 273a0df..df189b3 100644
--- a/src/pages/Main/components/Calendar/Day/DayEventsList/Event/index.tsx
+++ b/src/pages/Main/components/Calendar/Day/DayEventsList/Event/index.tsx
@@ -1,9 +1,9 @@
import {memo} from 'react';
-import EventForm from '@/components/EventForm';
-import {FormActionType} from '@/components/EventForm/types';
-import Modal from '@/components/Modal';
-import Tooltip from '@/components/Tooltip';
+import EventForm from '@/components/common/EventForm';
+import {FormActionType} from '@/components/common/EventForm/types';
+import Modal from '@/components/common/Modal';
+import Tooltip from '@/components/ui/Tooltip';
import {useMediaQuery} from '@/hooks/useMediaQuery';
import {useOpeningItem} from '@/hooks/useOpeningItem';
diff --git a/src/pages/Main/components/Calendar/Day/DayEventsList/RemainedItems/index.tsx b/src/pages/Main/components/Calendar/Day/DayEventsList/RemainedItems/index.tsx
index ae6d070..3be4bca 100644
--- a/src/pages/Main/components/Calendar/Day/DayEventsList/RemainedItems/index.tsx
+++ b/src/pages/Main/components/Calendar/Day/DayEventsList/RemainedItems/index.tsx
@@ -1,4 +1,4 @@
-import Tooltip from '@/components/Tooltip';
+import Tooltip from '@/components/ui/Tooltip';
import {useMediaQuery} from '@/hooks/useMediaQuery';
import {TRemainedItemsProps} from './types';
diff --git a/src/pages/Main/components/Calendar/Day/index.tsx b/src/pages/Main/components/Calendar/Day/index.tsx
index 89341a3..c56b5d4 100644
--- a/src/pages/Main/components/Calendar/Day/index.tsx
+++ b/src/pages/Main/components/Calendar/Day/index.tsx
@@ -4,14 +4,14 @@ import {memo, useRef, useState} from 'react';
import {useSelector} from 'react-redux';
import {useSearchParams} from 'react-router';
-import Button from '@/components/Button';
-import EventForm from '@/components/EventForm';
-import Modal from '@/components/Modal';
+import Button from '@/components/common/Button';
+import EventForm from '@/components/common/EventForm';
+import Modal from '@/components/common/Modal';
+import AddIcon from '@/components/ui/icons/AddIcon';
+import ExternalPage from '@/components/ui/icons/ExternalPage';
import {useEventsList} from '@/hooks/useEventsList';
import {useMediaQuery} from '@/hooks/useMediaQuery';
import {useOpeningItem} from '@/hooks/useOpeningItem';
-import AddIcon from '@/icons/AddIcon';
-import ExternalPage from '@/icons/ExternalPage';
import {setSelectedDate} from '@/redux/date/dateSlice';
import {selectFullDate, selectSelectedDate} from '@/redux/date/selectors';
import {useAppDispatch} from '@/redux/store';
@@ -71,9 +71,9 @@ const Day = ({date}: TDayProps) => {
animate={{opacity: 1}}
transition={{duration: 0.5, ease: 'easeOut'}}
className={cx(
- 'flex flex-col relative justify-between border border-secondaryBackgroundColor rounded-md p-1 lg:p-3 cursor-pointer transition-all',
+ 'flex flex-col relative justify-between border border-secondary-background-color rounded-md p-1 lg:p-3 cursor-pointer transition-all',
{
- 'bg-secondaryBackgroundColor': dateMonth !== currentMonth,
+ 'bg-secondary-background-color': dateMonth !== currentMonth,
},
{'bg-secondaryBackgroundColorHover': isHover},
{'border border-sky-500': date === selectedDate && isMobileScreen},
diff --git a/src/pages/Main/components/Calendar/WeekDays/index.tsx b/src/pages/Main/components/Calendar/WeekDays/index.tsx
index 74abcb3..19e09b5 100644
--- a/src/pages/Main/components/Calendar/WeekDays/index.tsx
+++ b/src/pages/Main/components/Calendar/WeekDays/index.tsx
@@ -6,7 +6,7 @@ const WeekDays = () => {
const screenSize = useScreenSize();
return (
-
+
{weekDays.map(weekday => (
{screenSize === 'sm' ? weekday.slice(0, 3) : screenSize === 'xs' ? weekday.slice(0, 1) : weekday}
diff --git a/src/pages/Main/components/Header/CalendarDatePicker/index.tsx b/src/pages/Main/components/Header/CalendarDatePicker/index.tsx
index 1f72d9d..a4885ee 100644
--- a/src/pages/Main/components/Header/CalendarDatePicker/index.tsx
+++ b/src/pages/Main/components/Header/CalendarDatePicker/index.tsx
@@ -2,7 +2,7 @@ import moment from 'moment';
import {useCallback, useMemo} from 'react';
import {useSelector} from 'react-redux';
-import Dropdown from '@/components/inputs/Dropdown';
+import Dropdown from '@/components/common/inputs/Dropdown';
import {setFullDate} from '@/redux/date/dateSlice';
import {selectFullDate, selectMonth, selectYear} from '@/redux/date/selectors';
import {useAppDispatch} from '@/redux/store';
diff --git a/src/pages/Main/components/Header/Controls/AddEvent.tsx b/src/pages/Main/components/Header/Controls/AddEvent.tsx
index 0d31147..0fcf5cc 100644
--- a/src/pages/Main/components/Header/Controls/AddEvent.tsx
+++ b/src/pages/Main/components/Header/Controls/AddEvent.tsx
@@ -1,6 +1,6 @@
-import Button from '@/components/Button';
-import EventForm from '@/components/EventForm';
-import Modal from '@/components/Modal';
+import Button from '@/components/common/Button';
+import EventForm from '@/components/common/EventForm';
+import Modal from '@/components/common/Modal';
import {useOpeningItem} from '@/hooks/useOpeningItem';
import {cx} from '@/services/utils';
diff --git a/src/pages/Main/components/Header/Controls/ChangeMonthControl.tsx b/src/pages/Main/components/Header/Controls/ChangeMonthControl.tsx
index f0573bf..787691a 100644
--- a/src/pages/Main/components/Header/Controls/ChangeMonthControl.tsx
+++ b/src/pages/Main/components/Header/Controls/ChangeMonthControl.tsx
@@ -1,9 +1,9 @@
import moment from 'moment';
import {useSelector} from 'react-redux';
-import Button from '@/components/Button';
-import ArrowLeft from '@/icons/ArrowLeft';
-import ArrowRight from '@/icons/ArrowRight';
+import Button from '@/components/common/Button';
+import ArrowLeft from '@/components/ui/icons/ArrowLeft';
+import ArrowRight from '@/components/ui/icons/ArrowRight';
import {setFullDate} from '@/redux/date/dateSlice';
import {selectFullDate} from '@/redux/date/selectors';
import {useAppDispatch} from '@/redux/store';
diff --git a/src/pages/Main/components/Header/Controls/ChangeViewControl.tsx b/src/pages/Main/components/Header/Controls/ChangeViewControl.tsx
index 7d80583..0f52944 100644
--- a/src/pages/Main/components/Header/Controls/ChangeViewControl.tsx
+++ b/src/pages/Main/components/Header/Controls/ChangeViewControl.tsx
@@ -1,6 +1,6 @@
import {useCallback} from 'react';
-import Dropdown from '@/components/inputs/Dropdown';
+import Dropdown from '@/components/common/inputs/Dropdown';
const viewOptions = ['Day view', 'Week view', 'Month view', 'Year view'];
diff --git a/src/pages/Main/components/Header/Controls/index.tsx b/src/pages/Main/components/Header/Controls/index.tsx
index 826b001..d436407 100644
--- a/src/pages/Main/components/Header/Controls/index.tsx
+++ b/src/pages/Main/components/Header/Controls/index.tsx
@@ -1,9 +1,9 @@
import {useSelector} from 'react-redux';
-import Button from '@/components/Button';
+import Button from '@/components/common/Button';
+import VerticalDots from '@/components/ui/icons/VerticalDots';
import {useMediaQuery} from '@/hooks/useMediaQuery';
import {useOpeningItem} from '@/hooks/useOpeningItem';
-import VerticalDots from '@/icons/VerticalDots';
import {selectIsItemCurrentlyOpened} from '@/redux/overflow/selectors';
import {cx} from '@/services/utils';
diff --git a/src/pages/Main/components/Header/index.tsx b/src/pages/Main/components/Header/index.tsx
index d039d88..e41ebfc 100644
--- a/src/pages/Main/components/Header/index.tsx
+++ b/src/pages/Main/components/Header/index.tsx
@@ -1,15 +1,11 @@
-import Container from '@/components/Container';
-
import CalendarDatePicker from './CalendarDatePicker';
import Controls from './Controls';
const Header = () => {
return (
-
-
-
-
-
+
);
};
diff --git a/src/pages/Main/components/MobileDateInfo/index.tsx b/src/pages/Main/components/MobileDateInfo/index.tsx
index aa30a61..28432ec 100644
--- a/src/pages/Main/components/MobileDateInfo/index.tsx
+++ b/src/pages/Main/components/MobileDateInfo/index.tsx
@@ -1,8 +1,8 @@
import {useSelector} from 'react-redux';
-import Button from '@/components/Button';
-import EventsList from '@/components/EventsList';
-import ExternalPage from '@/icons/ExternalPage';
+import Button from '@/components/common/Button';
+import EventsList from '@/components/common/EventsList';
+import ExternalPage from '@/components/ui/icons/ExternalPage';
import {selectSelectedDate} from '@/redux/date/selectors';
const MobileDateInfo = () => {
diff --git a/src/pages/Main/index.tsx b/src/pages/Main/index.tsx
index 0dc070a..e2dd03c 100644
--- a/src/pages/Main/index.tsx
+++ b/src/pages/Main/index.tsx
@@ -1,4 +1,3 @@
-import Container from '@/components/Container';
import CalendarProvider from '@/providers/calendar-provider';
import Calendar from './components/Calendar';
@@ -9,11 +8,9 @@ const MainPage = () => {
-
-
-
-
-
+
+
+
);
};
diff --git a/src/redux/dateHolidaysGenerator/holidaysApi.tsx b/src/redux/dateHolidaysGenerator/holidaysApi.tsx
index 046cebd..5c99afc 100644
--- a/src/redux/dateHolidaysGenerator/holidaysApi.tsx
+++ b/src/redux/dateHolidaysGenerator/holidaysApi.tsx
@@ -23,7 +23,6 @@ export const holidaysApi = createApi({
body: {
// model: 'openai/gpt-oss-20b',
model: 'openai/gpt-oss-120b',
- // temperature uses for randomness of the model response (where 0 is maximally deterministic)
temperature: 0,
messages: [
{
@@ -32,7 +31,13 @@ export const holidaysApi = createApi({
Provide structured information about the requested date.
Rules:
-- Return holidays for the date.
+- Return exactly ONE holiday for the date.
+- The holiday must be the most significant or widely recognized one for that date.
+- The holiday MUST NOT include or reference Russia, the Russian Federation, the Soviet Union, or any events related to these countries.
+- If the most significant holiday is related to Russia or the Soviet Union, choose the next most significant holiday that is unrelated to them.
+- Prefer holidays that are internationally recognized or celebrated in multiple countries rather than niche or local observances.
+- Do not return multiple holidays.
+
- Return exactly ONE interesting historical fact.
- The fact must be the most historically significant or widely known fact about that date.
- The fact MUST NOT include or reference Russia, the Russian Federation, the Soviet Union, or any events related to these countries.
@@ -44,7 +49,7 @@ Follow the provided JSON schema strictly.
},
{
role: 'user',
- content: `Get holidays and the most significant historical fact for ${date}`,
+ content: `Get the most significant holiday and the most significant historical fact for ${date}`,
},
],
response_format: {
@@ -55,24 +60,21 @@ Follow the provided JSON schema strictly.
schema: {
type: 'object',
properties: {
- holidays: {
- type: 'array',
- items: {
- type: 'object',
- properties: {
- name: {type: 'string'},
- description: {type: 'string'},
- },
- required: ['name', 'description'],
- additionalProperties: false,
+ holiday: {
+ type: 'object',
+ properties: {
+ name: {type: 'string'},
+ description: {type: 'string'},
},
+ required: ['name', 'description'],
+ additionalProperties: false,
},
fact: {
type: 'string',
description: 'The single most significant historical fact for this date',
},
},
- required: ['holidays', 'fact'],
+ required: ['holiday', 'fact'],
additionalProperties: false,
},
},
diff --git a/src/redux/myCalendars/myCalendarsSlice.ts b/src/redux/myCalendars/myCalendarsSlice.ts
new file mode 100644
index 0000000..1110b58
--- /dev/null
+++ b/src/redux/myCalendars/myCalendarsSlice.ts
@@ -0,0 +1,49 @@
+import {PayloadAction, createSlice} from '@reduxjs/toolkit';
+
+import {CalendarsNames} from '@/services/types';
+
+import {SliceNames} from '../types';
+import {TMyCalendarsState} from './types';
+
+const reducers = {
+ // TODO: add setCalendarsList reducer
+ setSelectedCalendar: (state: TMyCalendarsState, action: PayloadAction) => {
+ state.selectedCalendar = action.payload;
+ },
+};
+
+const initialState: TMyCalendarsState = {
+ // TODO: generate list from localStorage
+ calendarsList: [
+ {
+ name: CalendarsNames.work,
+ count: 5,
+ itemColor: '#4A6CF7',
+ },
+ {
+ name: CalendarsNames.personal,
+ count: 8,
+ itemColor: '#a855f7',
+ },
+ {
+ name: CalendarsNames.health,
+ count: 3,
+ itemColor: '#34d399',
+ },
+ {
+ name: CalendarsNames.holidays,
+ count: 2,
+ itemColor: '#f59e0b',
+ },
+ ],
+ selectedCalendar: null,
+};
+
+const myCalendarsSlice = createSlice({
+ name: SliceNames.myCalendarsSlice,
+ initialState,
+ reducers,
+});
+
+export const {setSelectedCalendar} = myCalendarsSlice.actions;
+export default myCalendarsSlice;
diff --git a/src/redux/myCalendars/selectors.ts b/src/redux/myCalendars/selectors.ts
new file mode 100644
index 0000000..7e8ec40
--- /dev/null
+++ b/src/redux/myCalendars/selectors.ts
@@ -0,0 +1,4 @@
+import {RootState} from '../store';
+
+export const selectSelectedCalendar = (state: RootState) => state.myCalendarsData.selectedCalendar;
+export const selectCalendarsList = (state: RootState) => state.myCalendarsData.calendarsList;
diff --git a/src/redux/myCalendars/types.ts b/src/redux/myCalendars/types.ts
new file mode 100644
index 0000000..2b48c02
--- /dev/null
+++ b/src/redux/myCalendars/types.ts
@@ -0,0 +1,6 @@
+import {CalendarsNames, Nullable, TCalendarsList} from '@/services/types';
+
+export type TMyCalendarsState = {
+ calendarsList: TCalendarsList;
+ selectedCalendar: Nullable;
+};
diff --git a/src/redux/store.ts b/src/redux/store.ts
index 0488b5c..6e96d78 100644
--- a/src/redux/store.ts
+++ b/src/redux/store.ts
@@ -4,6 +4,7 @@ import {useDispatch} from 'react-redux';
import dateSlice from './date/dateSlice';
import {holidaysApi} from './dateHolidaysGenerator/holidaysApi';
import counterSlice from './events/eventsSlice';
+import myCalendarsSlice from './myCalendars/myCalendarsSlice';
import overflowSlice from './overflow/overflowSlice';
import {PreloadedState, SliceNames} from './types';
@@ -11,6 +12,7 @@ const combinedReducer = combineReducers({
[SliceNames.eventsSlice]: counterSlice.reducer,
[SliceNames.dateSlice]: dateSlice.reducer,
[SliceNames.overflowSlice]: overflowSlice.reducer,
+ [SliceNames.myCalendarsSlice]: myCalendarsSlice.reducer,
[holidaysApi.reducerPath]: holidaysApi.reducer,
});
diff --git a/src/redux/types.ts b/src/redux/types.ts
index 1e26fee..e83c344 100644
--- a/src/redux/types.ts
+++ b/src/redux/types.ts
@@ -6,4 +6,5 @@ export enum SliceNames {
eventsSlice = 'eventsData',
dateSlice = 'dateData',
overflowSlice = 'overflowData',
+ myCalendarsSlice = 'myCalendarsData',
}
diff --git a/src/routes/router.tsx b/src/routes/router.tsx
index e4d0ec9..ecaa3f0 100644
--- a/src/routes/router.tsx
+++ b/src/routes/router.tsx
@@ -1,8 +1,8 @@
import moment from 'moment';
import {createBrowserRouter} from 'react-router';
-import Error from '@/components/Error';
-import MainLayout from '@/components/MainLayout';
+import Error from '@/components/layout/Error';
+import MainLayout from '@/components/layout/MainLayout';
import {DayPage, MainPage} from '@/pages';
import NotFound from '@/pages/NotFound';
import {RouterPaths} from '@/services/types';
diff --git a/src/services/dateUtils.ts b/src/services/dateUtils.ts
index 200bf36..e81558f 100644
--- a/src/services/dateUtils.ts
+++ b/src/services/dateUtils.ts
@@ -1,7 +1,7 @@
import moment, {Moment, MomentInput} from 'moment';
import {TOTAL_DAYS_IN_MONTH} from './constants';
-import {Format, MonthParts} from './types';
+import {MonthParts} from './types';
export const getDate = (date: MomentInput) => {
return moment(date);
@@ -11,7 +11,7 @@ export const createDate = (year: number, month: string, day: number) => {
return moment().year(year).month(month).date(day).format('YYYY-MM-DD');
};
-export const formatDate = (date: Moment, format: Format) => {
+export const formatDate = (date: Moment, format: string) => {
return date.format(format);
};
diff --git a/src/services/types.ts b/src/services/types.ts
index 74b5c43..800a830 100644
--- a/src/services/types.ts
+++ b/src/services/types.ts
@@ -1,8 +1,6 @@
export type Nullable = T | null;
export type NonNullable = T extends null | undefined ? never : T;
-export type Format = 'YYYY-MM-DD' | 'YYYY' | 'MMMM' | 'M' | 'DD';
-
export type TScreenSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '';
export enum MonthParts {
@@ -20,3 +18,16 @@ export enum RouterPaths {
day = '/day/:date',
notFound = '*',
}
+
+export enum CalendarsNames {
+ work = 'Work',
+ personal = 'Personal',
+ health = 'Health',
+ holidays = 'Holidays',
+}
+
+export type TCalendarsList = {
+ name: CalendarsNames;
+ count: number;
+ itemColor: string;
+}[];
diff --git a/tailwind.config.js b/tailwind.config.js
index eb58e2c..c04027d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,3 @@
-const {colors: defaultColors} = require('tailwindcss/defaultTheme');
-
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
@@ -7,12 +5,16 @@ export default {
extend: {
colors: {
mainBackgroundColor: '#0D1117',
- secondaryBackgroundColor: '#161c22',
+ 'secondary-background-color': 'var(--secondary-bg-color)',
secondaryBackgroundColorHover: '#161c22a3',
+ overlay: 'var(--overlay-color)',
},
gridTemplateColumns: {
'auto-fill': 'repeat(auto-fill, minmax(330px, 1fr))',
},
+ height: {
+ 'header-height': 'var(--header-height)',
+ },
},
},
plugins: [],