feat: add description tooltips for variable axis

website/app/components/InfoTooltip.tsx

@@ -0,0 +1,22 @@
+import { ActionIcon, Tooltip } from '@mantine/core';
+
+import { IconInfo } from '@/components/icons';
+
+interface InfoTooltipProps {
+	label: string;
+}
+export const InfoTooltip = ({ label }: InfoTooltipProps) => {
+	return (
+		<Tooltip
+			multiline
+			width={240}
+			withArrow
+			transitionProps={{ duration: 200 }}
+			label={label}
+		>
+			<ActionIcon variant="transparent" color="gray" radius="xl">
+				<IconInfo height={18} />
+			</ActionIcon>
+		</Tooltip>
+	);
+};

website/app/components/icons/Info.tsx

@@ -0,0 +1,50 @@
+import { useMantineTheme } from '@mantine/core';
+
+import type { IconProps } from './types';
+
+const IconInfo = ({ height, ...others }: IconProps) => {
+	const theme = useMantineTheme();
+	const stroke =
+		theme.colorScheme === 'dark' ? theme.colors.text[0] : theme.colors.text[1];
+
+	return (
+		<svg
+			height={height}
+			viewBox="0 0 20 20"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			{...others}
+		>
+			<g clip-path="url(#clip0_211_1023)">
+				<path
+					d="M10 18.3333C14.6024 18.3333 18.3333 14.6024 18.3333 9.99999C18.3333 5.39762 14.6024 1.66666 10 1.66666C5.39763 1.66666 1.66667 5.39762 1.66667 9.99999C1.66667 14.6024 5.39763 18.3333 10 18.3333Z"
+					stroke={stroke}
+					strokeWidth="1.5"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+				/>
+				<path
+					d="M10 13.3333V10"
+					stroke={stroke}
+					strokeWidth="1.5"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+				/>
+				<path
+					d="M10 6.66666H10.01"
+					stroke="#01112C"
+					strokeWidth="1.5"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+				/>
+			</g>
+			<defs>
+				<clipPath id="clip0_211_1023">
+					<rect width="20" height="20" fill="white" />
+				</clipPath>
+			</defs>
+		</svg>
+	);
+};
+
+export { IconInfo };

website/app/components/icons/index.ts

@@ -4,6 +4,7 @@ export { IconEye } from './Eye';
 export { IconGithub } from './Github';
 export { IconGrid } from './Grid';
 export { IconHorizontal } from './Horizontal';
+export { IconInfo } from './Info';
 export { IconList } from './List';
 export { IconMoon } from './Moon';
 export { IconRotate } from './Rotate';

website/app/components/preview/VariableButtons.tsx

@@ -12,6 +12,7 @@ import { useAtom } from 'jotai';
 import { IconRotate } from '@/components/icons';
 import type { AxesData, AxisRegistryAll, VariableData } from '@/utils/types';
 
+import { InfoTooltip } from '../InfoTooltip';
 import { variableAtom, variationAtom } from './atoms';
 
 interface VariableButtonGroupProps {
@@ -23,6 +24,7 @@ interface VariableButtonProps {
 	tag: string;
 	label: string;
 	axes: AxesData;
+	description: string;
 }
 
 const useStyles = createStyles((theme) => ({
@@ -54,7 +56,12 @@ const useStyles = createStyles((theme) => ({
 	},
 }));
 
-const VariableButton = ({ tag, label, axes }: VariableButtonProps) => {
+const VariableButton = ({
+	tag,
+	label,
+	axes,
+	description,
+}: VariableButtonProps) => {
 	const { classes } = useStyles();
 	const [_, setVariation] = useAtom(variationAtom);
 	const [variableValue] = useAtom(variableAtom);
@@ -69,7 +76,12 @@ const VariableButton = ({ tag, label, axes }: VariableButtonProps) => {
 	return (
 		<Box className={classes.button}>
 			<Group position="apart" mb={3}>
-				<Text fz='sm' fw={400}>{label}</Text>
+				<Group align='center' spacing={2}>
+					<Text fz="sm" fw={400}>
+						{label} <span>({tag})</span>
+					</Text>
+					<InfoTooltip label={description} />
+				</Group>
 				<ActionIcon onClick={resetVariationAtom} variant="transparent" mr={-4}>
 					<IconRotate height={16} />
 				</ActionIcon>
@@ -84,8 +96,8 @@ const VariableButton = ({ tag, label, axes }: VariableButtonProps) => {
 				value={variableValue[tag] ?? Number(axes.default)}
 			/>
 			<Group position="apart" px={3} mt={4}>
-				<Text fz='sm'>{axes.min}</Text>
-				<Text fz='sm'>{axes.max}</Text>
+				<Text fz="sm">{axes.min}</Text>
+				<Text fz="sm">{axes.max}</Text>
 			</Group>
 		</Box>
 	);
@@ -98,7 +110,13 @@ const VariableButtonsGroup = ({
 	return (
 		<>
 			{Object.keys(variable).map((key) => (
-				<VariableButton key={key} tag={key} label={axisRegistry[key].name} axes={variable[key]} />
+				<VariableButton
+					key={key}
+					tag={key}
+					label={axisRegistry[key].name}
+					description={axisRegistry[key].description}
+					axes={variable[key]}
+				/>
 			))}
 		</>
 	);