wehub-resource-sync
470 lines
16 KiB
TypeScript
470 lines
16 KiB
TypeScript
import Link from "next/link"
|
|
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Card } from "@/components/ui/card"
|
|
|
|
interface ExampleCategory {
|
|
id: string
|
|
title: string
|
|
description: string
|
|
examples: {
|
|
name: string
|
|
blockCount: number
|
|
category: string
|
|
thumbnail?: string
|
|
comingSoon?: boolean
|
|
}[]
|
|
}
|
|
|
|
const categories: ExampleCategory[] = [
|
|
{
|
|
id: "web3",
|
|
title: "Web 3.0",
|
|
description:
|
|
"Innovative sections built for decentralized applications, blockchain projects, and crypto platforms.",
|
|
examples: [
|
|
{
|
|
name: "Web 3.0 Login",
|
|
blockCount: 5,
|
|
category: "web3",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/login-thumbnail.jpg",
|
|
comingSoon: true,
|
|
},
|
|
{
|
|
name: "Web 3.0 Charts",
|
|
blockCount: 5,
|
|
category: "web3",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/web3-charts-thumbnail.jpg",
|
|
comingSoon: true,
|
|
},
|
|
{
|
|
name: "Web 3.0 Cards",
|
|
blockCount: 5,
|
|
category: "web3",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/collections-thumbnail.jpg",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "application-ui",
|
|
title: "Application & Admin UI",
|
|
description:
|
|
"Fully coded interface for stunning dashboards, admin panels, and web apps.",
|
|
examples: [
|
|
{
|
|
name: "Widgets",
|
|
blockCount: 7,
|
|
category: "cruds",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/widgets-thumbnail.jpg",
|
|
comingSoon: true,
|
|
},
|
|
{
|
|
name: "Charts",
|
|
blockCount: 6,
|
|
category: "cruds",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/charts-thumbnail.jpg",
|
|
comingSoon: true,
|
|
},
|
|
{
|
|
name: "Tables",
|
|
blockCount: 10,
|
|
category: "cruds",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/tables-thumbnail.jpg",
|
|
comingSoon: true,
|
|
},
|
|
{
|
|
name: "Modals",
|
|
blockCount: 5,
|
|
category: "modals",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/modals-thumbnail.jpg",
|
|
},
|
|
{
|
|
name: "Account",
|
|
blockCount: 7,
|
|
category: "account",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/account-thumbnail.jpg",
|
|
},
|
|
{
|
|
name: "Billing",
|
|
blockCount: 5,
|
|
category: "billing",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/billing-thumbnail.jpg",
|
|
},
|
|
{
|
|
name: "Tables Headers",
|
|
blockCount: 6,
|
|
category: "cruds",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/table-headers-thumbnail.jpg",
|
|
comingSoon: true,
|
|
},
|
|
{
|
|
name: "Tables Footers",
|
|
blockCount: 6,
|
|
category: "cruds",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/table-footers-thumbnail.jpg",
|
|
comingSoon: true,
|
|
},
|
|
{
|
|
name: "KPI Cards",
|
|
blockCount: 7,
|
|
category: "cruds",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/kpi-cards-thumbnail.jpg",
|
|
comingSoon: true,
|
|
},
|
|
{
|
|
name: "Sidebars",
|
|
blockCount: 9,
|
|
category: "sidebars",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/sidebar-thumbnail.jpg",
|
|
comingSoon: true,
|
|
},
|
|
{
|
|
name: "Dropdowns",
|
|
blockCount: 6,
|
|
category: "dropdowns",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/dropdown-filter-thumbnail.jpg",
|
|
comingSoon: true,
|
|
},
|
|
{
|
|
name: "User Profile",
|
|
blockCount: 5,
|
|
category: "user-profile",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/user-profile-thumbnail.jpg",
|
|
comingSoon: true,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "marketing",
|
|
title: "Marketing & Presentation",
|
|
description:
|
|
"Optimized for showcasing products and services, perfect for landing pages and marketing websites.",
|
|
examples: [
|
|
{
|
|
name: "Hero Sections",
|
|
blockCount: 18,
|
|
category: "hero-sections",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/headers-thumbnail.jpg",
|
|
comingSoon: true,
|
|
},
|
|
{
|
|
name: "Testimonial Sections",
|
|
blockCount: 17,
|
|
category: "testimonials",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/testimonial-thumbnail.jpg",
|
|
},
|
|
{
|
|
name: "Popup Sections",
|
|
blockCount: 7,
|
|
category: "popups",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/popup-thumbnail.jpg",
|
|
comingSoon: true,
|
|
},
|
|
{
|
|
name: "Authentication",
|
|
blockCount: 6,
|
|
category: "authentication",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/authentication-thumbnail.jpg",
|
|
comingSoon: true,
|
|
},
|
|
{
|
|
name: "Onboarding Sections",
|
|
blockCount: 5,
|
|
category: "onboarding",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/onboarding-thumbnail.jpg",
|
|
comingSoon: true,
|
|
},
|
|
{
|
|
name: "Navbars",
|
|
blockCount: 10,
|
|
category: "navbars",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/navbars-thumbnail.jpg",
|
|
comingSoon: true,
|
|
},
|
|
{
|
|
name: "Contact Sections",
|
|
blockCount: 15,
|
|
category: "contact",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/contact-us-thumbnail.jpg",
|
|
},
|
|
{
|
|
name: "Team Sections",
|
|
blockCount: 17,
|
|
category: "team-sections",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/team-thumbnail.jpg",
|
|
comingSoon: true,
|
|
},
|
|
{
|
|
name: "Newsletter",
|
|
blockCount: 17,
|
|
category: "newsletter",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/newsletter-thumbnail.jpg",
|
|
comingSoon: true,
|
|
},
|
|
{
|
|
name: "Footers",
|
|
blockCount: 16,
|
|
category: "footers",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/footer-thumbnail.jpg",
|
|
},
|
|
{
|
|
name: "Coming Soon Sections",
|
|
blockCount: 4,
|
|
category: "coming-soon",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/coming-soon-thumbnail.jpg",
|
|
comingSoon: true,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "content-ui",
|
|
title: "Content UI",
|
|
description:
|
|
"Versatile UI sections for blogs, articles, and multimedia-rich content.",
|
|
examples: [
|
|
{
|
|
name: "FAQs",
|
|
blockCount: 6,
|
|
category: "faqs",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/faq-thumbnail.jpg",
|
|
},
|
|
{
|
|
name: "Feature Sections",
|
|
blockCount: 18,
|
|
category: "feature-sections",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/features-thumbnail.jpg",
|
|
comingSoon: true,
|
|
},
|
|
{
|
|
name: "Stats Sections",
|
|
blockCount: 10,
|
|
category: "stats-sections",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/stats-thumbnail.jpg",
|
|
comingSoon: true,
|
|
},
|
|
{
|
|
name: "Content Sections",
|
|
blockCount: 16,
|
|
category: "content-sections",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/content-section-thumbnail.jpg",
|
|
comingSoon: true,
|
|
},
|
|
{
|
|
name: "Cards",
|
|
blockCount: 5,
|
|
category: "cards",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/cards-thumbnail.jpg",
|
|
comingSoon: true,
|
|
},
|
|
{
|
|
name: "Error Sections",
|
|
blockCount: 7,
|
|
category: "error-sections",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/Error404-thumbnail.jpg",
|
|
comingSoon: true,
|
|
},
|
|
{
|
|
name: "Maintenance Sections",
|
|
blockCount: 4,
|
|
category: "maintenance-sections",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/Error500-thumbnail.jpg",
|
|
comingSoon: true,
|
|
},
|
|
{
|
|
name: "Blog",
|
|
blockCount: 15,
|
|
category: "blog",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/blog-posts-thumbnail.jpg",
|
|
},
|
|
{
|
|
name: "Logo Sections",
|
|
blockCount: 7,
|
|
category: "logo-sections",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/logo-areas-thumbnail.jpg",
|
|
comingSoon: true,
|
|
},
|
|
{
|
|
name: "Calendar Sections",
|
|
blockCount: 3,
|
|
category: "calendar-sections",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/calendar-thumbnail.jpg",
|
|
comingSoon: true,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "ecommerce",
|
|
title: "Ecommerce UI",
|
|
description:
|
|
"Ready-to-use blocks for product listings, shopping carts, and checkout flows.",
|
|
examples: [
|
|
{
|
|
name: "Banner Sections",
|
|
blockCount: 7,
|
|
category: "banner-sections",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/banner-thumbnail.jpg",
|
|
comingSoon: true,
|
|
},
|
|
{
|
|
name: "Ecommerce Sections",
|
|
blockCount: 14,
|
|
category: "ecommerce",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/ecommerce-thumbnail.jpg",
|
|
},
|
|
{
|
|
name: "Product List Sections",
|
|
blockCount: 5,
|
|
category: "product-list",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/product-list-thumbnail.jpg",
|
|
comingSoon: true,
|
|
},
|
|
{
|
|
name: "Customer Overview Sections",
|
|
blockCount: 3,
|
|
category: "customer-overview",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/customer-overview-thumbnail.jpg",
|
|
comingSoon: true,
|
|
},
|
|
{
|
|
name: "Pricing Sections",
|
|
blockCount: 12,
|
|
category: "pricing",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/pricing-thumbnail.jpg",
|
|
comingSoon: true,
|
|
},
|
|
{
|
|
name: "Categories",
|
|
blockCount: 5,
|
|
category: "categories",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/categories-thumbnail.jpg",
|
|
comingSoon: true,
|
|
},
|
|
{
|
|
name: "Order Sections",
|
|
blockCount: 7,
|
|
category: "order-sections",
|
|
thumbnail:
|
|
"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/order-tracking-thumbnail.jpg",
|
|
comingSoon: true,
|
|
},
|
|
],
|
|
},
|
|
]
|
|
|
|
export function ExamplesPreview() {
|
|
return (
|
|
<section className="container space-y-16 py-12 md:py-20">
|
|
{categories.map((category) => (
|
|
<div key={category.id} className="space-y-6">
|
|
<div>
|
|
<h3 className="mb-2 text-2xl font-bold tracking-tight">
|
|
{category.title}
|
|
</h3>
|
|
<p className="text-muted-foreground max-w-4xl text-sm sm:text-base">
|
|
{category.description}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
|
{category.examples.map((example) => {
|
|
const CardContent = (
|
|
<Card className="bg-card overflow-hidden border transition-all hover:shadow-md py-0 gap-4">
|
|
<div className="bg-muted/30 relative aspect-[16/10] overflow-hidden">
|
|
{example.thumbnail ? (
|
|
<img
|
|
src={example.thumbnail}
|
|
alt={example.name}
|
|
className="object-cover"
|
|
/>
|
|
) : (
|
|
<div className="from-muted/80 to-muted/40 absolute inset-0 bg-gradient-to-br" />
|
|
)}
|
|
{example.comingSoon && (
|
|
<div className="absolute inset-0 flex items-center justify-center bg-black/40">
|
|
<Badge
|
|
variant="secondary"
|
|
className="text-foreground bg-white px-4 py-1.5 font-medium dark:bg-black"
|
|
>
|
|
Soon
|
|
</Badge>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="px-4 pb-4">
|
|
<div className="flex items-center justify-between">
|
|
<h4 className="text-sm font-medium">{example.name}</h4>
|
|
<span className="text-muted-foreground text-xs">
|
|
{example.blockCount} Blocks
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
)
|
|
|
|
if (example.comingSoon) {
|
|
return (
|
|
<div key={example.name} className="cursor-not-allowed">
|
|
{CardContent}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Link
|
|
key={example.name}
|
|
href={`/blocks/${example.category}`}
|
|
className="group"
|
|
>
|
|
{CardContent}
|
|
</Link>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</section>
|
|
)
|
|
}
|