50 lines
1.7 KiB
TypeScript
50 lines
1.7 KiB
TypeScript
import clsx from "clsx";
|
|
|
|
interface Props {
|
|
title: React.ReactNode;
|
|
description?: React.ReactNode;
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
size?: "xs" | "sm" | "md" | "lg";
|
|
tone?: "default" | "danger";
|
|
}
|
|
export default function SettingSection({
|
|
title,
|
|
description,
|
|
children,
|
|
className,
|
|
size = "md",
|
|
tone = "default",
|
|
}: Props) {
|
|
const cardClassName =
|
|
className ??
|
|
(tone === "danger"
|
|
? "border border-red-200 shadow-2xs px-4 py-5 bg-red-50 sm:p-6 rounded-md"
|
|
: "border border-border-default dark:border-border-default/50 shadow-2xs px-4 py-5 bg-surface-neutral-primary sm:p-6 rounded-md");
|
|
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
size === "xs" && "md:grid md:gap-2 lg:grid-cols-1",
|
|
size === "sm" && "md:grid md:gap-2 lg:grid-cols-2",
|
|
size === "md" && "md:grid md:gap-2 lg:grid-cols-3",
|
|
size === "lg" && "md:grid md:gap-2 lg:grid-cols-4"
|
|
)}
|
|
>
|
|
<div className={clsx(size === "sm" && "md:col-span-1", size === "md" && "md:col-span-1", size === "lg" && "md:col-span-1")}>
|
|
<div className="sm:px-0">
|
|
<h3 className={clsx("text-lg font-medium leading-6", tone === "danger" ? "text-red-700" : "text-text-neutral-primary")}>{title}</h3>
|
|
<div className={clsx("mt-1 text-sm leading-5", tone === "danger" ? "text-red-600" : "text-text-neutral-tertiary")}>{description}</div>
|
|
</div>
|
|
</div>
|
|
<div className={clsx("mt-5 md:mt-0", size === "sm" && "md:col-span-1", size === "md" && "md:col-span-2", size === "lg" && "md:col-span-3")}>
|
|
<div>
|
|
<div className="sm:rounded-sm">
|
|
<div className={cardClassName}>{children}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|