"use client"; import { SiteCard } from "@/components/bloks/site-card"; import { Copy, Edit, FileEdit, LayoutGrid, Pin, Settings } from "lucide-react"; export interface SitePermissions { canAdmin: boolean; canCreate: boolean; canRead: boolean; canDelete: boolean; canWrite: boolean; canRename: boolean; } export interface SiteHost { id: string; name: string; hostnames: string[]; targetHostname: string; } export interface SiteThumbnail { url: string; rootPath: string; autogenerated: boolean; } export interface SiteFavoritesResponse { id: string; name: string; description: string; displayName: string; thumbnailUrl: string; collectionId: string; collectionName?: string; thumbnail: SiteThumbnail; permissions: SitePermissions; hosts: SiteHost[]; portfolioAccess?: SitePermissions; } // Mock site data const mockSite: SiteFavoritesResponse = { id: "site-demo-001", name: "demo-site", displayName: "Demo Site", description: "A demo site for testing", collectionId: "collection-001", collectionName: "Demo Collection", thumbnailUrl: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='225'%3E%3Crect width='400' height='225' fill='%23a78bfa'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='white' font-family='sans-serif' font-size='24'%3ECorporate Blog%3C/text%3E%3C/svg%3E", thumbnail: { url: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='225'%3E%3Crect width='400' height='225' fill='%23a78bfa'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='white' font-family='sans-serif' font-size='24'%3ECorporate Blog%3C/text%3E%3C/svg%3E", rootPath: "/thumbnails/", autogenerated: false, }, permissions: { canAdmin: true, canCreate: true, canRead: true, canDelete: true, canWrite: true, canRename: true, }, hosts: [ { id: "host-001", name: "Main Host", hostnames: ["demo.example.com"], targetHostname: "demo.example.com", }, ], }; export default function SiteCardDemo() { // Footer buttons configuration const footerButtons = [ { icon: , label: "Page builder", onClick: () => console.log("Page builder clicked"), }, { icon: , label: "Dashboard", onClick: () => console.log("Dashboard clicked"), }, ]; // Dropdown actions configuration const dropdownActions = [ { icon: , label: "Settings", onClick: () => console.log("Settings clicked"), show: true, }, { icon: , label: "Pin Site", onClick: () => console.log("Pin clicked"), show: true, }, { icon: , label: "Rename", onClick: () => console.log("Rename clicked"), show: true, }, { icon: , label: "Duplicate", onClick: () => console.log("Duplicate clicked"), show: true, }, ]; return (

); }

Site card

Demo Site

Installation

Usage