53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
import { ReactNode } from 'react';
|
|
import { clsx } from 'clsx/lite';
|
|
import ExperimentalBadge from './ExperimentalBadge';
|
|
import Badge from './Badge';
|
|
import ResponsiveText from './primitives/ResponsiveText';
|
|
import { parameterize } from '@/utility/string';
|
|
import ScoreCard from './ScoreCard';
|
|
|
|
export default function ChecklistGroup({
|
|
title,
|
|
titleShort,
|
|
icon,
|
|
optional,
|
|
experimental,
|
|
children,
|
|
}: {
|
|
title: string
|
|
titleShort?: string
|
|
icon?: ReactNode
|
|
optional?: boolean
|
|
experimental?: boolean
|
|
children: ReactNode
|
|
}) {
|
|
const slug = parameterize(title);
|
|
|
|
return (
|
|
<ScoreCard title={<a
|
|
id={slug}
|
|
href={`#${slug}`}
|
|
className={clsx(
|
|
'inline-flex items-center',
|
|
'text-gray-600 dark:text-gray-300',
|
|
'sm:pl-1.5',
|
|
)}
|
|
>
|
|
<span className="w-8 sm:w-9 shrink-0">{icon}</span>
|
|
<span className="inline-flex flex-wrap items-center gap-y-1 gap-x-1.5">
|
|
<ResponsiveText shortText={titleShort}>
|
|
{title}
|
|
</ResponsiveText>
|
|
{optional &&
|
|
<Badge type="small" className="translate-y-[0.5px]">
|
|
Optional
|
|
</Badge>}
|
|
{experimental &&
|
|
<ExperimentalBadge className="translate-y-[0.5px]" />}
|
|
</span>
|
|
</a>}>
|
|
{children}
|
|
</ScoreCard>
|
|
);
|
|
}
|