Example

1import { cn } from "@/registry/bases/radix/lib/utils"
2 
3function ExampleWrapper({ className, ...props }: React.ComponentProps<"div">) {
4  return (
5    <div className="bg-background w-full">
6      <div
7        data-slot="example-wrapper"
8        className={cn(
9          "mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl",
10          className
11        )}
12        {...props}
13      />
14    </div>
15  )
16}
17 
18function Example({
19  title,
20  children,
21  className,
22  containerClassName,
23  ...props
24}: React.ComponentProps<"div"> & {
25  title: string
26  containerClassName?: string
27}) {
28  return (
29    <div
30      data-slot="example"
31      className={cn(
32        "mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none",
33        containerClassName
34      )}
35      {...props}
36    >
37      <div className="text-muted-foreground px-1.5 py-2 text-xs font-medium">
38        {title}
39      </div>
40      <div
41        data-slot="example-content"
42        className={cn(
43          "bg-background text-foreground flex min-w-0 flex-1 flex-col items-start gap-6 border border-dashed p-4 sm:p-6 *:[div:not([class*='w-'])]:w-full",
44          className
45        )}
46      >
47        {children}
48      </div>
49    </div>
50  )
51}
52 
53export { ExampleWrapper, Example }