portfolio/components/ui/CardGroup.tsx

22 lines
592 B
TypeScript
Raw Normal View History

import React, {ReactNode, useId} from 'react'
type CardGroupProps = {
title: string
children: ReactNode
}
export function CardGroup({title, children}: CardGroupProps) {
const id = useId()
return (
<section aria-labelledby={id}>
2023-01-30 21:26:48 +00:00
<h2 id={id} className="text-sm font-semibold text-zinc-800 dark:text-zinc-100">{title}</h2>
<ul
role="list"
2023-01-30 21:26:48 +00:00
className="grid grid-cols-1 gap-x-12 gap-y-16 sm:grid-cols-2 lg:grid-cols-3 mt-8 mb-16"
>
{children}
</ul>
</section>
)
}