feat: highlight for datetime in card summary

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 => (
+                .map(cardAttr => {
-                    <Text c={"gray.6"} size={"sm"}>
+                    const isHighlight = isHighlightNeeded(cardAttr);
-                        {cardAttr.attribute.label}: {getAttrValueValue(cardAttr)}
+                    return (
-                    </Text>
+                        <Text c={isHighlight ? "white" : "gray.6"} size={"sm"}>
-                ))
+                            {cardAttr.attribute.label}: {getAttrValueValue(cardAttr)}
+                        </Text>
+                    );
+                })
             }
         </Flex>
     );