From c5d55d5ca74ce6a8c368f1a576e70e98e1eed3da Mon Sep 17 00:00:00 2001
From: Diogo Soares <diogo.lsoares@gmail.com>
Date: Tue, 30 Jan 2024 15:40:43 +0100
Subject: [PATCH] add icon to breadcrumbs

---
 src/components/Blog/BreadcrumbsNav/index.tsx        | 13 +++++++++++--
 .../Blog/BreadcrumbsNav/styles.module.css           |  6 ++++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/Blog/BreadcrumbsNav/index.tsx b/src/components/Blog/BreadcrumbsNav/index.tsx
index 915fadb58..31aaf5ff3 100644
--- a/src/components/Blog/BreadcrumbsNav/index.tsx
+++ b/src/components/Blog/BreadcrumbsNav/index.tsx
@@ -2,6 +2,8 @@ import { Breadcrumbs, Typography } from '@mui/material'
 import Link from 'next/link'
 import css from './styles.module.css'
 import { type UrlObject } from 'url'
+import CategoryIcon from '@/public/images/Blog/category-icon.svg'
+import { type ReactNode } from 'react'
 
 const TYPOGRAPHY_VARIANT = 'caption'
 const TYPOGRAPHY_COLOR = 'text.primary'
@@ -11,7 +13,7 @@ type BreadcrumbsType = {
   title: string
 }
 
-const createBreadcrumb = (key: string, text: string, linkProps: string | UrlObject) => (
+const createBreadcrumb = (key: string, text: ReactNode, linkProps: string | UrlObject) => (
   <Link key={key} href={linkProps}>
     <Typography variant={TYPOGRAPHY_VARIANT} color={TYPOGRAPHY_COLOR}>
       {text}
@@ -22,7 +24,14 @@ const createBreadcrumb = (key: string, text: string, linkProps: string | UrlObje
 const BreadcrumbsNav = ({ category, title }: BreadcrumbsType) => {
   const breadcrumbs = [
     createBreadcrumb('1', 'Blog', { pathname: '/blog' }),
-    createBreadcrumb('2', `#${category}`, { pathname: '/blog', query: { category } }),
+    createBreadcrumb(
+      '2',
+      <div className={css.category}>
+        <CategoryIcon />
+        {category}
+      </div>,
+      { pathname: '/blog', query: { category } },
+    ),
     <Typography key="3" variant={TYPOGRAPHY_VARIANT} color={TYPOGRAPHY_COLOR}>
       {title}
     </Typography>,
diff --git a/src/components/Blog/BreadcrumbsNav/styles.module.css b/src/components/Blog/BreadcrumbsNav/styles.module.css
index 600c886bf..688b20cbb 100644
--- a/src/components/Blog/BreadcrumbsNav/styles.module.css
+++ b/src/components/Blog/BreadcrumbsNav/styles.module.css
@@ -15,3 +15,9 @@
 .breadcrumbs :global .MuiTypography-root {
   line-height: inherit;
 }
+
+.category {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}