Workspace stub

coder · bryphe-coder · Jan 27, 2022 · Jan 29, 2022 · Jan 31, 2022 · Jan 31, 2022
commit a512f16a5dcce418f049491a969f85f7248f2486
diff --git a/site/components/Workspace/Workspace.tsx b/site/components/Workspace/Workspace.tsx
@@ -0,0 +1,62 @@
+import Paper from "@material-ui/core/Paper"
+import { makeStyles } from "@material-ui/core/styles"
+import React from "react"
+
+import * as API from "../../api"
+
+export interface WorkspaceProps {
+  workspace: API.Workspace
+}
+
+export const Workspace: React.FC<WorkspaceProps> = ({ workspace }) => {
+  const styles = useStyles()
+
+  return <div className={styles.root}>
+    <Paper elevation={0} className={styles.section}>
+      <div>Hello</div>
+    </Paper>
+    <div className={styles.horizontal}>
+      <Paper elevation={0} className={styles.sideBar}>
+        <div>Apps</div>
+      </Paper>
+      <Paper elevation={0} className={styles.main}>
+        <div>Build stuff</div>
+      </Paper>
+    </div>
+  </div>
+}
+
+namespace Constants {
+  export const CardRadius = 8
+  export const CardPadding = 20
+}
+
+export const useStyles = makeStyles((theme) => {
+
+  const common = {
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: Constants.CardRadius,
+    margin: theme.spacing(1),
+    padding: Constants.CardPadding
+  }
+
+  return {
+    root: {
+      display: "flex",
+      flexDirection: "column"
+    },
+    horizontal: {
+      display: "flex",
+      flexDirection: "row"
+    },
+    section: common,
+    sideBar: {
+      ...common,
+      width: "400px"
+    },
+    main: {
+      ...common,
+      flex: 1
+    }
+  }
+})
diff --git a/site/components/Workspace/index.ts b/site/components/Workspace/index.ts
@@ -0,0 +1 @@
+export * from "./Workspace"
diff --git a/site/pages/workspaces/[user]/[workspace]/index.tsx b/site/pages/workspaces/[user]/[workspace]/index.tsx
@@ -0,0 +1,46 @@
+import React from "react"
+import { makeStyles } from "@material-ui/core/styles"
+import Paper from "@material-ui/core/Paper"
+import { useRouter } from "next/router"
+import Link from "next/link"
+import { Navbar } from "../../../../components/Navbar"
+import { Footer } from "../../../../components/Page"
+import { useUser } from "../../../../contexts/UserContext"
+
+import { Workspace } from "../../../../components/Workspace"
+import { MockWorkspace } from "../../../../test_helpers"
+
+
+const ProjectsPage: React.FC = () => {
+  const styles = useStyles()
+  const router = useRouter()
+  const { me, signOut } = useUser(true)
+
+  const { user, workspace } = router.query
+
+  return (
+    <div className={styles.root}>
+      <Navbar user={me} onSignOut={signOut} />
+
+      <div className={styles.inner}>
+        <Workspace workspace={MockWorkspace} />
+      </div>
+
+      <Footer />
+    </div>
+  )
+}
+
+const useStyles = makeStyles(() => ({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+  },
+  inner: {
+    maxWidth: "1380px",
+    margin: "1em auto",
+    width: "100%"
+  }
+}))
+
+export default ProjectsPage