From 45d9a9c7b7fb6ea234912cf85f1cbd47f2f0020e Mon Sep 17 00:00:00 2001
From: Alvaro <pursuance@gmail.com>
Date: Mon, 28 Oct 2024 10:14:57 +0100
Subject: [PATCH] Add better key names

---
 src/components/globe-map/globe-group.tsx   | 2 +-
 src/components/section-1/index.tsx         | 3 ++-
 src/components/section-3/index.tsx         | 2 +-
 src/components/vertical-carousel/index.tsx | 4 +++-
 4 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/globe-map/globe-group.tsx b/src/components/globe-map/globe-group.tsx
index 01fba93..17044dd 100644
--- a/src/components/globe-map/globe-group.tsx
+++ b/src/components/globe-map/globe-group.tsx
@@ -30,7 +30,7 @@ const GlobeGroup = ({ hasMarkers, markers, selectedMarker, setEnabled, setSelect
       {
         hasMarkers && markers.map((marker, index) => (
           <Marker
-            key={index}
+            key={`globe-marker-${index}`}
             index={markers.indexOf(marker)}
             id={marker.id}
             isSelected={selectedMarker === markers.indexOf(marker)}
diff --git a/src/components/section-1/index.tsx b/src/components/section-1/index.tsx
index 49c8d1d..d67559f 100644
--- a/src/components/section-1/index.tsx
+++ b/src/components/section-1/index.tsx
@@ -67,7 +67,8 @@ export default function Section1() {
           </div> : <div className={cn("flex w-full h-[480px] overflow-hidden mb-10", gridColumns)}>
             <AnimatePresence>
               {Array(3).fill(null).map((_, index) => (
-                <motion.div key={index}
+                <motion.div
+                  key={`image-section1-${index}`}
                   initial={{ opacity: 0, width: 0 }}
                   animate={{ opacity: 1, width: 'auto' }}
                   transition={{ delay: 0.5 + index * 1, duration: 1, ease: "easeInOut" }}
diff --git a/src/components/section-3/index.tsx b/src/components/section-3/index.tsx
index e0125ba..e26f5bf 100644
--- a/src/components/section-3/index.tsx
+++ b/src/components/section-3/index.tsx
@@ -233,7 +233,7 @@ export default function Section3() {
         </div> : <div className={cn("flex w-full h-[498px] overflow-hidden", gridColumns)}>
           <AnimatePresence>
             {Array(5).fill(null).map((_, index) => (
-              <motion.div key={index}
+              <motion.div key={`image-section-3-${index}`}
                 initial={{ opacity: 0, width: 0 }}
                 animate={{ opacity: 1, width: 'auto' }}
                 transition={{ delay: 0.5 + index * 1, duration: 1, ease: "easeInOut" }}
diff --git a/src/components/vertical-carousel/index.tsx b/src/components/vertical-carousel/index.tsx
index 8624b0a..2473f6c 100644
--- a/src/components/vertical-carousel/index.tsx
+++ b/src/components/vertical-carousel/index.tsx
@@ -35,7 +35,9 @@ const VerticalCarousel = ({ children, className }:
         <AnimatePresence initial={false}>
           {content.map((child, i) => (
             i === index && (
-              <motion.div key={`carousel-item-${i}`} className="absolute w-full"
+              <motion.div
+                key={`carousel-item-${i}`}
+                className="absolute w-full"
                 variants={contentAnimation}
                 initial="initial"
                 animate="animate"