mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-10-30 18:22:59 +00:00
zeekay
1eac33eabc
- 3d-carousel-demo: Added 3 carousel items with gradient content - 3d-grid-demo: Added 6 grid items with colors, spans, and elevation - 3d-marquee-demo: Added scrolling text content with icons - 3d-text-demo: Added 3D text with metallic variant - animated-number-demo: Added revenue counter with ,456 - animated-testimonials-demo: Added 3 testimonials with authors - animated-list-demo: Added 3 notification items - ai-models-demo: Added GPT-4, Claude, Gemini models - ai-actions-demo: Added 4 AI action buttons - advanced-navigation-bar-demo: Added nav items with dropdowns All demos now have required props, resolving 10 TypeScript errors.
64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
import { Grid3D } from "@/registry/default/ui/3d-grid"
|
|
|
|
const demoItems = [
|
|
{
|
|
id: "1",
|
|
content: (
|
|
<div className="flex h-full items-center justify-center bg-gradient-to-br from-blue-500 to-blue-600 text-white">
|
|
<span className="text-xl font-bold">Item 1</span>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
id: "2",
|
|
content: (
|
|
<div className="flex h-full items-center justify-center bg-gradient-to-br from-purple-500 to-purple-600 text-white">
|
|
<span className="text-xl font-bold">Item 2</span>
|
|
</div>
|
|
),
|
|
elevation: 20,
|
|
},
|
|
{
|
|
id: "3",
|
|
content: (
|
|
<div className="flex h-full items-center justify-center bg-gradient-to-br from-pink-500 to-pink-600 text-white">
|
|
<span className="text-xl font-bold">Item 3</span>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
id: "4",
|
|
content: (
|
|
<div className="flex h-full items-center justify-center bg-gradient-to-br from-orange-500 to-orange-600 text-white">
|
|
<span className="text-xl font-bold">Item 4</span>
|
|
</div>
|
|
),
|
|
span: { x: 2, y: 1 },
|
|
},
|
|
{
|
|
id: "5",
|
|
content: (
|
|
<div className="flex h-full items-center justify-center bg-gradient-to-br from-green-500 to-green-600 text-white">
|
|
<span className="text-xl font-bold">Item 5</span>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
id: "6",
|
|
content: (
|
|
<div className="flex h-full items-center justify-center bg-gradient-to-br from-cyan-500 to-cyan-600 text-white">
|
|
<span className="text-xl font-bold">Item 6</span>
|
|
</div>
|
|
),
|
|
elevation: 30,
|
|
},
|
|
]
|
|
|
|
export default function ThreeDGridDemo() {
|
|
return (
|
|
<div className="flex min-h-[600px] items-center justify-center p-8">
|
|
<Grid3D items={demoItems} columns={4} rows={2} />
|
|
</div>
|
|
)
|
|
}
|