From c7f9fc57017f758374cac7c9a44b25834aeb2e6a Mon Sep 17 00:00:00 2001
From: PietiKinnunen <106057688+PietiKinnunen@users.noreply.github.com>
Date: Wed, 30 Apr 2025 11:10:25 +0300
Subject: [PATCH] Render "new"-badge

---
 server/sanity.ts                                        | 2 ++
 src/components/DropdownMenu/DropdownMenuItem.module.css | 8 ++++++++
 src/components/DropdownMenu/DropdownMenuItem.tsx        | 8 +++++++-
 src/components/DropdownMenu/assets/new-badge.svg        | 1 +
 4 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 src/components/DropdownMenu/assets/new-badge.svg

diff --git a/server/sanity.ts b/server/sanity.ts
index 833d5d1..218fada 100644
--- a/server/sanity.ts
+++ b/server/sanity.ts
@@ -65,6 +65,7 @@ const navQuery = `
         sectionItems[]{
           itemType,
           "icon": icon.asset->url,
+          highlightBadge,
           title,
           description,
           link,
@@ -90,6 +91,7 @@ const navQuery = `
         sectionItems[]{
           itemType,
           "icon": icon.asset->url,
+          highlightBadge,
           title,
           description,
           link,
diff --git a/src/components/DropdownMenu/DropdownMenuItem.module.css b/src/components/DropdownMenu/DropdownMenuItem.module.css
index 2d3e6e5..aca0e50 100644
--- a/src/components/DropdownMenu/DropdownMenuItem.module.css
+++ b/src/components/DropdownMenu/DropdownMenuItem.module.css
@@ -104,6 +104,14 @@
     display: initial;
   }
 }
+
+.iconWrapper {
+  display: flex;
+  flex-direction: column;
+  row-gap: 8px;
+  min-width: 35px;
+}
+
 .dateText {
   font-size: 14px;
   line-height: 18px;
diff --git a/src/components/DropdownMenu/DropdownMenuItem.tsx b/src/components/DropdownMenu/DropdownMenuItem.tsx
index c4d8563..71fc5d6 100644
--- a/src/components/DropdownMenu/DropdownMenuItem.tsx
+++ b/src/components/DropdownMenu/DropdownMenuItem.tsx
@@ -1,12 +1,14 @@
 import { clsx } from "clsx";
 
 import Link from "../Link";
+import New from "./assets/new-badge.svg";
 
 import styles from "./DropdownMenuItem.module.css";
 import cn from "classnames";
 export interface MenuItemProps {
   itemType: string | "normal" | "image";
   icon?: string | null;
+  highlightBadge?: boolean | null;
   title?: string | null;
   description?: string | null;
   link: string | null;
@@ -28,6 +30,7 @@ const DropdownMenuItem = ({
   title,
   link = "",
   icon,
+  highlightBadge = false,
   description,
   imageItem,
   itemAmount,
@@ -39,7 +42,10 @@ const DropdownMenuItem = ({
       className={clsx(styles.styledLink, !description && styles.center)}
       href={link}
     >
-      <img src={icon || ""} width={35} height={35} alt="" />
+      <div className={styles.iconWrapper}>
+        <img src={icon || ""} width={35} height={35} alt="" />
+        {highlightBadge && <New />}
+      </div>
       <div className={styles.item}>
         <p className={styles.itemTitle}>{title}</p>
         {description && <p className={styles.description}>{description}</p>}
diff --git a/src/components/DropdownMenu/assets/new-badge.svg b/src/components/DropdownMenu/assets/new-badge.svg
new file mode 100644
index 0000000..2e7f32f
--- /dev/null
+++ b/src/components/DropdownMenu/assets/new-badge.svg
@@ -0,0 +1 @@
+<svg width="36" height="19" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="36" height="19" rx="9.5" fill="#0DD"/><path d="M12.949 5.745V13h-.775a.706.706 0 01-.295-.055.746.746 0 01-.235-.2l-3.615-4.6c.01.117.016.232.02.345.006.113.01.218.01.315V13H6.734V5.745h.79c.063 0 .116.003.16.01a.412.412 0 01.23.105c.033.03.07.07.11.12l3.64 4.62a7.761 7.761 0 01-.04-.705v-4.15h1.325zm3.029 1.175v1.865h2.42V9.92h-2.42v1.905h3.11V13h-4.62V5.745h4.62V6.92h-3.11zM29.97 5.745L27.72 13h-1.355L24.88 8.255a4.39 4.39 0 01-.135-.475 4.071 4.071 0 01-.135.475L23.11 13h-1.36l-2.245-7.255h1.26c.13 0 .238.03.325.09.09.06.148.14.175.24l1.125 4.09c.027.113.053.237.08.37.03.13.059.268.085.415.03-.15.062-.29.095-.42.034-.13.07-.252.11-.365l1.31-4.09a.467.467 0 01.17-.225.513.513 0 01.325-.105h.44c.13 0 .235.032.315.095.084.06.145.138.185.235l1.305 4.09c.04.107.077.223.11.35.033.123.065.255.095.395l.075-.395c.027-.127.053-.243.08-.35l1.125-4.09a.427.427 0 01.17-.23.53.53 0 01.325-.1h1.18z" fill="#333"/></svg>
\ No newline at end of file