From e20e3d59f8a4ba5d85502b77551fb12d167003d5 Mon Sep 17 00:00:00 2001
From: Stas Morozov <stas@appewa.com>
Date: Tue, 4 Feb 2025 17:41:01 +0300
Subject: [PATCH 1/2] Highlight active shortcuts

---
 src/components/Shortcuts.tsx | 33 +++++++++++++++++++++++++--------
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/components/Shortcuts.tsx b/src/components/Shortcuts.tsx
index 5fbeea2..6f83b49 100644
--- a/src/components/Shortcuts.tsx
+++ b/src/components/Shortcuts.tsx
@@ -1,9 +1,9 @@
 import { memo, ReactNode, useCallback, useContext, useMemo } from "react";
 
-import { TEXT_COLOR } from "../constants";
+import { BG_COLOR, TEXT_COLOR } from "../constants";
 import DEFAULT_SHORTCUTS from "../constants/shortcuts";
 import DatepickerContext from "../contexts/DatepickerContext";
-import { dateIsSameOrBefore } from "../libs/date";
+import { dateIsSame, dateIsSameOrBefore } from "../libs/date";
 import { Period, ShortcutsItem } from "../types";
 
 interface ItemTemplateProps {
@@ -26,11 +26,28 @@ const ItemTemplate = memo((props: ItemTemplateProps) => {
     } = useContext(DatepickerContext);
 
     // Functions
-    const getClassName = useCallback(() => {
-        const textColor = TEXT_COLOR["600"][primaryColor as keyof (typeof TEXT_COLOR)["600"]];
-        const textColorHover = TEXT_COLOR.hover[primaryColor as keyof typeof TEXT_COLOR.hover];
-        return `whitespace-nowrap w-1/2 md:w-1/3 lg:w-auto transition-all duration-300 hover:bg-gray-100 dark:hover:bg-white/10 p-2 rounded cursor-pointer ${textColor} ${textColorHover}`;
-    }, [primaryColor]);
+    const getClassName = useCallback(
+        (item: Period) => {
+            const baseClass =
+                "whitespace-nowrap w-1/2 md:w-1/3 lg:w-auto transition-all duration-300 hover:bg-gray-100 dark:hover:bg-white/10 p-2 rounded cursor-pointer";
+
+            const dayIsSameStart =
+                period.start && item.start && dateIsSame(item.start, period.start, "date");
+            const dayIsSameEnd = period.end && item.end && dateIsSame(item.end, period.end, "date");
+            const isActive = dayIsSameStart && dayIsSameEnd;
+
+            const textColorHover = TEXT_COLOR.hover[primaryColor as keyof typeof TEXT_COLOR.hover];
+            const bgColorActive = isActive
+                ? BG_COLOR["500"][primaryColor as keyof (typeof BG_COLOR)["500"]]
+                : "";
+            const textColor = isActive
+                ? "text-white"
+                : TEXT_COLOR["600"][primaryColor as keyof (typeof TEXT_COLOR)["600"]];
+
+            return `${baseClass} ${textColor} ${textColorHover} ${bgColorActive}`;
+        },
+        [primaryColor, changeDatepickerValue, period.end, period.start]
+    );
 
     const chosePeriod = useCallback(
         (item: Period) => {
@@ -72,7 +89,7 @@ const ItemTemplate = memo((props: ItemTemplateProps) => {
 
     return (
         <li
-            className={getClassName()}
+            className={getClassName(props?.item.period)}
             onClick={() => {
                 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-ignore

From 521b988149ceff64ca584e44a7c7f14aacafd78e Mon Sep 17 00:00:00 2001
From: Stas Morozov <stas@appewa.com>
Date: Wed, 5 Feb 2025 12:30:50 +0300
Subject: [PATCH 2/2] Fix linter errors

---
 src/components/Shortcuts.tsx | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/Shortcuts.tsx b/src/components/Shortcuts.tsx
index 6f83b49..7e0ff65 100644
--- a/src/components/Shortcuts.tsx
+++ b/src/components/Shortcuts.tsx
@@ -27,13 +27,14 @@ const ItemTemplate = memo((props: ItemTemplateProps) => {
 
     // Functions
     const getClassName = useCallback(
-        (item: Period) => {
+        (item?: Period) => {
             const baseClass =
                 "whitespace-nowrap w-1/2 md:w-1/3 lg:w-auto transition-all duration-300 hover:bg-gray-100 dark:hover:bg-white/10 p-2 rounded cursor-pointer";
 
             const dayIsSameStart =
-                period.start && item.start && dateIsSame(item.start, period.start, "date");
-            const dayIsSameEnd = period.end && item.end && dateIsSame(item.end, period.end, "date");
+                period.start && item?.start && dateIsSame(item.start, period.start, "date");
+            const dayIsSameEnd =
+                period.end && item?.end && dateIsSame(item.end, period.end, "date");
             const isActive = dayIsSameStart && dayIsSameEnd;
 
             const textColorHover = TEXT_COLOR.hover[primaryColor as keyof typeof TEXT_COLOR.hover];
@@ -46,7 +47,7 @@ const ItemTemplate = memo((props: ItemTemplateProps) => {
 
             return `${baseClass} ${textColor} ${textColorHover} ${bgColorActive}`;
         },
-        [primaryColor, changeDatepickerValue, period.end, period.start]
+        [primaryColor, period.end, period.start]
     );
 
     const chosePeriod = useCallback(
@@ -89,11 +90,11 @@ const ItemTemplate = memo((props: ItemTemplateProps) => {
 
     return (
         <li
-            className={getClassName(props?.item.period)}
+            className={getClassName(Array.isArray(props.item) ? undefined : props.item?.period)}
             onClick={() => {
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                chosePeriod(props?.item.period);
+                if (!Array.isArray(props.item)) {
+                    chosePeriod(props.item?.period);
+                }
             }}
         >
             {children}