mirror of
https://github.com/coder/coder.git
synced 2025-07-12 00:14:10 +00:00
feat(cdr): Initial UI scaffolding
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)
This commit is contained in:
51
site/components/Navbar/NavMenuEntry.tsx
Normal file
51
site/components/Navbar/NavMenuEntry.tsx
Normal file
@ -0,0 +1,51 @@
|
||||
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,
|
||||
},
|
||||
},
|
||||
}))
|
Reference in New Issue
Block a user