mirror of
https://github.com/coder/coder.git
synced 2026-11-09 09:03:43 +08:00
68 lines
1.5 KiB
TypeScript
68 lines
1.5 KiB
TypeScript
import Button from "@mui/material/Button"
|
|
import { makeStyles } from "@mui/styles"
|
|
import LaunchOutlined from "@mui/icons-material/LaunchOutlined"
|
|
import { Stack } from "components/Stack/Stack"
|
|
import { FC } from "react"
|
|
|
|
export const Header: FC<{
|
|
title: string | JSX.Element
|
|
description?: string | JSX.Element
|
|
secondary?: boolean
|
|
docsHref?: string
|
|
}> = ({ title, description, docsHref, secondary }) => {
|
|
const styles = useStyles()
|
|
|
|
return (
|
|
<Stack alignItems="baseline" direction="row" justifyContent="space-between">
|
|
<div className={styles.headingGroup}>
|
|
<h1 className={`${styles.title} ${secondary ? "secondary" : ""}`}>
|
|
{title}
|
|
</h1>
|
|
{description && (
|
|
<span className={styles.description}>{description}</span>
|
|
)}
|
|
</div>
|
|
|
|
{docsHref && (
|
|
<Button
|
|
startIcon={<LaunchOutlined />}
|
|
component="a"
|
|
href={docsHref}
|
|
target="_blank"
|
|
>
|
|
Read the docs
|
|
</Button>
|
|
)}
|
|
</Stack>
|
|
)
|
|
}
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
headingGroup: {
|
|
maxWidth: 420,
|
|
marginBottom: theme.spacing(3),
|
|
},
|
|
|
|
title: {
|
|
fontSize: 32,
|
|
fontWeight: 700,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
lineHeight: "initial",
|
|
margin: 0,
|
|
marginBottom: theme.spacing(0.5),
|
|
gap: theme.spacing(1),
|
|
|
|
"&.secondary": {
|
|
fontSize: 24,
|
|
fontWeight: 500,
|
|
},
|
|
},
|
|
|
|
description: {
|
|
fontSize: 14,
|
|
color: theme.palette.text.secondary,
|
|
lineHeight: "160%",
|
|
},
|
|
}))
|