Hover Preview Button

import HoverPreviewButton from "@/components/ruixen/hover-preview-button";
 
export default function App() {
  const previewContent = (
    <div className="p-4">
      <h3 className="font-semibold mb-2">Quick Preview</h3>
      <p className="text-sm text-muted-foreground">
        This is a preview of what you'll see when you click this button. It can
        contain any React content including images, charts, or forms.
      </p>
      <div className="mt-2 flex gap-2">
        <div className="w-4 h-4 bg-blue-500 rounded"></div>
        <div className="w-4 h-4 bg-green-500 rounded"></div>
        <div className="w-4 h-4 bg-red-500 rounded"></div>
      </div>
    </div>
  );
 
  return (
    <HoverPreviewButton
      label="Hover for Preview"
      previewContent={previewContent}
      className="bg-blue-500 hover:bg-blue-600"
    />
  );
}

const textPreview = (
  <div className="p-3">
    <p className="text-sm">This action will save your changes.</p>
  </div>
);

const richPreview = (
  <div className="p-4 space-y-3">
    <div className="flex items-center gap-2">
      <img src="/avatar.jpg" className="w-8 h-8 rounded-full" />
      <div>
        <p className="font-medium">John Doe</p>
        <p className="text-xs text-muted-foreground">Online now</p>
      </div>
    </div>
    <p className="text-sm">Click to start a conversation</p>
  </div>
);

const chartPreview = (
  <div className="p-4">
    <h4 className="font-medium mb-2">Sales Overview</h4>
    <div className="h-20 bg-gradient-to-r from-blue-500 to-purple-500 rounded"></div>
    <p className="text-xs text-muted-foreground mt-2">+12% from last month</p>
  </div>
);