refactor: foreig keys hero

Signed-off-by: Jad Chahed <[email protected]>

website/src/pages/ForeignKeysPage/ForeignKeysPage.tsx

@@ -20,10 +20,11 @@ import RingLoader from "react-spinners/RingLoader";
 import { MacrosData } from '@/types'
 
 import { errorApi } from "../../utils/Utils";
-import Hero from "./components/Hero";
+import Hero from "./components/ForeignKeysHero";
 import FK from "./components/FK";
+import ForeignKeysHero from "./components/ForeignKeysHero";
 
-interface Ref {
+export interface Ref {
   Name: string;
   CommitHash: string;
   Version: {
@@ -34,7 +35,7 @@ interface Ref {
   RCnumber: number;
 }
 
-interface ForeignKeysProps {}
+interface ForeignKeysProps { }
 
 const ForeignKeys: React.FC<ForeignKeysProps> = () => {
   const urlParams = new URLSearchParams(window.location.search);
@@ -68,8 +69,7 @@ const ForeignKeys: React.FC<ForeignKeysProps> = () => {
     setLoading(true);
     try {
       const responseFK = await fetch(
-        `${import.meta.env.VITE_API_URL}fk/compare?sha=${
-          commits.tag
+        `${import.meta.env.VITE_API_URL}fk/compare?sha=${commits.tag
         }`
       );
       const jsonDataFKs = await responseFK.json();
@@ -95,7 +95,7 @@ const ForeignKeys: React.FC<ForeignKeysProps> = () => {
 
   return (
     <>
-      <Hero refs={dataRefs} gitRef={gitRef} setGitRef={setGitRef} />
+      <ForeignKeysHero refs={dataRefs} gitRef={gitRef} setGitRef={setGitRef} />
 
       <div className="p-page">
         <div className="border border-front" />

website/src/pages/ForeignKeysPage/components/Hero.tsx → website/src/pages/ForeignKeysPage/components/ForeignKeysHero.tsx

@@ -14,48 +14,51 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import React from "react";
-import Dropdown from "../../../common/Dropdown";
+import Dropdown from "@/common/Dropdown";
+import Hero, { HeroProps } from "@/common/Hero";
 import { twMerge } from "tailwind-merge";
 
-export default function Hero(props: {
+const heroProps: HeroProps = {
+  title: "Foreign Keys",
+  description: (
+    <p className="my-6 leading-loose">
+      Support for Foreign Keys have been added to Vitess in v18.0.0. We want
+      to be able to compare the performance of Vitess with and without
+      Foreign Keys.
+      <br />
+      For this purpose, we propose four benchmarks:
+      <br />
+      - TPCC, with a sharded keyspace
+      <br />
+      - TPCC_UNSHARDED, with an unsharded keyspace
+      <br />
+      - TPCC_FK, with Foreign Keys enabled and set to vitess managed
+      <br />
+      - TPCC_FK_UNMANAGED, with Foreign Keys enabled and set to vitess
+      unmanaged
+      <br />
+      Use the dropdown on the right to select which version of Vitess you
+      would like to use to compare the performance of our four TPCC
+      benchmarks.
+    </p>
+  ),
+};
+
+export default function ForeignKeysHero(props: {
   refs: any;
   gitRef: any;
   setGitRef: any;
 }) {
   const { refs, gitRef, setGitRef } = props;
 
   return (
-    <section className="flex h-[60vh] pt-[10vh] items-center p-page">
-      <div className="flex basis-1/2 flex-col">
-        <h2 className="text-8xl text-primary">Foreign Keys</h2>
-        <p className="my-6 leading-loose">
-          Support for Foreign Keys have been added to Vitess in v18.0.0. We want
-          to be able to compare the performance of Vitess with and without
-          Foreign Keys.
-          <br />
-          For this purpose, we propose four benchmarks:
-          <br />
-          - TPCC, with a sharded keyspace
-          <br />
-          - TPCC_UNSHARDED, with an unsharded keyspace
-          <br />
-          - TPCC_FK, with Foreign Keys enabled and set to vitess managed
-          <br />
-          - TPCC_FK_UNMANAGED, with Foreign Keys enabled and set to vitess
-          unmanaged
-          <br />
-          Use the dropdown on the right to select which version of Vitess you
-          would like to use to compare the performance of our four TPCC
-          benchmarks.
-        </p>
-      </div>
-
+    <Hero title={heroProps.title} description={heroProps.description}>
       <div className="flex-1 flex flex-col items-center">
         <div className="flex flex-col gap-y-8">
           {refs && refs.length > 0 && (
             <div className="flex gap-x-24">
               <Dropdown.Container
-                className="w-[20vw] py-2 border border-primary rounded-md mb-[1px] text-lg shadow-xl"
+                className="w-[30vw] md:w-[20vw] py-2 border border-primary rounded-md mb-[1px] text-lg shadow-xl"
                 defaultIndex={refs
                   .map((r: { Name: any }) => r.Name)
                   .indexOf(gitRef.tag)}
@@ -82,6 +85,6 @@ export default function Hero(props: {
           )}
         </div>
       </div>
-    </section>
+    </Hero>
   );
 }