38 lines
855 B
TypeScript
38 lines
855 B
TypeScript
|
import { Card } from "@ui/components/card";
|
||
|
|
import { cn } from "@ui/lib";
|
||
|
|
import type { PropsWithChildren, ReactNode } from "react";
|
||
|
|
|
||
|
|
export function SettingsItem({
|
||
|
|
children,
|
||
|
|
title,
|
||
|
|
description,
|
||
|
|
danger,
|
||
|
|
}: PropsWithChildren<{
|
||
|
|
title: string | ReactNode;
|
||
|
|
description?: string | ReactNode;
|
||
|
|
danger?: boolean;
|
||
|
|
}>) {
|
||
|
|
return (
|
||
|
|
<Card className="@container p-4 rounded-2xl border md:p-6">
|
||
|
|
<div className="grid @-xl:grid-cols-[min(100%/3,280px)_auto] grid-cols-1 @xl:gap-8 gap-4">
|
||
|
|
<div className="flex shrink-0 flex-col gap-1.5">
|
||
|
|
<h3
|
||
|
|
className={cn(
|
||
|
|
"m-0 font-semibold leading-tight",
|
||
|
|
danger && "text-destructive",
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{title}
|
||
|
|
</h3>
|
||
|
|
{description && (
|
||
|
|
<p className="m-0 text-foreground/60 text-xs">
|
||
|
|
{description}
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
{children}
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
}
|