Initial select page

bryphe-coder · bryphe-coder · commit c305c8de23d6 · 2022-01-19T15:38:56.000Z
diff --git a/site/components/FullScreenForm/Title.tsx b/site/components/FullScreenForm/Title.tsx
@@ -0,0 +1,35 @@
+import { makeStyles } from "@material-ui/core/styles"
+import Typography from "@material-ui/core/Typography"
+import React from "react"
+
+export interface TitleProps {
+  title: string
+  organization: string
+}
+
+const useStyles = makeStyles((theme) => ({
+  title: {
+    textAlign: "center",
+    marginBottom: theme.spacing(10),
+
+    [theme.breakpoints.down("sm")]: {
+      gridColumn: 1,
+    },
+
+    "& h3": {
+      marginBottom: theme.spacing(1),
+    },
+  },
+}))
+
+export const Title: React.FC<TitleProps> = ({ title, organization }) => {
+
+  const styles = useStyles()
+
+  return <div className={styles.title} >
+    <Typography variant="h3">{title}</Typography>
+    <Typography variant="caption">
+      In <strong>{organization}</strong> organization
+    </Typography>
+  </div>
+}
diff --git a/site/components/FullScreenForm/index.ts b/site/components/FullScreenForm/index.ts
@@ -0,0 +1 @@
+export { Title } from "./Title"
diff --git a/site/pages/workspaces/create/index.tsx b/site/pages/workspaces/create/index.tsx
@@ -1,18 +1,21 @@
+import Typography from "@material-ui/core/Typography"
 import React from "react"
 
+import { Title } from "../../../components/FullScreenForm"
+
 const CreateSelectProjectPage: React.FC = () => {
 
   const createWorkspace = () => {
     alert("create")
   }
 
   const button = {
-    children: "New Workspace",
+    children: "Next",
     onClick: createWorkspace,
   }
 
   return (
-    <div>Create Page</div>
+    <Title title={"Select Project"} organization={"test-org"} />
   )
 }
 

Original file line number	Diff line number	Diff line change
`@@ -1,18 +1,21 @@`
	`1`	`+import Typography from "@material-ui/core/Typography"`
`1`	`2`	`import React from "react"`
`2`	`3`
	`4`	`+import { Title } from "../../../components/FullScreenForm"`
	`5`	`+`
`3`	`6`	`const CreateSelectProjectPage: React.FC = () => {`
`4`	`7`
`5`	`8`	`const createWorkspace = () => {`
`6`	`9`	`alert("create")`
`7`	`10`	`}`
`8`	`11`
`9`	`12`	`const button = {`
`10`		`- children: "New Workspace",`
	`13`	`+ children: "Next",`
`11`	`14`	`onClick: createWorkspace,`
`12`	`15`	`}`
`13`	`16`
`14`	`17`	`return (`
`15`		`- <div>Create Page</div>`
	`18`	`+ <Title title={"Select Project"} organization={"test-org"} />`
`16`	`19`	`)`
`17`	`20`	`}`
`18`	`21`