Skip to content
Source
Sign inSign up
Open History to see the last commit

SettingsGroup.tsx

30 lines742 Bytes

1import type { ComponentProps } from "react";
2​
3import { cn } from "../../lib/utils";
4​
5export function SettingsGroup({
6 variant = "grouped",
7 divided = true,
8 className,
9 ...props
10}: ComponentProps<"div"> & {
11 variant?: "grouped" | "plain";
12 divided?: boolean;
13}) {
14 return (
15 <div
16 data-slot="settings-group"
17 {...props}
18 className={cn(
19 "relative overflow-visible text-foreground",
20 variant === "grouped"
21 ? "rounded-xl border border-border/60 bg-card/40 shadow-xs/5"
22 : "space-y-1",
23 variant === "grouped" &&
24 divided &&
25 "*:not-first:border-t *:not-first:border-border/50 [&>[data-slot=settings-row]]:rounded-none",
26 className,
27 )}
28 />
29 );