Merge pull request #566 from vitessio/refactor-hero

Refactor Hero

website/src/common/Hero.tsx

@@ -0,0 +1,36 @@
+/*
+Copyright 2024 The Vitess Authors.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { ReactNode } from "react";
+
+export type HeroProps = {
+  title: string;
+  description?: ReactNode;
+  children?: ReactNode;
+};
+
+export default function Hero({ title, description, children }: HeroProps) {
+  return (
+    <section className="flex flex-col items-center p-12">
+      <div className="flex flex-col items-center gap-4 max-w-screen-lg">
+        <h2 className="text-4xl md:text-6xl font-semibold text-primary mb-4">{title}</h2>
+        <p className="md:my-6 leading-loose text-foreground/80">
+          {description}
+        </p>
+        {children}
+      </div>
+    </section>
+  );
+}

website/src/components/ui/button.tsx

@@ -1,3 +1,19 @@
+/*
+Copyright 2024 The Vitess Authors.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"

website/src/components/ui/card.tsx

@@ -0,0 +1,94 @@
+/*
+Copyright 2024 The Vitess Authors.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import * as React from "react"
+import { cn } from "@/library/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

website/src/pages/ComparePage/ComparePage.tsx

@@ -14,14 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import RingLoader from "react-spinners/RingLoader";
-import useApiCall from "../../utils/Hook";
-import Hero from "./components/Hero";
-import Macrobench from "../../common/Macrobench";
+import useApiCall from "@/utils/Hook";
+import Macrobench from "@/common/Macrobench";
 import { CompareData } from '@/types'
-
+import CompareHero from "./components/CompareHero";
+
 export default function Compare() {
   const urlParams = new URLSearchParams(window.location.search);
 
@@ -47,7 +47,7 @@ export default function Compare() {
 
   return (
     <>
-      <Hero gitRef={gitRef} setGitRef={setGitRef} />
+      <CompareHero gitRef={gitRef} setGitRef={setGitRef} />
       {macrobenchError && (
         <div className="text-red-500 text-center my-2">{macrobenchError}</div>
       )}

website/src/pages/ComparePage/components/Hero.tsx → website/src/pages/ComparePage/components/CompareHero.tsx

@@ -13,34 +13,13 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-import React from "react";
-import { twMerge } from "tailwind-merge";
 
-export default function Hero(props: { gitRef: any; setGitRef: any }) {
-  const { gitRef, setGitRef } = props;
+import { twMerge } from "tailwind-merge";
+import Hero, { HeroProps } from "@/common/Hero";
 
-  return (
-    <section className="flex flex-col h-[32vh] pt-[8vh] justify-center items-center">
-      <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>
-    </section>
-  );
-}
+const heroProps: HeroProps = {
+  title: "Compare Versions"
+};
 
 function ComparisonInput(props: {
   className: any;
@@ -68,3 +47,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>
+  );
+}

website/src/pages/DailyPage/DailyPage.tsx

@@ -14,24 +14,24 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import RingLoader from "react-spinners/RingLoader";
 import { useNavigate } from "react-router-dom";
-import useApiCall from "../../utils/Hook";
+import useApiCall from "@/utils/Hook";
 
 import ResponsiveChart from "./components/Chart";
 import DailySummary from "./components/DailySummary";
-import Hero from "./components/Hero";
 import { MacroData, MacroDataValue } from "@/types";
 
-import { secondToMicrosecond } from "../../utils/Utils";
+import { secondToMicrosecond } from "@/utils/Utils";
+import DailyHero from "./components/DailyHero";
 
 interface DailySummarydata {
   name: string;
-  data : { total_qps: MacroDataValue }[];
+  data: { total_qps: MacroDataValue }[];
 }
 
-type NumberDataPoint = { x: string; y: number};
+type NumberDataPoint = { x: string; y: number };
 type StringDataPoint = { x: string; y: string };
 
 type ChartDataItem =
@@ -97,7 +97,7 @@ export default function DailyPage() {
     },
   ];
 
-  const CPUTimeData : { id: string; data: StringDataPoint[] }[]= [
+  const CPUTimeData: { id: string; data: StringDataPoint[] }[] = [
     {
       id: "Total",
       data: [],
@@ -206,36 +206,36 @@ export default function DailyPage() {
     title: string;
     colors: string[];
   }[] = [
-    {
-      data: QPSData,
-      title: "QPS (Queries per second)",
-      colors: ["#fad900", "orange", "brown", "purple"],
-    },
-    {
-      data: TPSData,
-      title: "TPS (Transactions per second)",
-      colors: ["#fad900"],
-    },
-    {
-      data: latencyData,
-      title: "Latency (ms)",
-      colors: ["#fad900"],
-    },
-    {
-      data: CPUTimeData,
-      title: "CPU / query (μs)",
-      colors: ["#fad900", "orange", "brown"],
-    },
-    {
-      data: MemBytesData,
-      title: "Allocated / query (bytes)",
-      colors: ["#fad900", "orange", "brown"],
-    },
-  ];
+      {
+        data: QPSData,
+        title: "QPS (Queries per second)",
+        colors: ["#fad900", "orange", "brown", "purple"],
+      },
+      {
+        data: TPSData,
+        title: "TPS (Transactions per second)",
+        colors: ["#fad900"],
+      },
+      {
+        data: latencyData,
+        title: "Latency (ms)",
+        colors: ["#fad900"],
+      },
+      {
+        data: CPUTimeData,
+        title: "CPU / query (μs)",
+        colors: ["#fad900", "orange", "brown"],
+      },
+      {
+        data: MemBytesData,
+        title: "Allocated / query (bytes)",
+        colors: ["#fad900", "orange", "brown"],
+      },
+    ];
 
   return (
     <>
-      <Hero />
+      <DailyHero />
 
       <figure className="p-page w-full">
         <div className="border-front border" />
@@ -251,7 +251,7 @@ export default function DailyPage() {
         </div>
       )}
 
-      {!errorDailySummary && dataDailySummary && dataDailySummary.length > 0 &&(
+      {!errorDailySummary && dataDailySummary && dataDailySummary.length > 0 && (
         <>
           <section className="flex p-page justif-center flex-wrap gap-10 py-10">
             {dataDailySummary.map((dailySummary, index) => {