mirror of
https://github.com/coder/coder.git
synced 2025-07-12 00:14:10 +00:00
ace89161fb
This is testing out [Approach 3](https://www.notion.so/coderhq/Workspaces-v2-Initial-UI-Scaffolding-3b07d2847eed48839a7e6f0f2bb9bf56#56256f25d2954897a8ee315f0820cedd) in the UI scaffolding RFC. Fixes https://github.com/coder/coder/issues/11 The folder structure looks like: - `site` - `components` (buttons, empty state, etc) - `pages` (large sections of UI -> composition of components) - `theme` (files defining our palette) Several components were able to be brought in essentially unmodified: - `SplitButton` - `EmptyState` - `Footer` - All the icons / logos - Theming (removed several items that aren't necessary, yet, though) Other components had more coupling, and need more refactoring: - `NavBar` - `Confetti` Current State:  For a full working app, there's potentially a lot more to bring in: - User / Account Settings Stuff - Users Page - Organizations Page (and all the supporting dependencies)
52 lines
1.1 KiB
TypeScript
52 lines
1.1 KiB
TypeScript
import ListItemIcon from "@material-ui/core/ListItemIcon"
|
|
import MenuItem from "@material-ui/core/MenuItem"
|
|
import { SvgIcon, Typography } from "@material-ui/core"
|
|
import { makeStyles } from "@material-ui/core/styles"
|
|
import React from "react"
|
|
|
|
export interface NavMenuEntryProps {
|
|
icon: typeof SvgIcon
|
|
path: string
|
|
label?: string
|
|
selected: boolean
|
|
className?: string
|
|
onClick?: () => void
|
|
}
|
|
|
|
export const NavMenuEntry: React.FC<NavMenuEntryProps> = ({
|
|
className,
|
|
icon,
|
|
path,
|
|
label = path,
|
|
selected,
|
|
onClick,
|
|
}) => {
|
|
const styles = useStyles()
|
|
const Icon = icon
|
|
return (
|
|
<MenuItem selected={selected} className={className} onClick={onClick}>
|
|
<div className={styles.root}>
|
|
{icon && (
|
|
<ListItemIcon>
|
|
<Icon className={styles.icon} />
|
|
</ListItemIcon>
|
|
)}
|
|
<Typography>{label}</Typography>
|
|
</div>
|
|
</MenuItem>
|
|
)
|
|
}
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
root: {
|
|
padding: "2em",
|
|
},
|
|
icon: {
|
|
color: theme.palette.text.primary,
|
|
|
|
"& path": {
|
|
fill: theme.palette.text.primary,
|
|
},
|
|
},
|
|
}))
|