Add preview to content

goat-community · Jul 20, 2023 · 856aafc · 856aafc
1 parent e39a4a9
commit 856aafc
Show file tree

Hide file tree

Showing 7 changed files with 124 additions and 20 deletions.
diff --git a/app/client-v2/apps/goat/app/(dashboard)/content/HeaderStack.tsx b/app/client-v2/apps/goat/app/(dashboard)/content/HeaderStack.tsx
@@ -1,10 +1,12 @@
 "use client";
 
 import { makeStyles } from "@/lib/theme";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import BackupTableIcon from "@mui/icons-material/BackupTable";
 import ColorLensIcon from "@mui/icons-material/ColorLens";
 import MapIcon from "@mui/icons-material/Map";
-import { Stack } from "@mui/material";
+import { Button, Stack, Typography } from "@mui/material";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
 
 import Box from "@p4b/ui/components/Box";
@@ -20,24 +22,37 @@ const useStyles = () =>
       zIndex: "100",
       boxShadow: "0px 2px 4px -1px rgba(0, 0, 0, 0.12)",
     },
+    title: {
+      fontSize: "24px",
+      fontStyle: "normal",
+      fontWeight: 800,
+      lineHeight: "133.4%",
+      color: "#09241A",
+    },
+    breadcrumbsWrapper: {
+      display: "flex",
+      alignItems: "center",
+      gap: "16px",
+    },
   }));
 
 export default function HeaderStack() {
   const [mode, setMode] = useState("map");
   const { classes, cx } = useStyles()();
   // const theme = useTheme();
+  const router = useRouter();
 
   const buttons = [
     {
-      icon: <MapIcon />,
+      icon: <MapIcon sx={{ color: "#09241A" }} />,
       value: "map",
     },
     {
-      icon: <BackupTableIcon />,
+      icon: <BackupTableIcon sx={{ color: "#09241A" }} />,
       value: "table",
     },
     {
-      icon: <ColorLensIcon />,
+      icon: <ColorLensIcon sx={{ color: "#09241A" }} />,
       value: "colorLens",
     },
   ];
@@ -47,15 +62,24 @@ export default function HeaderStack() {
     console.info("You clicked a breadcrumb.");
   };
 
+  const returnHandler = () => {
+    router.push("/home");
+  };
+
   return (
     <Stack className={cx(classes.header)} direction="row" justifyContent="space-between" alignItems="center">
       <Stack
         direction="row"
         alignItems="center"
         justifyContent="space-between"
         sx={{ paddingY: "6px", width: "100%" }}>
-        <Box>Preview</Box>
-        <BasicBreadcrumbs eventHandler={handleChangeBreadCrumb} />
+        <Typography className={cx(classes.title)}>Preview</Typography>
+        <Box className={cx(classes.breadcrumbsWrapper)}>
+          <Button onClick={returnHandler} startIcon={<ArrowBackIcon color="primary" />}>
+            Return
+          </Button>
+          <BasicBreadcrumbs eventHandler={handleChangeBreadCrumb} />
+        </Box>
         <ToggleButtons val={mode} setVal={setMode} items={buttons} />
       </Stack>
     </Stack>

diff --git a/app/client-v2/apps/goat/app/(dashboard)/content/PreviewMap.tsx b/app/client-v2/apps/goat/app/(dashboard)/content/PreviewMap.tsx
@@ -24,6 +24,10 @@ const useStyles = () =>
     root: {
       width: "100%",
       height: "100%",
+      border: "1px solid var(--light-primary-shades-8-p, rgba(43, 179, 129, 0.08))",
+      boxShadow: "0px 2px 4px -1px rgba(0, 0, 0, 0.12)",
+      background: "#FAFAFA",
+      padding: "16px",
     },
   }));
 

diff --git a/app/client-v2/apps/goat/app/(dashboard)/content/PreviewMenu.tsx b/app/client-v2/apps/goat/app/(dashboard)/content/PreviewMenu.tsx
@@ -1,17 +1,39 @@
-import ContentPage from "@/app/(dashboard)/content/page";
 import { makeStyles } from "@/lib/theme";
 import "mapbox-gl/dist/mapbox-gl.css";
 import React from "react";
 
+import BasicAccordion from "@p4b/ui/components/BasicAccordion";
+import { TextField } from "@p4b/ui/components/Text/TextField";
+
 const useStyles = () =>
-  makeStyles({ name: { ContentPage } })(() => ({
+  makeStyles({ name: { PreviewMenu } })(() => ({
     root: {
       width: "280px",
+      borderRadius: "4px",
+      border: "1px solid var(--light-primary-shades-8-p, rgba(43, 179, 129, 0.08))",
+      boxShadow: "0px 2px 4px -1px rgba(0, 0, 0, 0.12)",
+      background: "#FAFAFA",
+      padding: "16px",
+      display: "flex",
+      flexDirection: "column",
+      gap: "16px",
     },
   }));
 
 export default function PreviewMenu() {
   const { classes, cx } = useStyles()();
 
-  return <div className={cx(classes.root)}>Menu</div>;
+  return (
+    <div className={cx(classes.root)}>
+      <TextField id="outlined-basic" label="342423432.xml" variant="outlined" />
+      <BasicAccordion title="Info">
+        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, rem.</div>
+      </BasicAccordion>
+      <BasicAccordion title="Attributes">
+        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, rem.</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, rem.</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, rem.</div>
+      </BasicAccordion>
+    </div>
+  );
 }
diff --git a/app/client-v2/apps/goat/app/(dashboard)/layout.tsx b/app/client-v2/apps/goat/app/(dashboard)/layout.tsx
@@ -108,7 +108,7 @@ const DashboardLayout = ({ children }: DashboardLayoutProps) => {
     <>
       <Toolbar height={52} items={items} />
       <DashboardSidebar items={sidebarItems} width={60} extended_width={200}>
-        <div className={classes.container}>{children}</div>
+        <div className={cx(classes.container)}>{children}</div>
       </DashboardSidebar>
       <Footer
         links={footerLinks}
@@ -120,11 +120,10 @@ const DashboardLayout = ({ children }: DashboardLayoutProps) => {
 
 const useStyles = makeStyles({ name: { DashboardLayout } })(() => ({
   container: {
-    width: "1344px",
+    width: "1168px",
     minHeight: "100vh",
     margin: "0 auto",
     marginTop: "52px",
-    paddingLeft: "200px",
     "@media (max-width: 1714px)": {
       width: "90%",
     },

diff --git a/app/client-v2/packages/ui/components/BasicAccordion.tsx b/app/client-v2/packages/ui/components/BasicAccordion.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import Typography from '@mui/material/Typography';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { ReactNode } from "react";
+import { makeStyles } from "../lib/ThemeProvider";
+
+export type BasicAccordionTypes = {
+  className?: string;
+  title: string;
+  children: NonNullable<ReactNode>;
+};
+
+
+const useStyles = () =>
+  makeStyles({ name: { BasicAccordion } })(() => ({
+    root: {},
+    content: {
+      padding: '0 16px'
+    }
+  }));
+
+export default function BasicAccordion(props: BasicAccordionTypes) {
+
+  const { children, title } = props
+
+  const { classes, cx } = useStyles()();
+
+
+  return (
+    <div className={cx(classes.root)}>
+      <Accordion>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel1a-content"
+          id="panel1a-header"
+          className={cx(classes.content)}
+        >
+          <Typography>{ title }</Typography>
+        </AccordionSummary>
+        <AccordionDetails className={cx(classes.content)}>
+          {children}
+        </AccordionDetails>
+      </Accordion>
+    </div>
+  );
+}
diff --git a/app/client-v2/packages/ui/components/BreadCrumbs.tsx b/app/client-v2/packages/ui/components/BreadCrumbs.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import * as React from 'react';
-import Typography from '@mui/material/Typography';
 import Breadcrumbs from '@mui/material/Breadcrumbs';
 import Link from '@mui/material/Link';
 
@@ -22,17 +21,24 @@ export default function BasicBreadcrumbs(props: BreadcrumbsType) {
   return (
     <div role="presentation" onClick={eventHandler}>
       <Breadcrumbs aria-label="breadcrumb">
-        <Link underline="hover" color="inherit" href="/">
-          MUI
+        <Link
+          underline="hover"
+          href="/"
+        >
+          Home
+        </Link>
+        <Link
+          underline="hover"
+          href="/"
+        >
+          Folder XYZ
         </Link>
         <Link
           underline="hover"
-          color="inherit"
           href="/"
         >
-          Core
+          Link
         </Link>
-        <Typography color="text.primary">Breadcrumbs</Typography>
       </Breadcrumbs>
     </div>
   );

diff --git a/app/client-v2/packages/ui/components/ToggleButtons.tsx b/app/client-v2/packages/ui/components/ToggleButtons.tsx
@@ -23,14 +23,14 @@ export default function ToggleButtons(props: ToggleButtonsType) {
 
   return (
     <ToggleButtonGroup
-      color="primary"
+      color="secondary"
       value={val}
       exclusive
       onChange={(e, newVal) => setVal(newVal)}
       aria-label="Platform"
       className={className || ''}
     >
-      {items?.map(item => <ToggleButton value={item.value}>{item.icon}</ToggleButton>)}
+      {items?.map(item => <ToggleButton key={`toggleButton-${item.value}`} value={item.value}>{item.icon}</ToggleButton>)}
     </ToggleButtonGroup>
   );
 }