Grid Pattern

# Component Prompt

Create a React component with TypeScript...

## Props

interface ComponentProps {
  ...
}

## Implementation

export function Component() {
  ...
}

"use client";

import React from "react";
import { cn } from "@/lib/utils";

interface ComponentProps {
  children: React.ReactNode;
  className?: string;
  variant?: "default" | "primary";
}

export function Component({
  children,
  className,
  variant = "default",
}: ComponentProps) {
  return (
    <div className={cn("...", className)}>
      {children}
    </div>
  );
}

import { Component } from "@/components/ui/component";

export default function Demo() {
  return (
    <div className="flex gap-4">
      <Component variant="primary">
        Premium content
      </Component>
      <Component variant="default">
        Another example
      </Component>
    </div>
  );
}