delete page init

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

@@ -79,6 +79,18 @@ export default function PageHeaderModelView({
           </div>
         </Panel>
       )}
+
+      {view === "delete" && (
+        <Panel padding>
+          <div className="d-flex">
+            <div className="flex-grow-1">
+              <h2 className="fw-bold mb-0">
+                {icon}Delete {modelType} Model
+              </h2>
+            </div>
+          </div>
+        </Panel>
+      )}
     </div>
   );
 }

packages/fakeyou.com/src/v2/view/PageContainer.tsx

@@ -80,6 +80,7 @@ import { CommunityCommissionsPage } from "./pages/contest/CommunityCommissionsPa
 import { ProductUsageInfoPage } from "./pages/product_usage_info/ProductUsageInfoPage";
 import VcModelViewPage from "./pages/vc/vc_model_view/VcModelViewPage";
 import VcModelEditPage from "./pages/vc/vc_model_edit/VcModelEditPage";
+import VcModelDeletePage from "./pages/vc/vc_model_delete/VcModelDeletePage";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -503,6 +504,10 @@ class PageContainer extends React.Component<Props, State> {
               />
             </Route>
 
+            <Route path="/voice-conversion/:token/delete">
+              <VcModelDeletePage sessionWrapper={this.props.sessionWrapper} />
+            </Route>
+
             <Route path="/voice-conversion/:token/edit">
               <VcModelEditPage sessionWrapper={this.props.sessionWrapper} />
             </Route>

packages/fakeyou.com/src/v2/view/pages/vc/VoiceDetails.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+interface VoiceDetailsProps {}
+
+export default function VoiceDetails(props: VoiceDetailsProps) {
+  return <div>VoiceDetails</div>;
+}

packages/fakeyou.com/src/v2/view/pages/vc/vc_model_delete/VcModelDeletePage.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
+import { useParams } from "react-router-dom";
+import Panel from "components/common/Panel/Panel";
+import { faSave, faTrash } from "@fortawesome/pro-solid-svg-icons";
+import PageHeaderModelView from "components/layout/PageHeaderModelView/PageHeaderModelView";
+import Button from "components/common/Button/Button";
+import PageContainer from "components/common/PageContainer/PageContainer";
+
+interface VcModelDeletePageProps {
+  sessionWrapper: SessionWrapper;
+}
+
+const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  console.log(event.target.value);
+};
+
+const handleSave = (e: React.MouseEvent<HTMLButtonElement>) => {
+  console.log("save");
+};
+
+const savebtn = <button className="btn btn-primary">Save Changes</button>;
+
+export default function VcModelDeletePage(props: VcModelDeletePageProps) {
+  let { token } = useParams() as { token: string };
+  return (
+    <PageContainer>
+      <PageHeaderModelView
+        title="Solid Snake"
+        subText="Solid Snake"
+        view="delete"
+        titleIcon={faTrash}
+        extras={savebtn}
+        modelType="V2V"
+      />
+
+      <Panel padding>
+        <div className="d-flex flex-column gap-4">
+          <Button label="Save Changes" icon={faSave} onClick={handleSave} />
+        </div>
+      </Panel>
+    </PageContainer>
+  );
+}

packages/fakeyou.com/src/v2/view/pages/vc/vc_model_edit/VcModelEditPage.tsx

@@ -64,7 +64,7 @@ export default function VcModelEditPage(props: VcModelEditPageProps) {
             label="Visibility"
           />
 
-          <Button label="Share Link" icon={faSave} onClick={handleSave} />
+          <Button label="Save Changes" icon={faSave} onClick={handleSave} />
         </div>
       </Panel>
     </PageContainer>