Mockup

1import { cva, type VariantProps } from "class-variance-authority";
2import React from "react";
3 
4import { cn } from "@/lib/utils";
5 
6const mockupVariants = cva(
7  "flex relative z-10 overflow-hidden shadow-2xl border border-border/70 dark:border-border/5 dark:border-t-border/15",
8  {
9    variants: {
10      type: {
11        mobile: "rounded-[48px] max-w-[350px]",
12        responsive: "rounded-md",
13      },
14    },
15    defaultVariants: {
16      type: "responsive",
17    },
18  },
19);
20 
21export interface MockupProps
22  extends
23    React.HTMLAttributes<HTMLDivElement>,
24    VariantProps<typeof mockupVariants> {}
25 
26function Mockup({ className, type, ...props }: MockupProps) {
27  return (
28    <div
29      data-slot="mockup"
30      className={cn(mockupVariants({ type, className }))}
31      {...props}
32    />
33  );
34}
35 
36const frameVariants = cva(
37  "bg-border/50 flex relative z-10 overflow-hidden rounded-2xl dark:bg-border/10",
38  {
39    variants: {
40      size: {
41        small: "p-2",
42        large: "p-4",
43      },
44    },
45    defaultVariants: {
46      size: "small",
47    },
48  },
49);
50 
51export interface MockupFrameProps
52  extends
53    React.HTMLAttributes<HTMLDivElement>,
54    VariantProps<typeof frameVariants> {}
55 
56function MockupFrame({ className, size, ...props }: MockupFrameProps) {
57  return (
58    <div
59      data-slot="mockup-frame"
60      className={cn(frameVariants({ size, className }))}
61      {...props}
62    />
63  );
64}
65 
66export { Mockup, MockupFrame };