"use client"; import { type SiteFavoritesResponse, initialPinnedSiteIds, mockAllSites, } from "@/app/content/bloks/all-site-section/all-site-section.mock-data"; 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 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

My Ecommerce Site

Corporate Blog

Marketing Site

Partner Portal

Customer Support

Documentation

Installation

Usage