refactor: compare hero

Signed-off-by: Jad Chahed <[email protected]>
vitessio · Jul 4, 2024 · 91fec98 · 91fec98
1 parent bca9c73
commit 91fec98
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 86 deletions.
diff --git a/website/src/pages/ComparePage/ComparePage.tsx b/website/src/pages/ComparePage/ComparePage.tsx
@@ -20,8 +20,7 @@ import RingLoader from "react-spinners/RingLoader";
 import useApiCall from "../../utils/Hook";
 import Macrobench from "../../common/Macrobench";
 import { CompareData } from '@/types'
-import Hero, { HeroProps } from "@/common/Hero";
-import { twMerge } from "tailwind-merge";
+import CompareHero from "./components/CompareHero";
 
 export default function Compare() {
   const urlParams = new URLSearchParams(window.location.search);
@@ -46,63 +45,9 @@ export default function Compare() {
     navigate(`?old=${gitRef.old}&new=${gitRef.new}`);
   }, [gitRef.old, gitRef.new]);
 
-  function ComparisonInput(props: {
-    className: any;
-    gitRef: any;
-    setGitRef: any;
-    name: any;
-  }) {
-    const { className, gitRef, setGitRef, name } = props;
-
-    return (
-      <input
-        type="text"
-        name={name}
-        className={twMerge(
-          className,
-          "relative text-xl px-6 py-2 bg-background focus:border-none focus:outline-none border border-primary"
-        )}
-        defaultValue={gitRef[name]}
-        placeholder={`${name} SHA`}
-        onChange={(event) =>
-          setGitRef((p: any) => {
-            return { ...p, [name]: event.target.value };
-          })
-        }
-      />
-    );
-  }
-
-  const heroProps: HeroProps = {
-    title: "Compare versions",
-    children: (
-      <div>
-        <h1 className="mb-3 text-front text-opacity-70">
-          Enter SHAs to compare commits
-        </h1>
-        <div className="flex overflow-hidden bg-gradient-to-br from-primary to-theme p-[2px] rounded-full">
-          <ComparisonInput
-            name="old"
-            className="rounded-l-full"
-            setGitRef={setGitRef}
-            gitRef={gitRef}
-          />
-          <ComparisonInput
-            name="new"
-            className="rounded-r-full "
-            setGitRef={setGitRef}
-            gitRef={gitRef}
-          />
-        </div>
-      </div>
-    )
-  };
-
   return (
     <>
-      <Hero title={heroProps.title} description={heroProps.description}>
-        {heroProps.children}
-      </Hero>
+      <CompareHero gitRef={gitRef} setGitRef={setGitRef} />
       {macrobenchError && (
         <div className="text-red-500 text-center my-2">{macrobenchError}</div>
       )}

diff --git a/website/src/pages/ComparePage/components/CompareHero.tsx b/website/src/pages/ComparePage/components/CompareHero.tsx
@@ -17,38 +17,11 @@ import React from "react";
 import { twMerge } from "tailwind-merge";
 import Hero, { HeroProps } from "@/common/Hero";
 
+
 const heroProps: HeroProps = {
-  title: "Compare versions",
+  title: "Compare versions"
 };
 
-export default function CompareHero(props: { gitRef: any; setGitRef: any }) {
-  const { gitRef, setGitRef } = props;
-
-  return (
-    <Hero title={heroProps.title}>
-      <div>
-        <h1 className="mb-3 text-front text-opacity-70">
-          Enter SHAs to compare commits
-        </h1>
-        <div className="flex overflow-hidden bg-gradient-to-br from-primary to-theme p-[2px] rounded-full">
-          <ComparisonInput
-            name="old"
-            className="rounded-l-full"
-            setGitRef={setGitRef}
-            gitRef={gitRef}
-          />
-          <ComparisonInput
-            name="new"
-            className="rounded-r-full "
-            setGitRef={setGitRef}
-            gitRef={gitRef}
-          />
-        </div>
-      </div>
-    </Hero>
-  );
-}
-
 function ComparisonInput(props: {
   className: any;
   gitRef: any;
@@ -75,3 +48,31 @@ function ComparisonInput(props: {
     />
   );
 }
+
+export default function CompareHero(props: { gitRef: any; setGitRef: any }) {
+  const { gitRef, setGitRef } = props;
+
+  return (
+    <Hero title={heroProps.title}>
+      <div>
+        <h1 className="mb-3 text-front text-opacity-70">
+          Enter SHAs to compare commits
+        </h1>
+        <div className="flex overflow-hidden bg-gradient-to-br from-primary to-theme p-[2px] rounded-full">
+          <ComparisonInput
+            name="old"
+            className="rounded-l-full"
+            setGitRef={setGitRef}
+            gitRef={gitRef}
+          />
+          <ComparisonInput
+            name="new"
+            className="rounded-r-full "
+            setGitRef={setGitRef}
+            gitRef={gitRef}
+          />
+        </div>
+      </div>
+    </Hero>
+  );
+}