Use arrow icon

UTDNebula · Sep 4, 2023 · 6c71c40 · 6c71c40
1 parent 3380d72
commit 6c71c40
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/public/testimonials/arrow-button.svg b/public/testimonials/arrow-button.svg
diff --git a/src/components/Testimonials.tsx b/src/components/Testimonials.tsx
@@ -1,4 +1,5 @@
 import Image from "next/image";
+import ArrowButton from "@/../public/testimonials/arrow-button.svg";
 import Amrit from "@/../public/testimonials/amrit.png";
 import JC from "@/../public/testimonials/jc.png";
 import Kevin from "@/../public/testimonials/kevin.png";
@@ -42,10 +43,14 @@ const Testimonials = () => (
                     {t.name}, {t.classification}
                     </h3>
 
-                    <span className="flex gap-2 mt-auto mb-8 md:mb-0 md:mt-0 place-self-end md:absolute md:bottom-0">
-                        <a href={`#testimonial-${Math.max(0, idx-1)}`}>prev</a>
-                        <p>{idx+1}/{arr.length}</p>
-                        <a href={`#testimonial-${Math.min(arr.length-1, idx+1)}`}>next</a>
+                    <span className="flex gap-3 mt-auto mb-8 md:mb-0 md:mt-0 place-self-end md:absolute md:bottom-0 items-center">
+                        <a href={`#testimonial-${Math.max(0, idx-1)}`}>
+                            <Image src={ArrowButton} alt="arrow" />
+                        </a>
+                        <p className="h-min">{idx+1}/{arr.length}</p>
+                        <a href={`#testimonial-${Math.min(arr.length-1, idx+1)}`}>
+                            <Image src={ArrowButton} alt="arrow" className="rotate-180"  />
+                        </a>
                     </span>
                 </span>
             </div>