61 lines
1.1 KiB
TypeScript
61 lines
1.1 KiB
TypeScript
|
import * as React from "react"
|
||
|
|
import clsx from "clsx"
|
||
|
|
|
||
|
|
import { Border } from "./Border"
|
||
|
|
|
||
|
|
export function GridList({
|
||
|
|
children,
|
||
|
|
className,
|
||
|
|
}: {
|
||
|
|
children: React.ReactNode
|
||
|
|
className?: string
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<ul
|
||
|
|
role="list"
|
||
|
|
className={clsx(
|
||
|
|
"grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3",
|
||
|
|
className
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</ul>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export function GridListItem({
|
||
|
|
title,
|
||
|
|
children,
|
||
|
|
className,
|
||
|
|
invert = false,
|
||
|
|
}: {
|
||
|
|
title: string
|
||
|
|
children: React.ReactNode
|
||
|
|
className?: string
|
||
|
|
invert?: boolean
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<li
|
||
|
|
className={clsx(
|
||
|
|
"text-base",
|
||
|
|
invert
|
||
|
|
? "text-neutral-300 before:bg-white after:bg-white/10"
|
||
|
|
: "text-neutral-600 before:bg-neutral-950 after:bg-neutral-100",
|
||
|
|
className
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<Border position="left" className="pl-8" invert={invert}>
|
||
|
|
<strong
|
||
|
|
className={clsx(
|
||
|
|
"font-semibold",
|
||
|
|
invert ? "text-white" : "text-neutral-950"
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{title}.
|
||
|
|
</strong>{" "}
|
||
|
|
{children}
|
||
|
|
</Border>
|
||
|
|
</li>
|
||
|
|
)
|
||
|
|
}
|