From 1d156e6e64f8fef81fe9e750801b6bb30ad920c8 Mon Sep 17 00:00:00 2001
From: Sol Irvine <sol@zenzen.io>
Date: Mon, 21 Aug 2023 10:17:35 +0900
Subject: [PATCH] fix keys warning

---
 components/layout/product-grid-items.tsx | 4 ++--
 components/layout/stories-detail.tsx     | 4 ++--
 components/layout/stories.tsx            | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/layout/product-grid-items.tsx b/components/layout/product-grid-items.tsx
index ea8a5ebf7..6eb8ceaba 100644
--- a/components/layout/product-grid-items.tsx
+++ b/components/layout/product-grid-items.tsx
@@ -6,8 +6,8 @@ import Link from 'next/link';
 export default function ProductGridItems({ products }: { products: Product[] }) {
   return (
     <>
-      {products.map((product) => (
-        <Grid.Item key={product.handle} className="animate-fadeIn">
+      {products.map((product, index) => (
+        <Grid.Item key={`${product.handle}-${index}`} className="animate-fadeIn">
           <Link className="relative inline-block h-full w-full" href={`/product/${product.handle}`}>
             <GridTileImage
               alt={product.title}
diff --git a/components/layout/stories-detail.tsx b/components/layout/stories-detail.tsx
index 40424a489..38b7d307e 100644
--- a/components/layout/stories-detail.tsx
+++ b/components/layout/stories-detail.tsx
@@ -34,8 +34,8 @@ export default async function StoriesDetail({
             'flex flex-col space-y-6 md:space-y-px'
           )}
         >
-          {blog?.articles?.map((article) => (
-            <Link href={`/stories/${article.handle}`}>
+          {blog?.articles?.map((article, index) => (
+            <Link href={`/stories/${article.handle}`} key={`${article.handle}-${index}`}>
               <div className="flex flex-col space-y-2 bg-white text-black md:col-span-1 md:flex-row md:space-x-2 md:space-y-0">
                 <div className="relative aspect-[4/3] min-w-full overflow-hidden md:min-w-[480px]">
                   {!!article?.image?.url && (
diff --git a/components/layout/stories.tsx b/components/layout/stories.tsx
index 0b90cd73d..267148ee7 100644
--- a/components/layout/stories.tsx
+++ b/components/layout/stories.tsx
@@ -33,8 +33,8 @@ export default async function Stories({
             'grid grid-cols-1 gap-y-24 md:grid-cols-3 md:gap-x-4'
           )}
         >
-          {blog?.articles?.map((article) => (
-            <Link href={`/stories/${article.handle}`}>
+          {blog?.articles?.map((article, index) => (
+            <Link href={`/stories/${article.handle}`} key={`${article.handle}-${index}`}>
               <div className="flex flex-col space-y-4 md:col-span-1">
                 <div className="relative aspect-square overflow-hidden md:max-w-sm">
                   {!!article?.image?.url && (