fix: key error

src/app/page.tsx

@@ -53,13 +53,13 @@ const projects = [
     icon: '/node.svg',
     title: 'Vanilla',
     description: 'JavaScript',
-    link: '/f',
+    link: '/g',
   },
   {
     icon: '/node.svg',
     title: 'Vanilla',
     description: 'TypeScript',
-    link: '/f',
+    link: '/h',
   },
 ];
 
@@ -77,7 +77,7 @@ const socialIcons = [
 const router = [
   {
     title: 'Docs',
-    link: '/a',
+    link: '/a1',
   },
   {
     title: 'Blog',

src/components/extension/tree-view-api/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable prettier/prettier */
 'use client';
 
 import React, {
@@ -236,6 +237,8 @@ const Folder = forwardRef<HTMLDivElement, FolderProps & React.HTMLAttributes<HTM
     const Ele = empty ? 'div' : AccordionPrimitive.Item;
     const Trigger = empty ? 'div' : AccordionPrimitive.Trigger;
     const Content = empty ? 'div' : AccordionPrimitive.Content;
+    const openElement = openIcon ?? <FolderOpenIcon className="h-3 w-3" />;
+    const closeElement = closeIcon ?? <FolderIcon className="h-3 w-3" />;
 
     return (
       <Ele ref={ref} {...props} value={value} className="relative overflow-hidden h-full ">
@@ -257,9 +260,7 @@ const Folder = forwardRef<HTMLDivElement, FolderProps & React.HTMLAttributes<HTM
           }}
         >
           <div className=" flex items-center justify-start gap-x-1">
-            {expendedItems?.includes(value)
-              ? openIcon ?? <FolderOpenIcon className="h-3 w-3" />
-              : closeIcon ?? <FolderIcon className="h-3 w-3" />}
+            {expendedItems?.includes(value) ? openElement : closeElement}
             <span>{element}</span>
           </div>
           <div className=" flex gap-x-1 items-center mr-1">

src/components/home/card-hover-effect/index.tsx

@@ -64,7 +64,7 @@ export function HoverEffect({
     <div className={cn('grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4  py-10', className)}>
       {items.map((item, idx) => (
         <Link
-          key={item?.link}
+          key={item?.link + idx}
           className="relative block w-full h-full p-2 group"
           href={item?.link}
           onMouseEnter={() => setHoveredIndex(idx)}

src/components/home/footer/index.tsx

@@ -93,10 +93,10 @@ const renderLink = (products: LinkProps[]) =>
   ));
 
 const renderIcon = (icons: Icon[]) =>
-  icons.map((icon) => (
+  icons.map((icon, idx) => (
     <a
       href={icon.link}
-      key={icon.link}
+      key={icon.link + idx}
       className="p-2 rounded-md text-white border border-white/30 hover:bg-white/10 transition-colors"
     >
       {icon.icon}