"use client"; import { AllSitesSection } from "@/components/bloks/all-sites-section"; import { PinnedSitesSection } from "@/components/bloks/pinned-sites-section"; import { Button } from "@/components/ui/button"; import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Copy, Edit, FileEdit, LayoutGrid, Pin, PinOff, Settings, } from "lucide-react"; import { useCallback, useState } from "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 data for pinned sites (from API) const mockPinnedSites: SiteFavoritesResponse[] = [ { id: "site-abc-123", name: "my-ecommerce-site", displayName: "My Ecommerce Site", description: "Our main ecommerce website", collectionId: "portfolio-456", 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, canWrite: true, canCreate: true, canDelete: true, canRename: true, canRead: true, }, hosts: [ { id: "host-001", name: "Production Host", hostnames: ["www.mysite.com", "mysite.com"], targetHostname: "prod.mysite.com", }, ], }, { id: "site-xyz-456", name: "corporate-blog", displayName: "Corporate Blog", description: "Company blog and news", collectionId: "portfolio-789", 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, canWrite: true, canCreate: true, canDelete: false, canRename: true, canRead: true, }, hosts: [ { id: "host-002", name: "Production Host", hostnames: ["blog.company.com", "www.blog.company.com"], targetHostname: "blog.company.com", }, ], }, ]; // Mock data for all available sites (from API) const mockAllSites: SiteFavoritesResponse[] = [ { id: "site-def-789", name: "marketing-site", displayName: "Marketing Site", description: "Landing pages for campaigns", collectionId: "portfolio-123", thumbnailUrl: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='225'%3E%3Crect width='400' height='225' fill='%23fb923c'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='white' font-family='sans-serif' font-size='24'%3EMarketing%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='%23fb923c'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='white' font-family='sans-serif' font-size='24'%3EMarketing%3C/text%3E%3C/svg%3E", rootPath: "/thumbnails/", autogenerated: true, }, permissions: { canAdmin: false, canWrite: true, canCreate: true, canDelete: false, canRename: true, canRead: true, }, hosts: [ { id: "host-003", name: "Campaign Host", hostnames: ["marketing.example.com"], targetHostname: "marketing.example.com", }, ], }, { id: "site-ghi-101", name: "partner-portal", displayName: "Partner Portal", description: "Portal for business partners", collectionId: "portfolio-456", thumbnailUrl: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='225'%3E%3Crect width='400' height='225' fill='%2334d399'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='white' font-family='sans-serif' font-size='24'%3EPartner Portal%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='%2334d399'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='white' font-family='sans-serif' font-size='24'%3EPartner Portal%3C/text%3E%3C/svg%3E", rootPath: "/thumbnails/", autogenerated: false, }, permissions: { canAdmin: false, canWrite: true, canCreate: false, canDelete: false, canRename: false, canRead: true, }, hosts: [ { id: "host-004", name: "Portal Host", hostnames: ["partners.example.com"], targetHostname: "partners.example.com", }, ], }, { id: "site-jkl-202", name: "customer-support", displayName: "Customer Support", description: "Help center and support documentation", collectionId: "portfolio-789", thumbnailUrl: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='225'%3E%3Crect width='400' height='225' fill='%23f472b6'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='white' font-family='sans-serif' font-size='24'%3ESupport%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='%23f472b6'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='white' font-family='sans-serif' font-size='24'%3ESupport%3C/text%3E%3C/svg%3E", rootPath: "/thumbnails/", autogenerated: true, }, permissions: { canAdmin: false, canWrite: true, canCreate: true, canDelete: false, canRename: true, canRead: true, }, hosts: [ { id: "host-005", name: "Support Host", hostnames: ["support.example.com", "help.example.com"], targetHostname: "support.example.com", }, ], }, { id: "site-mno-303", name: "documentation", displayName: "Documentation", description: "Technical documentation and API references", collectionId: "portfolio-123", thumbnailUrl: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='225'%3E%3Crect width='400' height='225' fill='%2364748b'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='white' font-family='sans-serif' font-size='24'%3EDocs%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='%2364748b'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='white' font-family='sans-serif' font-size='24'%3EDocs%3C/text%3E%3C/svg%3E", rootPath: "/thumbnails/", autogenerated: false, }, permissions: { canAdmin: false, canWrite: true, canCreate: true, canDelete: false, canRename: true, canRead: true, }, hosts: [ { id: "host-006", name: "Docs Host", hostnames: ["docs.example.com", "api.example.com"], targetHostname: "docs.example.com", }, ], }, // Include pinned sites in all sites as well ...mockPinnedSites, ]; // Initial pinned site IDs const initialPinnedSiteIds = mockPinnedSites.map((site) => site.id); export default function PinnedSitesSectionDemo() { const [pinnedSiteIds, setPinnedSiteIds] = useState(initialPinnedSiteIds); // Dialog states const [renameDialogOpen, setRenameDialogOpen] = useState(false); const [duplicateDialogOpen, setDuplicateDialogOpen] = useState(false); const [currentSiteId, setCurrentSiteId] = useState(""); const [newSiteName, setNewSiteName] = useState(""); const [duplicateSiteName, setDuplicateSiteName] = useState(""); const handlePin = useCallback((siteId: string) => { setPinnedSiteIds((prev) => [...prev, siteId]); // TODO: Add your API call here to persist to database // Example: // await fetch('/api/pinned-sites', { // method: 'POST', // body: JSON.stringify({ siteId }), // }); console.log(`Pinned site: ${siteId}`); }, []); const handleUnpin = useCallback((siteId: string) => { setPinnedSiteIds((prev) => prev.filter((id) => id !== siteId)); // TODO: Add your API call here to remove from database // Example: // await fetch(`/api/pinned-sites/${siteId}`, { // method: 'DELETE', // }); console.log(`Unpinned site: ${siteId}`); }, []); // Handlers for page builder action const handlePageBuilder = useCallback((site: SiteFavoritesResponse) => { console.log( `Opening page builder for site: ${site.displayName} (${site.id})`, ); // TODO: Add your navigation logic here // Example with Next.js router: // router.push(`/collection/${site.collectionId}/sites/${site.id}/page-builder`); // Or with window.location: // window.location.href = `/collection/${site.collectionId}/sites/${site.id}/page-builder`; }, []); // Handlers for dashboard action const handleDashboard = useCallback((site: SiteFavoritesResponse) => { console.log(`Opening dashboard for site: ${site.displayName} (${site.id})`); // TODO: Add your navigation logic here // Example with Next.js router: // router.push(`/collection/${site.collectionId}/sites/${site.id}/dashboard`); }, []); // Handlers for settings action const handleSettings = useCallback((site: SiteFavoritesResponse) => { console.log(`Opening settings for site: ${site.displayName} (${site.id})`); // TODO: Add your navigation logic here // Example with Next.js router: // router.push(`/collection/${site.collectionId}/sites/${site.id}/settings`); }, []); // Handlers for rename action const handleRename = useCallback((siteId: string, currentName: string) => { setCurrentSiteId(siteId); setNewSiteName(currentName); setRenameDialogOpen(true); }, []); const handleRenameSubmit = (e: React.FormEvent) => { e.preventDefault(); console.log(`Renaming site ${currentSiteId} to: ${newSiteName}`); // TODO: Add your API call here // await fetch(`/api/sites/${currentSiteId}`, { // method: 'PATCH', // body: JSON.stringify({ displayName: newSiteName }), // }); setRenameDialogOpen(false); }; // Handlers for duplicate action const handleDuplicate = useCallback((siteId: string, suggestedName: string) => { setCurrentSiteId(siteId); setDuplicateSiteName(suggestedName); setDuplicateDialogOpen(true); }, []); const handleDuplicateSubmit = (e: React.FormEvent) => { e.preventDefault(); console.log(`Duplicating site ${currentSiteId} as: ${duplicateSiteName}`); // TODO: Add your API call here // await fetch(`/api/sites/${currentSiteId}/duplicate`, { // method: 'POST', // body: JSON.stringify({ displayName: duplicateSiteName }), // }); setDuplicateDialogOpen(false); }; // Footer buttons factory - used by both sections const getFooterButtons = useCallback((site: SiteFavoritesResponse) => [ { icon: , label: "Page builder", onClick: () => handlePageBuilder(site), }, { icon: , label: "Dashboard", onClick: () => handleDashboard(site), }, ], [handlePageBuilder, handleDashboard]); // Dropdown actions factory - used by All Sites section const getDropdownActions = useCallback( (site: SiteFavoritesResponse, isPinned: boolean) => [ { icon: , label: "Settings", onClick: () => handleSettings(site), show: true, }, { icon: isPinned ? ( ) : ( ), label: isPinned ? "Unpin Site" : "Pin Site", onClick: () => (isPinned ? handleUnpin(site.id) : handlePin(site.id)), show: true, }, { icon: , label: "Rename", onClick: () => handleRename(site.id, site.displayName || site.name), show: site.permissions.canRename, }, { icon: , label: "Duplicate", onClick: () => handleDuplicate(site.id, `${site.displayName || site.name} (Copy)`), show: site.permissions.canCreate, }, ], [handleSettings, handlePin, handleUnpin, handleRename, handleDuplicate], ); return ( <>

{/* Rename Dialog */} {/* Duplicate Dialog */} ); }

Pinned site section

Pinned Sites

My Ecommerce Site

Corporate Blog

All Sites

Marketing Site

Partner Portal

Customer Support

Documentation

My Ecommerce Site

Corporate Blog

Installation

Usage