Example

1import { cn } from "@/registry/radix-sera/lib/utils"
2 
3function ExampleWrapper({ className, ...props }: React.ComponentProps<"div">) {
4  return (
5    <div className="w-full bg-muted dark:bg-background">
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      {title && (
38        <div className="px-1.5 py-2 text-xs font-medium text-muted-foreground">
39          {title}
40        </div>
41      )}
42      <div
43        data-slot="example-content"
44        className={cn(
45          "flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground style-lyra:rounded-none style-sera:rounded-none *:[div:not([class*='w-'])]:w-full",
46          className
47        )}
48      >
49        {children}
50      </div>
51    </div>
52  )
53}
54 
55export { ExampleWrapper, Example }