refactor: Workspace Page - Add section components (#345)

Related #67 

This adds some placeholder `<WorkspaceSection />` components, so that we have a place to put things as we start to add more functionality to the Workspaces page.

Before, this was just the title:
<img width="1465" alt="image" src="https://user-images.githubusercontent.com/88213859/155033271-6fbe3dc1-3a9c-4305-bfe9-5bac73ac8b88.png">

Now, this PR introduces a component to host the sections:
<img width="1466" alt="Screen Shot 2022-02-21 at 2 19 12 PM" src="https://user-images.githubusercontent.com/88213859/155033002-55d853e2-50ab-4d6f-b5c4-ff35b8591a00.png">

site/components/Workspace/Workspace.tsx

@@ -5,19 +5,14 @@ import { makeStyles } from "@material-ui/core/styles"
 import CloudCircleIcon from "@material-ui/icons/CloudCircle"
 import Link from "next/link"
 import React from "react"
-
+import * as Constants from "./constants"
 import * as API from "../../api"
+import { WorkspaceSection } from "./WorkspaceSection"
 
 export interface WorkspaceProps {
   workspace: API.Workspace
 }
 
-namespace Constants {
-  export const TitleIconSize = 48
-  export const CardRadius = 8
-  export const CardPadding = 20
-}
-
 /**
  * Workspace is the top-level component for viewing an individual workspace
  */
@@ -26,7 +21,32 @@ export const Workspace: React.FC<WorkspaceProps> = ({ workspace }) => {
 
   return (
     <div className={styles.root}>
-      <WorkspaceHeader workspace={workspace} />
+      <div className={styles.vertical}>
+        <WorkspaceHeader workspace={workspace} />
+        <div className={styles.horizontal}>
+          <div className={styles.sidebarContainer}>
+            <WorkspaceSection title="Applications">
+              <Placeholder />
+            </WorkspaceSection>
+            <WorkspaceSection title="Dev URLs">
+              <Placeholder />
+            </WorkspaceSection>
+            <WorkspaceSection title="Resources">
+              <Placeholder />
+            </WorkspaceSection>
+          </div>
+          <div className={styles.timelineContainer}>
+            <WorkspaceSection title="Timeline">
+              <div
+                className={styles.vertical}
+                style={{ justifyContent: "center", alignItems: "center", height: "300px" }}
+              >
+                <Placeholder />
+              </div>
+            </WorkspaceSection>
+          </div>
+        </div>
+      </div>
     </div>
   )
 }
@@ -63,6 +83,18 @@ export const WorkspaceHeroIcon: React.FC = () => {
   )
 }
 
+/**
+ * Temporary placeholder component until we have the sections implemented
+ * Can be removed once the Workspace page has all the necessary sections
+ */
+const Placeholder: React.FC = () => {
+  return (
+    <div style={{ textAlign: "center", opacity: "0.5" }}>
+      <Typography variant="caption">Not yet implemented</Typography>
+    </div>
+  )
+}
+
 export const useStyles = makeStyles((theme) => {
   return {
     root: {
@@ -81,6 +113,15 @@ export const useStyles = makeStyles((theme) => {
       border: `1px solid ${theme.palette.divider}`,
       borderRadius: Constants.CardRadius,
       padding: Constants.CardPadding,
+      margin: theme.spacing(1),
+    },
+    sidebarContainer: {
+      display: "flex",
+      flexDirection: "column",
+      flex: "0 0 350px",
+    },
+    timelineContainer: {
+      flex: 1,
     },
     icon: {
       width: Constants.TitleIconSize,

site/components/Workspace/WorkspaceSection.tsx

@@ -0,0 +1,48 @@
+import Paper from "@material-ui/core/Paper"
+import { makeStyles } from "@material-ui/core/styles"
+import Typography from "@material-ui/core/Typography"
+import React from "react"
+import { CardPadding, CardRadius } from "./constants"
+
+export interface WorkspaceSectionProps {
+  title: string
+}
+
+export const WorkspaceSection: React.FC<WorkspaceSectionProps> = ({ title, children }) => {
+  const styles = useStyles()
+
+  return (
+    <Paper elevation={0} className={styles.root}>
+      <div className={styles.headerContainer}>
+        <div className={styles.header}>
+          <Typography variant="h6">{title}</Typography>
+        </div>
+      </div>
+
+      <div className={styles.contents}>{children}</div>
+    </Paper>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: CardRadius,
+    margin: theme.spacing(1),
+  },
+  headerContainer: {
+    borderBottom: `1px solid ${theme.palette.divider}`,
+  },
+  contents: {
+    margin: theme.spacing(2),
+  },
+  header: {
+    alignItems: "center",
+    display: "flex",
+    flexDirection: "row",
+    marginBottom: theme.spacing(1),
+    marginTop: theme.spacing(1),
+    paddingLeft: CardPadding + theme.spacing(1),
+    paddingRight: CardPadding / 2,
+  },
+}))

site/components/Workspace/constants.ts

@@ -0,0 +1,3 @@
+export const TitleIconSize = 48
+export const CardRadius = 8
+export const CardPadding = 20