Example

1import { cn } from "@/registry/base-vega/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 
11          className
12        )}
13        {...props}
14      />
15    </div>
16  )
17}
18 
19function Example({
20  title,
21  children,
22  className,
23  containerClassName,
24  ...props
25}: React.ComponentProps<"div"> & {
26  title?: string
27  containerClassName?: string
28}) {
29  return (
30    <div
31      data-slot="example"
32      className={cn(
33        "mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none",
34        containerClassName
35      )}
36      {...props}
37    >
38      {title && (
39        <div className="px-1.5 py-2 text-xs font-medium text-muted-foreground">
40          {title}
41        </div>
42      )}
43      <div
44        data-slot="example-content"
45        className={cn(
46          "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",
47          className
48        )}
49      >
50        {children}
51      </div>
52    </div>
53  )
54}
55 
56export { ExampleWrapper, Example }