mirror of
https://github.com/coder/coder.git
synced 2026-11-13 05:16:51 +08:00
Bryan
1789ba01f7
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">
49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
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,
|
|
},
|
|
}))
|