Function TabsWrapper

website/app/components/preview/Tabs.tsx:18–104

({
	metadata,
	tabsValue,
	children,
}: TabWrapperProps)

}

export const TabsWrapper = ({
	metadata,
	tabsValue,
	children,
}: TabWrapperProps) => {
	const { hovered: hoveredDownload, ref: refDownload } =
		useHover<HTMLAnchorElement>();
	const { hovered: hoveredGlobe, ref: refGlobe } =
		useHover<HTMLButtonElement>();

	return (
		<Tabs
			value={tabsValue}
			unstyled
			classNames={{
				tab: classes.tab,
				list: classes.list,
			}}
		>
			<ContentHeader>
				<Group
					align="center"
					gap="sm"
					className={classes.heading}
					data-m:load={`view-tab=${tabsValue}`}
				>
					<Title order={1} c="purple.0" className={classes.title}>
						{metadata.family}
					</Title>
					<Badge color="gray" variant="light" className={classes.badge}>
						{metadata.category}
					</Badge>
					<Badge color="gray" variant="light" className={classes.badge}>
						{metadata.type}
					</Badge>
				</Group>
				<Tabs.List>
					<Link
						to={`/fonts/${metadata.id}`}
						className={classes.link}
						prefetch="intent"
					>
						<Tabs.Tab value="preview">Preview</Tabs.Tab>
					</Link>
					<Link
						to={`/fonts/${metadata.id}/install`}
						className={classes.link}
						prefetch="intent"
					>
						<Tabs.Tab value="install">Install</Tabs.Tab>
					</Link>
					<a
						href={`https://api.fontsource.org/v1/download/${metadata.id}`}
						className={classes['download-button']}
						ref={refDownload}
						data-m:click={`download=${metadata.id}`}
					>
						<Group gap="xs">