All site section

1"use client";
2 
3import { SiteCard } from "@/components/bloks/site-card";
4import type { ComponentProps } from "react";
5 
6interface SiteData {
7  id: string;
8  name: string;
9  displayName: string;
10  collectionName?: string;
11  thumbnail: {
12    url: string;
13  };
14  permissions: {
15    canRename?: boolean;
16    canCreate?: boolean;
17  };
18  hosts: Array<{
19    targetHostname?: string;
20  }>;
21  collectionId: string;
22}
23 
24interface FooterButton {
25  icon: React.ReactNode;
26  label: string;
27  onClick: () => void;
28}
29 
30interface DropdownAction {
31  icon: React.ReactNode;
32  label: string;
33  onClick: () => void;
34  show?: boolean;
35}
36 
37interface AllSitesProps<T extends SiteData> {
38  allSites?: T[];
39  pinnedSiteIds?: string[];
40  getFooterButtons: (site: T) => FooterButton[];
41  getDropdownActions?: (site: T, isPinned: boolean) => DropdownAction[];
42}
43 
44export function AllSitesSection<T extends SiteData>({
45  allSites = [],
46  pinnedSiteIds = [],
47  getFooterButtons,
48  getDropdownActions,
49  ...props
50}: AllSitesProps<T> & ComponentProps<"div">) {
51  const pinnedSiteIdsSet = new Set(pinnedSiteIds);
52 
53  return (
54    <div className="w-full space-y-6" {...props}>
55      {/* All Sites Section */}
56      <section className="w-full bg-subtle-bg rounded-lg p-6">
57        <div className="mb-4">
58          <h2 className="text-lg font-semibold">All Sites</h2>
59          <p className="text-sm text-muted-foreground mt-1 wrap-break-words">
60            Browse all available sites and pin your favorites for quick access
61          </p>
62        </div>
63 
64        {/* Grid layout for all sites */}
65        <div className="grid grid-cols-3 xl:grid-cols-3 gap-4">
66          {allSites.map((site) => {
67            const isPinned = pinnedSiteIdsSet.has(site.id);
68 
69            return (
70              <div key={site.id}>
71                <SiteCard
72                  site={site}
73                  showPinOverlay={false}
74                  footerButtons={getFooterButtons(site)}
75                  dropdownActions={getDropdownActions?.(site, isPinned) || []}
76                />
77              </div>
78            );
79          })}
80        </div>
81      </section>
82    </div>
83  );
84}