server/assets/js/react/components/GridList.tsx

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>
)
}