first

apps/web/modules/saas/shared/components/SettingsItem.tsx

@@ -0,0 +1,37 @@
+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>
+	);
+}