voice designer header updates

packages/fakeyou.com/src/components/common/BackButton/BackButton.tsx

@@ -1,13 +1,14 @@
 import React from "react";
 import Button from "../Button";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowLeft } from "@fortawesome/pro-solid-svg-icons";
 
 interface BackButtonProps {
   onClick?: () => void;
+  to?: string;
+  label?: string;
 }
 
-const BackButton: React.FC<BackButtonProps> = ({ onClick }) => {
+const BackButton: React.FC<BackButtonProps> = ({ onClick, to, label }) => {
   const handleBack = () => {
     if (onClick) {
       onClick();
@@ -16,10 +17,21 @@ const BackButton: React.FC<BackButtonProps> = ({ onClick }) => {
     }
   };
 
+  if (to) {
+    return (
+      <Button
+        icon={faArrowLeft}
+        label={label ? label : "Back"}
+        variant="link"
+        to={to}
+      />
+    );
+  }
+
   return (
     <Button
       icon={faArrowLeft}
-      label="Back"
+      label={label ? label : "Back"}
       variant="link"
       onClick={handleBack}
     />

packages/fakeyou.com/src/components/common/Panel/Panel.tsx

@@ -19,12 +19,10 @@ export default function Panel({
 }: PanelProps) {
   return (
     <div
-      className={`panel ${clear && "panel-clear"} ${
+      className={`panel ${clear ? "panel-clear" : "overflow-hidden"} ${
         padding ? "p-3 py-4 p-md-4" : ""
       }
-        ${mb ? "mb-4" : ""} ${mt ? "mt-4" : ""} overflow-hidden ${
-        className || ""
-      }`}
+        ${mb ? "mb-4" : ""} ${mt ? "mt-4" : ""} ${className || ""}`}
     >
       {children}
     </div>

packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx

@@ -3,6 +3,7 @@ import Panel from "../../common/Panel";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import Button from "components/common/Button";
+import BackButton from "components/common/BackButton";
 
 interface PageHeaderProps {
   titleIcon?: IconDefinition;
@@ -16,8 +17,11 @@ interface PageHeaderProps {
   buttonTo?: string;
   buttonIcon?: IconDefinition;
   buttonOnClick?: () => void;
-  withImage?: boolean;
+  panel?: boolean;
   imageUrl?: string;
+  showBackButton?: boolean;
+  backbuttonTo?: string;
+  backbuttonLabel?: string;
 }
 
 export default function PageHeader({
@@ -32,19 +36,27 @@ export default function PageHeader({
   buttonTo,
   buttonIcon,
   buttonOnClick,
-  withImage,
+  panel = false,
   imageUrl,
+  showBackButton,
+  backbuttonTo,
+  backbuttonLabel,
 }: PageHeaderProps) {
   const icon = (
     <>{titleIcon && <FontAwesomeIcon icon={titleIcon} className="me-3" />}</>
   );
 
-  if (withImage) {
+  if (!panel) {
     return (
-      <div className="pt-3 pb-4 pt-lg-4">
+      <div className="py-3 py-lg-4">
         <Panel clear={true}>
+          {showBackButton && (
+            <div className="d-flex mb-3">
+              <BackButton label={backbuttonLabel} to={backbuttonTo} />
+            </div>
+          )}
           <div className="row">
-            <div className="d-flex flex-column col-lg-7 justify-content-center gap-4">
+            <div className="d-flex flex-column col-lg-7 justify-content-center gap-4 py-3">
               <div>
                 <h1 className="fw-bold">
                   {/* {icon} */}
@@ -66,7 +78,12 @@ export default function PageHeader({
             </div>
             <div className="d-none d-lg-block col-lg-5">
               {imageUrl && (
-                <img src={imageUrl} alt="Header" className="img-fluid my-3" />
+                <img
+                  src={imageUrl}
+                  alt="Header"
+                  className="img-fluid my-3"
+                  height="235"
+                />
               )}
             </div>
           </div>

packages/fakeyou.com/src/v2/view/pages/tts/tts_model_search/TtsModelSearchPage.tsx

@@ -139,11 +139,12 @@ export default function TtsModelSearchPage(props: TtsModelSearchPageProps) {
         title="Text to Speech"
         titleIcon={faMessageDots}
         subText="Turn text into your favorite character's voice."
-        showButton={true}
-        buttonLabel="Create a voice"
-        buttonVariant="secondary"
-        buttonTo="/voice-designer"
+        // showButton={true}
+        // buttonLabel="Create a voice"
+        // buttonVariant="secondary"
+        // buttonTo="/voice-designer"
         extension={searchTts}
+        panel={false}
       />
       <Panel padding={true}>
         <div className="d-flex gap-2 mb-4">

packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx

@@ -10,6 +10,7 @@ import { VoiceDetails } from "./components/steps/VoiceDetails";
 import PageHeader from "components/layout/PageHeader";
 import Container from "components/common/Container";
 import { useHistory } from "react-router-dom";
+import BackButton from "components/common/BackButton";
 
 interface RouteParams {
   dataset_token?: string;
@@ -81,6 +82,10 @@ function VoiceDesignerFormPage() {
             ? "Edit your dataset by uploading more samples to create a new voice"
             : "Add voice details and upload audio samples to clone your voice!"
         }
+        panel={false}
+        showBackButton={true}
+        backbuttonLabel="Back to Voice Designer"
+        backbuttonTo="/voice-designer"
       />
 
       <Panel>

packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx

@@ -14,6 +14,7 @@ function VoiceDesignerMainPage() {
     {
       name: "Donald Trump (45th US President)",
       modelToken: "TM:z7x37sbvb8vc",
+      isCreating: true,
     },
     {
       name: "Spongebob Squarepants (Season 1)",
@@ -47,8 +48,8 @@ function VoiceDesignerMainPage() {
         buttonVariant="primary"
         buttonIcon={faPlus}
         buttonTo="/voice-designer/create"
-        withImage={true}
-        imageUrl="https://app.kits.ai/_next/static/media/vocals-gated-graphic.eb866911.svg"
+        panel={false}
+        imageUrl="/images/header/voice-designer.png"
       />
 
       <Panel>

packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerVoiceEdit.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import { faPlus, faWaveform } from "@fortawesome/pro-solid-svg-icons";
+import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle";
+import Panel from "components/common/Panel";
+import PageHeader from "components/layout/PageHeader";
+import Container from "components/common/Container";
+import { Route, NavLink, Switch, Redirect } from "react-router-dom";
+import ListItems from "./components/ListItems/ListItems";
+
+function VoiceDesignerMainPage() {
+  usePrefixedDocumentTitle("Voice Designer");
+
+  const voicesList = [
+    {
+      name: "Donald Trump (45th US President)",
+      modelToken: "TM:z7x37sbvb8vc",
+      isCreating: true,
+    },
+    {
+      name: "Spongebob Squarepants (Season 1)",
+      modelToken: "TM:z7x37sbvb8vc",
+    },
+  ];
+  const datasetList = [
+    {
+      name: "Donald Trump (45th US President)",
+      modelToken: "dummyToken",
+    },
+  ];
+  const emptyList = [] as any[];
+
+  function MyVoices() {
+    return <ListItems type="voices" data={voicesList} />;
+  }
+
+  function MyDatasets() {
+    return <ListItems type="datasets" data={datasetList} />;
+  }
+
+  return (
+    <Container type="panel">
+      <PageHeader
+        title="Voice Designer"
+        titleIcon={faWaveform}
+        subText="Create your own AI voice by providing audio files of the voice you want to clone."
+        showButton={true}
+        buttonLabel="Create New voice"
+        buttonVariant="primary"
+        buttonIcon={faPlus}
+        buttonTo="/voice-designer/create"
+        panel={false}
+        imageUrl="/images/header/voice-designer.png"
+      />
+
+      <Panel>
+        <nav>
+          <ul className="nav nav-tabs">
+            <div className="d-flex flex-grow-1">
+              <li className="nav-item">
+                <NavLink
+                  to="/voice-designer/voices"
+                  className="nav-link fs-6 px-3 px-lg-4"
+                  activeClassName="active"
+                >
+                  My Voices
+                </NavLink>
+              </li>
+              <li className="nav-item">
+                <NavLink
+                  to="/voice-designer/datasets"
+                  className="nav-link fs-6"
+                  activeClassName="active"
+                >
+                  My Datasets
+                </NavLink>
+              </li>
+            </div>
+          </ul>
+        </nav>
+
+        <div className="p-3 p-lg-4">
+          <Switch>
+            <Route path="/voice-designer/voices" exact component={MyVoices} />
+            <Route
+              path="/voice-designer/datasets"
+              exact
+              component={MyDatasets}
+            />
+            <Redirect to="/voice-designer/voices" />
+          </Switch>
+        </div>
+      </Panel>
+    </Container>
+  );
+}
+
+export { VoiceDesignerMainPage };

packages/fakeyou.com/src/v2/view/pages/voice_designer/components/ListItems/ListItems.tsx

@@ -64,27 +64,43 @@ export default function ListItems({ data, type }: ListItemsProps) {
             </div>
 
             <div className="d-flex">
-              <div className="d-flex gap-2">
-                <Button
-                  label="Edit"
-                  small={true}
-                  variant="secondary"
-                  to={`/voice-designer/dataset/${item.modelToken}/edit`}
-                />
-                <Button
-                  label="Delete"
-                  small={true}
-                  variant="danger"
-                  to={`/voice-designer/dataset/${item.modelToken}/delete`}
-                />
-                {type === "voices" && (
-                  <Button
-                    label="Use Voice"
-                    small={true}
-                    to={`/voice-designer/dataset/${item.modelToken}`}
-                  />
-                )}
-              </div>
+              {item.isCreating ? (
+                <div className="d-flex align-items-center gap-2 py-1">
+                  <p className="fw-medium opacity-75">
+                    Voice is being created...
+                  </p>
+                  <div
+                    className="spinner-border spinner-border-sm text-light"
+                    role="status"
+                  >
+                    <span className="visually-hidden">Loading...</span>
+                  </div>
+                </div>
+              ) : (
+                <>
+                  <div className="d-flex gap-2">
+                    <Button
+                      label="Edit"
+                      small={true}
+                      variant="secondary"
+                      to={`/voice-designer/dataset/${item.modelToken}/edit`}
+                    />
+                    <Button
+                      label="Delete"
+                      small={true}
+                      variant="danger"
+                      to={`/voice-designer/dataset/${item.modelToken}/delete`}
+                    />
+                    {type === "voices" && (
+                      <Button
+                        label="Use Voice"
+                        small={true}
+                        to={`/voice-designer/dataset/${item.modelToken}`}
+                      />
+                    )}
+                  </div>
+                </>
+              )}
             </div>
           </div>
         );