panel and page container components

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

@@ -0,0 +1,24 @@
+import { container } from "data/animation";
+import { motion } from "framer-motion";
+import React from "react";
+
+interface PageContainerProps {
+  children: React.ReactNode;
+  padding?: boolean;
+}
+
+export default function PageContainer({
+  children,
+  padding,
+}: PageContainerProps) {
+  return (
+    <motion.div
+      initial="hidden"
+      animate="visible"
+      variants={container}
+      className={`${padding ? "container" : ""}`}
+    >
+      {children}
+    </motion.div>
+  );
+}

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

@@ -6,17 +6,17 @@ interface PanelProps {
   children: React.ReactNode;
   padding?: boolean;
   mb?: boolean;
+  mt?: boolean;
 }
 
-export default function Panel(props: PanelProps) {
+export default function Panel({ children, padding, mb, mt }: PanelProps) {
   return (
     <motion.div className="container-panel" variants={panel}>
       <div
-        className={`panel ${props.padding ? "p-3 py-4 p-md-4" : ""} ${
-          props.mb ? "mb-4" : ""
-        }`}
+        className={`panel ${padding ? "p-3 py-4 p-md-4" : ""}
+        ${mb ? "mb-4" : ""} ${mt ? "mt-4" : ""}`}
       >
-        {props.children}
+        {children}
       </div>
     </motion.div>
   );

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

@@ -6,6 +6,7 @@ import Panel from "components/common/Panel/Panel";
 import { faEye, faFilePen, faSave } 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 VcModelEditPageProps {
   sessionWrapper: SessionWrapper;
@@ -29,7 +30,7 @@ const visibility = [
 export default function VcModelEditPage(props: VcModelEditPageProps) {
   let { token } = useParams() as { token: string };
   return (
-    <div>
+    <PageContainer>
       <PageHeaderModelView
         title="Solid Snake"
         subText="Solid Snake"
@@ -66,6 +67,6 @@ export default function VcModelEditPage(props: VcModelEditPageProps) {
           <Button label="Share Link" icon={faSave} onClick={handleSave} />
         </div>
       </Panel>
-    </div>
+    </PageContainer>
   );
 }

packages/fakeyou.com/src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx

@@ -20,6 +20,7 @@ import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapp
 import { RatingButtons } from "v2/view/_common/ratings/RatingButtons";
 import { RatingStats } from "v2/view/_common/ratings/RatingStats";
 import ShareButton from "components/common/ShareButton/ShareButton";
+import PageContainer from "components/common/PageContainer/PageContainer";
 
 interface VcModelViewPageProps {
   sessionWrapper: SessionWrapper;
@@ -81,7 +82,7 @@ export default function VcModelViewPage(props: VcModelViewPageProps) {
   const shareButton = <ShareButton url={shareUrl} />;
 
   return (
-    <div>
+    <PageContainer>
       <PageHeaderModelView
         title={title}
         subText={subText}
@@ -159,6 +160,6 @@ export default function VcModelViewPage(props: VcModelViewPageProps) {
           sessionWrapper={props.sessionWrapper}
         />
       </Panel>
-    </div>
+    </PageContainer>
   );
 }