🎨 refactor scroll buttons into own component

UoaWDCC · Oct 5, 2024 · 358e334 · 358e334
1 parent 355e01a
commit 358e334
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 46 deletions.
diff --git a/next/components/home/CarouselBase.tsx b/next/components/home/CarouselBase.tsx
@@ -1,6 +1,7 @@
 "use client";
 import useEmblaCarousel from "embla-carousel-react";
 import React, { useCallback } from "react";
+import ScrollButtons from "./ScrollButtons";
 
 export default function CarouselBase({
   children,
@@ -24,52 +25,7 @@ export default function CarouselBase({
     <div>
       <div className="text-blue-800 font-semibold text-4xl pr-6 pt-28 flex flex-col sm:flex-row justify-between">
         <p className="text-center sm:text-left sm:mb-0 mb-5">Upcoming Events</p>
-        <div className="flex justify-center -mb-10 sm:-mb-5 md:-mb-0">
-          <button className="-mr-0.5" onClick={scrollPrev}>
-            <svg
-              width="77"
-              height="41"
-              viewBox="0 0 77 41"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M0.324324 15.5676C0.324324 7.14896 7.14896 0.324324 15.5676 0.324324H76.1707V40.5993H15.5676C7.14897 40.5993 0.324324 33.7746 0.324324 25.356V15.5676Z"
-                stroke="#014788"
-                strokeWidth="0.648649"
-              />
-              <path
-                d="M31.6088 25.311L26.4785 19.9856L31.6088 14.6602M27.1911 19.9856H47.3353"
-                stroke="#014788"
-                strokeWidth="1.88514"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
-          </button>
-          <button onClick={scrollNext}>
-            <svg
-              width="78"
-              height="41"
-              viewBox="0 0 78 41"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M1.23253 0.324324H61.8356C70.2542 0.324324 77.0789 7.14896 77.0789 15.5676V25.356C77.0789 33.7746 70.2542 40.5993 61.8356 40.5993H1.23253V0.324324Z"
-                stroke="#014788"
-                strokeWidth="0.648649"
-              />
-              <path
-                d="M45.0494 14.1265L50.1797 19.4519L45.0494 24.7773M49.4671 19.4519L29.3229 19.4519"
-                stroke="#014788"
-                strokeWidth="1.88514"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
-          </button>
-        </div>
+        <ScrollButtons scrollPrev={scrollPrev} scrollNext={scrollNext} />
       </div>
       <div className={`overflow-hidden ${wrapperClass}`} ref={emblaRef}>
         <div

diff --git a/next/components/home/ScrollButtons.tsx b/next/components/home/ScrollButtons.tsx
@@ -0,0 +1,47 @@
+type ScrollButtonsProps = {
+  scrollPrev: () => void;
+  scrollNext: () => void;
+};
+
+export default function ScrollButtons({
+  scrollPrev,
+  scrollNext,
+}: ScrollButtonsProps) {
+  return (
+    <div className="flex justify-center -mb-10 sm:-mb-5 md:-mb-0">
+      <button className="-mr-0.5" onClick={scrollPrev}>
+        <ScrollButtonGraphic />
+      </button>
+      <button className="rotate-180" onClick={scrollNext}>
+        <ScrollButtonGraphic />
+      </button>
+    </div>
+  );
+}
+
+function ScrollButtonGraphic() {
+  return (
+    <svg
+      width="77"
+      height="41"
+      viewBox="0 0 77 41"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      {/* 'D' Container */}
+      <path
+        d="M0.324324 15.5676C0.324324 7.14896 7.14896 0.324324 15.5676 0.324324H76.1707V40.5993H15.5676C7.14897 40.5993 0.324324 33.7746 0.324324 25.356V15.5676Z"
+        stroke="#014788"
+        strokeWidth="0.648649"
+      />
+      {/* Arrow */}
+      <path
+        d="M31.6088 25.311L26.4785 19.9856L31.6088 14.6602M27.1911 19.9856H47.3353"
+        stroke="#014788"
+        strokeWidth="1.88514"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}