52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
import type { HTMLAttributes, ReactNode } from "react";
|
|
import { Children } from "react";
|
|
|
|
import { CornerCard } from "./CornerCard";
|
|
|
|
type CardsProps = HTMLAttributes<HTMLDivElement> & {
|
|
children: ReactNode;
|
|
};
|
|
|
|
type CardProps = {
|
|
children?: ReactNode;
|
|
href?: string;
|
|
icon?: ReactNode;
|
|
title: string;
|
|
};
|
|
|
|
export function Cards({ children, className, ...props }: CardsProps) {
|
|
const count = Children.count(children);
|
|
|
|
return (
|
|
<div
|
|
{...props}
|
|
className={`not-prose my-6 grid gap-6 ${count > 1 ? "sm:grid-cols-2" : ""}${className ? ` ${className}` : ""}`}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function Card({ children, href, icon, title }: CardProps) {
|
|
const content = (
|
|
<CornerCard className="flex h-full flex-col gap-6 py-6">
|
|
<div className={`grid auto-rows-min grid-rows-[auto_auto] items-start px-6 ${icon ? "gap-4" : "gap-0"}`}>
|
|
{icon ? <div className="text-strong-accent [&_svg]:h-5 [&_svg]:w-5">{icon}</div> : null}
|
|
<h3 className="leading-none font-semibold text-foreground">{title}</h3>
|
|
</div>
|
|
{children ? (
|
|
<div className="px-6">
|
|
<div className="text-sm leading-relaxed text-muted-foreground [&_p]:m-0">{children}</div>
|
|
</div>
|
|
) : null}
|
|
</CornerCard>
|
|
);
|
|
|
|
if (!href) return <div className="h-full">{content}</div>;
|
|
|
|
return (
|
|
<a href={href} className="block h-full text-inherit no-underline">
|
|
{content}
|
|
</a>
|
|
);
|
|
}
|