Fix breadcrumbs key prop warning

pshenmic · Dec 12, 2024 · 3c54f4c · 3c54f4c
1 parent 1747558
commit 3c54f4c
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git a/packages/frontend/src/components/breadcrumbs/Breadcrumbs.js b/packages/frontend/src/components/breadcrumbs/Breadcrumbs.js
@@ -21,16 +21,15 @@ const Breadcrumbs = () => {
     <div className={'Breadcrumbs'}>
       <ul className={'Breadcrumbs__LinksContainer'}>
         {breadcrumbs.map((link, i) => (
-          <>
-            <li className={'Breadcrumbs__Link'}>
-              <LinkContainer href={i !== breadcrumbs.length - 1 ? link.path : null} key={i}>
-                {link.avatar &&
-                  <ImageGenerator className={'Breadcrumbs__Avatar'} username={link.label} lightness={50} saturation={50} width={16} height={16} />}
-                {link.label}
-              </LinkContainer>
-            </li>
+          <li className={'Breadcrumbs__Link'} key={i}>
+            <LinkContainer href={i !== breadcrumbs.length - 1 ? link.path : null} key={i}>
+              {link.avatar &&
+                <ImageGenerator className={'Breadcrumbs__Avatar'} username={link.label} lightness={50} saturation={50} width={16} height={16} />}
+              {link.label}
+            </LinkContainer>
+
             {i !== breadcrumbs.length - 1 && <div className={'Breadcrumbs__Separator'}><ChevronIcon color={'brand.normal'}/></div>}
-          </>
+          </li>
         ))}
       </ul>
     </div>

diff --git a/packages/frontend/src/components/breadcrumbs/Breadcrumbs.scss b/packages/frontend/src/components/breadcrumbs/Breadcrumbs.scss
@@ -17,6 +17,8 @@
 
   &__Link {
     margin: 0;
+    display: flex;
+    align-items: center;
 
     a, span {
       display: flex;