From 4b2db371d9abe43d735ff3c9c956a82e0ce741a9 Mon Sep 17 00:00:00 2001
From: AlexSserb <aserbin190@gmail.com>
Date: Fri, 11 Apr 2025 11:01:23 +0400
Subject: [PATCH] feat: highlight for datetime in card summary

---
 .../CardAttributesInSummaryItem.tsx           | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/Dnd/Cards/CardAttributesInSummaryItem/CardAttributesInSummaryItem.tsx b/src/components/Dnd/Cards/CardAttributesInSummaryItem/CardAttributesInSummaryItem.tsx
index 7534cd4..0667516 100644
--- a/src/components/Dnd/Cards/CardAttributesInSummaryItem/CardAttributesInSummaryItem.tsx
+++ b/src/components/Dnd/Cards/CardAttributesInSummaryItem/CardAttributesInSummaryItem.tsx
@@ -30,6 +30,13 @@ const CardAttributesInSummaryItem = ({ cardSummary }: Props) => {
         return value;
     };
 
+    const isHighlightNeeded = (cardAttr: CardAttributeSchema): boolean => {
+        const type = cardAttr.attribute.type.type;
+        if (type !== "datetime") return false;
+        const datetime = new Date(cardAttr.value as string);
+        return datetime < new Date();
+    };
+
     return (
         <Flex direction={"column"}>
             {cardSummary.attributes
@@ -38,11 +45,14 @@ const CardAttributesInSummaryItem = ({ cardSummary }: Props) => {
                     cardAttr.value !== null &&
                     attributeIds.has(cardAttr.attribute.id)
                 ))
-                .map(cardAttr => (
-                    <Text c={"gray.6"} size={"sm"}>
-                        {cardAttr.attribute.label}: {getAttrValueValue(cardAttr)}
-                    </Text>
-                ))
+                .map(cardAttr => {
+                    const isHighlight = isHighlightNeeded(cardAttr);
+                    return (
+                        <Text c={isHighlight ? "white" : "gray.6"} size={"sm"}>
+                            {cardAttr.attribute.label}: {getAttrValueValue(cardAttr)}
+                        </Text>
+                    );
+                })
             }
         </Flex>
     );