92 lines
3.7 KiB
TypeScript
92 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
export default function DaisyUIPreview() {
|
|
const [theme, setTheme] = useState("light");
|
|
|
|
useEffect(() => {
|
|
const handleMessage = (event) => {
|
|
if (event.data?.type === "SET_THEME" && event.data?.theme) {
|
|
setTheme(event.data.theme);
|
|
}
|
|
};
|
|
window.addEventListener("message", handleMessage);
|
|
return () => window.removeEventListener("message", handleMessage);
|
|
}, []);
|
|
|
|
return (
|
|
<div
|
|
data-theme={theme}
|
|
className="min-h-screen bg-base-100 text-base-content p-8 transition-colors duration-300 font-sans"
|
|
>
|
|
<div className="max-w-3xl mx-auto space-y-12">
|
|
<header className="space-y-2">
|
|
<h1 className="text-4xl font-bold tracking-tight">Theme Preview</h1>
|
|
<p className="text-base-content/70">
|
|
Current Theme: <span className="font-mono bg-base-200 px-2 py-1 rounded-md">{theme}</span>
|
|
</p>
|
|
</header>
|
|
|
|
<section className="space-y-4">
|
|
<h2 className="text-2xl font-semibold border-b pb-2 border-base-300">Actions & Buttons</h2>
|
|
<div className="flex flex-wrap gap-4">
|
|
<button className="btn btn-primary">Primary</button>
|
|
<button className="btn btn-secondary">Secondary</button>
|
|
<button className="btn btn-accent">Accent</button>
|
|
<button className="btn btn-ghost">Ghost</button>
|
|
<button className="btn btn-outline btn-primary">Outline</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="space-y-4">
|
|
<h2 className="text-2xl font-semibold border-b pb-2 border-base-300">Data & Display</h2>
|
|
<div className="flex flex-wrap gap-4 items-center">
|
|
<div className="badge badge-primary badge-lg">New User</div>
|
|
<div className="badge badge-secondary badge-outline badge-lg">Pro Plan</div>
|
|
<div className="badge badge-accent badge-lg">Updated</div>
|
|
|
|
<div className="stat bg-base-200 rounded-xl w-48 shadow-sm">
|
|
<div className="stat-title">Total Revenue</div>
|
|
<div className="stat-value text-primary">$89,400</div>
|
|
<div className="stat-desc">21% more than last month</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="space-y-4">
|
|
<h2 className="text-2xl font-semibold border-b pb-2 border-base-300">Layout Components</h2>
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
|
|
<div className="card bg-base-200 shadow-xl">
|
|
<div className="card-body">
|
|
<h2 className="card-title">Startup Acquisition</h2>
|
|
<p>A highly profitable SaaS business looking for a strategic buyer. Features a robust recurring revenue model.</p>
|
|
<div className="card-actions justify-end mt-4">
|
|
<button className="btn btn-primary">View Listing</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-4">
|
|
<div className="alert alert-info shadow-sm">
|
|
<span>New offer received on your listing.</span>
|
|
</div>
|
|
<div className="alert alert-success shadow-sm">
|
|
<span>Due diligence documents verified!</span>
|
|
</div>
|
|
|
|
<div className="w-full mt-2">
|
|
<label className="text-sm font-medium mb-1 block">Profile Completion</label>
|
|
<progress className="progress progress-primary w-full" value="70" max="100"></progress>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|