Mockup Frame

1import { cn } from "@/lib/utils";
2 
3export type MockupVariant = "saas" | "ai" | "design" | "marketplace";
4export type MockupState = "wireframe" | "shipped";
5 
6type UiMockupFrameProps = {
7  variant?: MockupVariant;
8  state?: MockupState;
9  className?: string;
10  /** Accessible label for the decorative preview */
11  label?: string;
12};
13 
14/**
15 * Realistic browser-frame UI placeholder for case studies.
16 * Wireframe = grey blocks; shipped = branded polish with amber accents.
17 */
18export function UiMockupFrame({
19  variant = "saas",
20  state = "shipped",
21  className,
22  label = "Product UI preview mockup",
23}: UiMockupFrameProps) {
24  const wireframe = state === "wireframe";
25 
26  return (
27    <div
28      className={cn(
29        "flex h-full w-full flex-col overflow-hidden rounded-lg border border-border-subtle bg-background shadow-sm",
30        className
31      )}
32      role="img"
33      aria-label={label}
34    >
35      {/* Browser chrome */}
36      <div className="flex items-center gap-2 border-b border-border-subtle bg-muted/50 px-3 py-2">
37        <div className="flex gap-1.5" aria-hidden>
38          <span className="size-2 rounded-full bg-red-400/80" />
39          <span className="size-2 rounded-full bg-amber-400/80" />
40          <span className="size-2 rounded-full bg-emerald-400/80" />
41        </div>
42        <div className="mx-auto h-4 max-w-[55%] flex-1 rounded-md bg-muted" aria-hidden />
43      </div>
44 
45      <div className="flex min-h-0 flex-1">
46        {/* Sidebar */}
47        <div
48          className={cn(
49            "hidden w-[22%] shrink-0 border-r border-border-subtle p-2 sm:block",
50            wireframe ? "bg-muted/40" : "bg-surface"
51          )}
52          aria-hidden
53        >
54          <div className={cn("mb-2 h-2 w-3/4 rounded", wireframe ? "bg-muted-foreground/20" : "bg-brand/30")} />
55          {[1, 2, 3, 4].map((i) => (
56            <div
57              key={i}
58              className={cn(
59                "mb-1.5 h-2 rounded",
60                wireframe ? "bg-muted-foreground/15" : i === 1 ? "bg-brand/20" : "bg-muted"
61              )}
62            />
63          ))}
64        </div>
65 
66        {/* Main content */}
67        <div className="flex min-w-0 flex-1 flex-col p-3">
68          {variant === "ai" ? (
69            <AiMockup wireframe={wireframe} />
70          ) : variant === "design" ? (
71            <DesignMockup wireframe={wireframe} />
72          ) : variant === "marketplace" ? (
73            <MarketplaceMockup wireframe={wireframe} />
74          ) : (
75// … truncated