mirror of
https://github.com/coder/coder.git
synced 2025-07-12 00:14:10 +00:00
b964cb0380
This implements a simple Project listing page at `/projects` - just a table for a list of projects:  ...and an empty state:  There isn't too much data to show at the moment. It'll be nice in the future to show the following fields and improve the UI with it: - An icon - A list of users using the project - A description However, this brings in a lot of scaffolding to make it easier to build pages like this (`/organizations`, `/workspaces`, etc). In particular, I brought over a few things from v1: - The `Hero` / `Header` component at the top of pages + sub-components - A `Table` component for help rendering table-like UI + sub-components - Additional palette settings that the `Hero`
66 lines
1.8 KiB
TypeScript
66 lines
1.8 KiB
TypeScript
import Box from "@material-ui/core/Box"
|
|
import { makeStyles } from "@material-ui/core/styles"
|
|
import TableCell from "@material-ui/core/TableCell"
|
|
import TableRow from "@material-ui/core/TableRow"
|
|
import Typography from "@material-ui/core/Typography"
|
|
import * as React from "react"
|
|
|
|
export interface TableTitleProps {
|
|
/** A title to display */
|
|
readonly title?: React.ReactNode
|
|
/** Arbitrary node to display to the right of the title. */
|
|
readonly details?: React.ReactNode
|
|
}
|
|
|
|
/**
|
|
* Component that encapsulates all of the pieces that sit on the top of a table.
|
|
*/
|
|
export const TableTitle: React.FC<TableTitleProps> = ({ title, details }) => {
|
|
const styles = useStyles()
|
|
return (
|
|
<TableRow>
|
|
<TableCell colSpan={9999} className={styles.cell}>
|
|
<Box className={`${styles.container} ${details ? "-details" : ""}`}>
|
|
{title && (
|
|
<Typography variant="h6" className={styles.title}>
|
|
{title}
|
|
</Typography>
|
|
)}
|
|
{details && <div className={styles.details}>{details}</div>}
|
|
</Box>
|
|
</TableCell>
|
|
</TableRow>
|
|
)
|
|
}
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
cell: {
|
|
background: "none",
|
|
paddingTop: theme.spacing(2),
|
|
paddingBottom: theme.spacing(2),
|
|
},
|
|
container: {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
},
|
|
title: {
|
|
fontSize: theme.typography.h5.fontSize,
|
|
fontWeight: 500,
|
|
color: theme.palette.text.primary,
|
|
textTransform: "none",
|
|
letterSpacing: "normal",
|
|
},
|
|
details: {
|
|
alignItems: "center",
|
|
display: "flex",
|
|
justifyContent: "flex-end",
|
|
letterSpacing: "normal",
|
|
margin: `0 ${theme.spacing(2)}px`,
|
|
|
|
[theme.breakpoints.down("sm")]: {
|
|
margin: `${theme.spacing(1)}px 0 0 0`,
|
|
},
|
|
},
|
|
}))
|