feat: add optional tooltip icon to settings header

jaaydenh · jaaydenh · commit 1b0af98fc629 · 2024-09-01T19:21:52.000Z
diff --git a/site/src/components/SettingsHeader/SettingsHeader.tsx b/site/src/components/SettingsHeader/SettingsHeader.tsx
@@ -9,39 +9,44 @@ interface HeaderProps {
 	description?: ReactNode;
 	secondary?: boolean;
 	docsHref?: string;
+	tooltip?: ReactNode;
 }
 
 export const SettingsHeader: FC<HeaderProps> = ({
 	title,
 	description,
 	docsHref,
 	secondary,
+	tooltip,
 }) => {
 	const theme = useTheme();
 
 	return (
 		<Stack alignItems="baseline" direction="row" justifyContent="space-between">
 			<div css={{ maxWidth: 420, marginBottom: 24 }}>
-				<h1
-					css={[
-						{
-							fontSize: 32,
-							fontWeight: 700,
-							display: "flex",
-							alignItems: "center",
-							lineHeight: "initial",
-							margin: 0,
-							marginBottom: 4,
-							gap: 8,
-						},
-						secondary && {
-							fontSize: 24,
-							fontWeight: 500,
-						},
-					]}
-				>
-					{title}
-				</h1>
+				<Stack direction="row" spacing={1} alignItems="center">
+					<h1
+						css={[
+							{
+								fontSize: 32,
+								fontWeight: 700,
+								display: "flex",
+								alignItems: "center",
+								lineHeight: "initial",
+								margin: 0,
+								marginBottom: 4,
+								gap: 8,
+							},
+							secondary && {
+								fontSize: 24,
+								fontWeight: 500,
+							},
+						]}
+					>
+						{title}
+					</h1>
+					{tooltip}
+				</Stack>
 				{description && (
 					<span
 						css={{
