From 70d93140e707de446f4ade9d4c04832079b4eaa2 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Sun, 5 Feb 2023 21:34:34 +0700
Subject: [PATCH] made page header reusable

---
 .../src/v2/view/_common/PageHeader.tsx        |  47 ++++++++
 .../pages/tts/tts_model_list/TtsPageHero.tsx  | 100 +++++++++++-------
 2 files changed, 111 insertions(+), 36 deletions(-)
 create mode 100644 packages/fakeyou.com/src/v2/view/_common/PageHeader.tsx

diff --git a/packages/fakeyou.com/src/v2/view/_common/PageHeader.tsx b/packages/fakeyou.com/src/v2/view/_common/PageHeader.tsx
new file mode 100644
index 0000000000..f05a0e7e5c
--- /dev/null
+++ b/packages/fakeyou.com/src/v2/view/_common/PageHeader.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import { motion } from "framer-motion";
+import { image } from "../../../data/animation";
+
+interface Props {
+  headerImage: string;
+  titleIcon: JSX.Element;
+  title: JSX.Element;
+  subtext: JSX.Element;
+  showButtons: boolean;
+  actionButtons?: JSX.Element;
+}
+
+function PageHeader(props: Props) {
+  return (
+    <div className="container-panel hero-section pt-4 pt-lg-5 pb-5">
+      <div className="panel">
+        <div className="row gx-3 flex-md-row-reverse">
+          <div className="col-12 col-md-5 hero-img-container d-none d-md-block">
+            <motion.img
+              src={props.headerImage}
+              className="hero-img"
+              alt="Hero Image"
+              variants={image}
+            />
+          </div>
+          <div className="col-12 col-md-7">
+            <div className="p-3 py-4 p-md-4">
+              <h1 className="fw-bold text-center text-md-start">
+                {props.titleIcon}
+                {props.title}
+              </h1>
+              <p className="text-center text-md-start">{props.subtext}</p>
+              {props.showButtons && (
+                <div className="d-flex flex-column flex-md-row gap-3 justify-content-center justify-content-md-start mt-4">
+                  {props.actionButtons}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export { PageHeader };
diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx
index bcf4d3b03d..74440f23d8 100644
--- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx
@@ -11,10 +11,9 @@ import {
   faArrowRight,
   faWaveformLines,
 } from "@fortawesome/pro-solid-svg-icons";
-import { image } from "../../../../../data/animation";
-import { motion } from "framer-motion";
 import { Analytics } from "../../../../../common/Analytics";
 import { WebUrl } from "../../../../../common/WebUrl";
+import { PageHeader } from "../../../_common/PageHeader";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -114,40 +113,69 @@ export function TtsPageHero(props: Props) {
     }
   }
 
+  const titleIcon = <FontAwesomeIcon icon={faWaveformLines} className="me-3" />;
+  const title = <>{t("tts.TtsModelListPage.heroSection.title")}</>;
+  const subtext = (
+    <>
+      <Trans i18nKey="tts.TtsModelListPage.heroSection.subtitle">
+        Use FakeYou's deepfake tech to say stuff with your favorite characters.
+      </Trans>
+    </>
+  );
+  const actionButtons = (
+    <>
+      {upgradeButton}
+      {signUpButton}
+      {viewPricingButton}
+      {myProfileButton}
+    </>
+  );
+
   return (
-    <div className="container-panel hero-section pt-4 pt-lg-5 pb-5">
-      <div className="panel">
-        <div className="row gx-3 flex-md-row-reverse">
-          <div className="col-12 col-md-5 hero-img-container d-none d-md-block">
-            <motion.img
-              src={randomImage}
-              className="hero-img"
-              alt="FakeYou Mascot"
-              variants={image}
-            />
-          </div>
-          <div className="col-12 col-md-7">
-            <div className="p-3 py-4 p-md-4">
-              <h1 className="fw-bold text-center text-md-start">
-                <FontAwesomeIcon icon={faWaveformLines} className="me-3" />
-                {t("tts.TtsModelListPage.heroSection.title")}
-              </h1>
-              <p className="text-center text-md-start">
-                <Trans i18nKey="tts.TtsModelListPage.heroSection.subtitle">
-                  Use FakeYou's deepfake tech to say stuff with your favorite
-                  characters.
-                </Trans>
-              </p>
-              <div className="d-flex flex-column flex-md-row gap-3 justify-content-center justify-content-md-start mt-4">
-                {upgradeButton}
-                {signUpButton}
-                {viewPricingButton}
-                {myProfileButton}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+    <>
+      <PageHeader
+        headerImage={randomImage}
+        titleIcon={titleIcon}
+        title={title}
+        subtext={subtext}
+        showButtons={true}
+        actionButtons={actionButtons}
+      />
+    </>
+
+    // <div className="container-panel hero-section pt-4 pt-lg-5 pb-5">
+    //   <div className="panel">
+    //     <div className="row gx-3 flex-md-row-reverse">
+    //       <div className="col-12 col-md-5 hero-img-container d-none d-md-block">
+    //         <motion.img
+    //           src={randomImage}
+    //           className="hero-img"
+    //           alt="FakeYou Mascot"
+    //           variants={image}
+    //         />
+    //       </div>
+    //       <div className="col-12 col-md-7">
+    //         <div className="p-3 py-4 p-md-4">
+    //           <h1 className="fw-bold text-center text-md-start">
+    //             <FontAwesomeIcon icon={faWaveformLines} className="me-3" />
+    //             {t("tts.TtsModelListPage.heroSection.title")}
+    //           </h1>
+    //           <p className="text-center text-md-start">
+    //             <Trans i18nKey="tts.TtsModelListPage.heroSection.subtitle">
+    //               Use FakeYou's deepfake tech to say stuff with your favorite
+    //               characters.
+    //             </Trans>
+    //           </p>
+    //           <div className="d-flex flex-column flex-md-row gap-3 justify-content-center justify-content-md-start mt-4">
+    //             {upgradeButton}
+    //             {signUpButton}
+    //             {viewPricingButton}
+    //             {myProfileButton}
+    //           </div>
+    //         </div>
+    //       </div>
+    //     </div>
+    //   </div>
+    // </div>
   );
 }