From 768128712714966af9f22010e8558aa7f111ad03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Sat, 26 Feb 2022 12:30:55 +0100
Subject: [PATCH] style(dashboard-v2): simplify 'key' props

---
 .../dashboard-v2/src/components/Slider/Bullets.js     | 11 ++++++-----
 packages/dashboard-v2/src/components/Slider/Slider.js |  8 ++++----
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/dashboard-v2/src/components/Slider/Bullets.js b/packages/dashboard-v2/src/components/Slider/Bullets.js
index ab33f64a..b43c66b5 100644
--- a/packages/dashboard-v2/src/components/Slider/Bullets.js
+++ b/packages/dashboard-v2/src/components/Slider/Bullets.js
@@ -9,11 +9,12 @@ export default function Bullets({ visibleSlides, activeIndex, allSlides, changeS
     <div className="flex gap-3 pt-6">
       {Array(allSlides - visibleSlides + 1)
         .fill(null)
-        .map((_, i) => (
-          <span
-            key={`slider-bullets-${i}`}
-            className={`rounded-full w-3 h-3 ${activeIndex === i ? "bg-primary" : "border-2 cursor-pointer"}`}
-            onClick={() => changeSlide(i)}
+        .map((_, index) => (
+          <button
+            key={index}
+            type="button"
+            className={`rounded-full w-3 h-3 ${activeIndex === index ? "bg-primary" : "border-2 cursor-pointer"}`}
+            onClick={() => changeSlide(index)}
           />
         ))}
     </div>
diff --git a/packages/dashboard-v2/src/components/Slider/Slider.js b/packages/dashboard-v2/src/components/Slider/Slider.js
index 9439e79f..6e194436 100644
--- a/packages/dashboard-v2/src/components/Slider/Slider.js
+++ b/packages/dashboard-v2/src/components/Slider/Slider.js
@@ -55,14 +55,14 @@ const Slider = ({ slides, breakpoints }) => {
         $activeIndex={activeIndex}
         $scrollable={scrollable}
       >
-        {slides.map((slide, i) => {
-          const isVisible = i >= activeIndex && i < activeIndex + visibleSlides;
+        {slides.map((slide, index) => {
+          const isVisible = index >= activeIndex && index < activeIndex + visibleSlides;
 
           return (
-            <div key={`slide-${i}`}>
+            <div key={`slide-${index}`}>
               <Slide
                 isVisible={isVisible || !scrollable}
-                onClick={scrollable && !isVisible ? () => changeSlide(i) : null}
+                onClick={scrollable && !isVisible ? () => changeSlide(index) : null}
               >
                 {slide}
               </Slide>