# Install the Color Popover
npx shadcn@latest add http://localhost:3000/r/color-popover.json

# Install the Action Popover
npx shadcn@latest add http://localhost:3000/r/action-popover.json

# Install the Form Popover
npx shadcn@latest add http://localhost:3000/r/form-popover.json

# Install the Menu Popover
npx shadcn@latest add http://localhost:3000/r/menu-popover.json

# Install the User Popover
npx shadcn@latest add http://localhost:3000/r/user-popover.json

import { ColorPopover } from "@/components/ui/color-popover";
import { useState } from "react";

export default function ThemeSettings() {
  const [themeColor, setThemeColor] = useState("#3b82f6");

  return (
    <div className="flex items-center gap-4">
      <span className="text-sm font-medium">Theme Accent:</span>
      <ColorPopover value={themeColor} onChange={setThemeColor}>
        <button
          className="h-8 w-16 rounded-lg border border-zinc-200 dark:border-zinc-800 shadow-sm"
          style={{ backgroundColor: themeColor }}
        />
      </ColorPopover>
    </div>
  );
}

import { ActionPopover } from "@/components/ui/action-popover";

export default function DeleteItem() {
  const handleDelete = () => {
    console.log("Item deleted.");
  };

  return (
    <ActionPopover
      title="Delete file?"
      description="This action cannot be undone. This will permanently delete your file from our servers."
      confirmLabel="Delete"
      variant="danger"
      onConfirm={handleDelete}
    >
      <button className="rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700">
        Delete File
      </button>
    </ActionPopover>
  );
}

import { UserPopover } from "@/components/ui/user-popover";

export default function AuthorBadge() {
  const userMock = {
    name: "Sarah Connor",
    username: "sarah",
    avatar:
      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150&h=150&fit=crop&crop=face",
    bio: "Developer & Creator. Building the future of user interfaces.",
    location: "Los Angeles, CA",
    joinDate: "Joined Jan 2024",
    stats: [
      { label: "Followers", value: "1.2k" },
      { label: "Following", value: "480" },
    ],
  };

  return (
    <UserPopover user={userMock} side="bottom">
      <button className="text-sm font-semibold hover:underline">@sarah</button>
    </UserPopover>
  );
}