Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | 105x | import { ReactNode } from "react";
import { cn } from "@/utils";
interface SectionCardProps {
children: ReactNode;
className?: string;
title?: ReactNode;
id?: string;
testId?: string;
childrenClassName?: string;
}
export const SectionCard = ({
title,
children,
className,
id,
testId,
childrenClassName = "gap-8 flex flex-col",
}: SectionCardProps) => {
return (
<section
data-testid={testId}
id={id}
className={cn("p-4 border rounded-sm border-cardBorder", className)}
>
{title && (
<>
<h1 data-testid={`${testId}-title`} className="text-3xl font-semibold mb-2">
{title}
</h1>
<hr className="my-6 bg-slate-200" />
</>
)}
<div data-testid={`${testId}-child`} className={childrenClassName}>
{children}
</div>
</section>
);
};
|