"use client";

import * as React from "react";
import { cn } from "@/lib/utils";
import { Sun, Moon, Check } from "lucide-react";

// Color theme options for preview
type PreviewColorTheme = "default" | "blue" | "green" | "violet" | "rose" | "orange";

const colorThemes: { id: PreviewColorTheme; name: string; color: string }[] = [
  { id: "default", name: "Neutral", color: "#71717a" },
  { id: "blue", name: "Blue", color: "#3b82f6" },
  { id: "green", name: "Green", color: "#22c55e" },
  { id: "violet", name: "Violet", color: "#8b5cf6" },
  { id: "rose", name: "Rose", color: "#f43f5e" },
  { id: "orange", name: "Orange", color: "#f97316" },
];

interface PreviewWrapperProps {
  children: React.ReactNode;
  className?: string;
}

export function PreviewWrapper({ children, className }: PreviewWrapperProps) {
  const [isDark, setIsDark] = React.useState(true);
  const [colorTheme, setColorTheme] = React.useState<PreviewColorTheme>("default");
  const [colorDropdownOpen, setColorDropdownOpen] = React.useState(false);
  const dropdownRef = React.useRef<HTMLDivElement>(null);

  // Close dropdown when clicking outside
  React.useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        setColorDropdownOpen(false);
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  // Close on escape
  React.useEffect(() => {
    function handleEscape(event: KeyboardEvent) {
      if (event.key === "Escape") {
        setColorDropdownOpen(false);
      }
    }
    document.addEventListener("keydown", handleEscape);
    return () => document.removeEventListener("keydown", handleEscape);
  }, []);

  const currentTheme = colorThemes.find((t) => t.id === colorTheme);

  return (
    <div className={cn("overflow-hidden rounded-2xl border border-border", className)}>
      {/* Toolbar */}
      <div className="flex items-center justify-end border-b border-border bg-card/50 px-2 py-1.5">
        {/* Color theme picker */}
        <div className="relative" ref={dropdownRef}>
          <button
            onClick={() => setColorDropdownOpen(!colorDropdownOpen)}
            className={cn(
              "flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-medium transition",
              "text-muted-foreground hover:bg-muted hover:text-foreground",
              colorDropdownOpen && "bg-muted text-foreground"
            )}
            title="Select color theme for preview"
          >
            <span
              className="h-3 w-3 rounded-full ring-1 ring-border"
              style={{ backgroundColor: currentTheme?.color }}
            />
            <span className="hidden sm:inline">{currentTheme?.name}</span>
          </button>

          {colorDropdownOpen && (
            <div
              className={cn(
                "absolute right-0 top-full mt-1 z-50",
                "min-w-[140px] rounded-lg border border-border",
                "bg-card/95 backdrop-blur-xl shadow-lg",
                "animate-in fade-in-0 zoom-in-95 duration-100"
              )}
            >
              <div className="p-1">
                {colorThemes.map((t) => (
                  <button
                    key={t.id}
                    onClick={() => {
                      setColorTheme(t.id);
                      setColorDropdownOpen(false);
                    }}
                    className={cn(
                      "flex w-full items-center gap-2 rounded-md px-2 py-1.5",
                      "text-xs text-foreground transition-colors",
                      "hover:bg-accent",
                      colorTheme === t.id && "bg-accent"
                    )}
                  >
                    <span
                      className="h-3 w-3 rounded-full ring-1 ring-border"
                      style={{ backgroundColor: t.color }}
                    />
                    <span className="flex-1 text-left">{t.name}</span>
                    {colorTheme === t.id && (
                      <Check className="h-3 w-3 text-primary" />
                    )}
                  </button>
                ))}
              </div>
            </div>
          )}
        </div>

        {/* Light/Dark toggle */}
        <button
          onClick={() => setIsDark(!isDark)}
          className="flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-medium text-muted-foreground transition hover:bg-muted hover:text-foreground"
          title={isDark ? "Switch to light mode" : "Switch to dark mode"}
        >
          {isDark ? (
            <>
              <Sun className="h-3.5 w-3.5" />
              <span className="hidden sm:inline">Light</span>
            </>
          ) : (
            <>
              <Moon className="h-3.5 w-3.5" />
              <span className="hidden sm:inline">Dark</span>
            </>
          )}
        </button>
      </div>

      {/* Preview content */}
      <div
        className={cn(
          "transition-colors duration-200",
          isDark ? "preview-dark" : "preview-light"
        )}
        data-color-theme={colorTheme !== "default" ? colorTheme : undefined}
        style={{
          backgroundColor: isDark ? "rgb(12 12 15)" : "rgb(250 250 249)",
        }}
      >
        {children}
      </div>
    </div>
  );
}
Preview Wrapper

Dependencies

Files

Installation
