Pinned site section

1"use client";
2 
3import { SiteCard } from "@/components/bloks/site-card";
4import { Button } from "@/components/ui/button";
5import EmptyPin from "@/lib/empty-pin.svg";
6import type { ComponentProps } from "react";
7 
8const getSvgUrl = (svg: unknown): string => {
9  if (typeof svg === "string") {
10    return svg;
11  }
12  if (svg && typeof svg === "object") {
13    const svgObj = svg as Record<string, unknown>;
14    return (svgObj.src as string) || (svgObj.default as string) || String(svg);
15  }
16  return String(svg || "");
17};
18 
19interface SiteData {
20  id: string;
21  name: string;
22  displayName: string;
23  collectionName?: string;
24  thumbnail: {
25    url: string;
26  };
27  permissions: {
28    canRename?: boolean;
29    canCreate?: boolean;
30  };
31  hosts: Array<{
32    targetHostname?: string;
33  }>;
34  collectionId: string;
35}
36 
37interface FooterButton {
38  icon: React.ReactNode;
39  label: string;
40  onClick: () => void;
41}
42 
43interface DropdownAction {
44  icon: React.ReactNode;
45  label: string;
46  onClick: () => void;
47  show?: boolean;
48}
49 
50interface PinnedSitesProps<T extends SiteData> {
51  allSites?: T[];
52  pinnedSiteIds?: string[];
53  onUnpin?: (siteId: string) => void;
54  getFooterButtons: (site: T) => FooterButton[];
55  getDropdownActions?: (site: T) => DropdownAction[];
56}
57 
58export function PinnedSitesSection<T extends SiteData>({
59  allSites = [],
60  pinnedSiteIds = [],
61  onUnpin,
62  getFooterButtons,
63  getDropdownActions,
64  ...props
65}: PinnedSitesProps<T> & ComponentProps<"div">) {
66  const pinnedSiteIdsSet = new Set(pinnedSiteIds);
67  const pinnedSites = allSites.filter((site) => pinnedSiteIdsSet.has(site.id));
68 
69  return (
70    <div className="w-full space-y-6" {...props}>
71      {/* Pinned Sites Section */}
72      <section className="w-full bg-subtle-bg rounded-lg p-6">
73        {/* Header */}
74        <div className="mb-4">
75          <h2 className="text-lg font-semibold">Pinned Sites</h2>
76        </div>
77 
78        {/* Horizontal scrollable container */}
79        {pinnedSites.length > 0 ? (
80          <div className="overflow-x-auto -mx-6 px-6">
81            <div className="flex gap-4 pb-4">
82              {pinnedSites.map((site) => (
83                <div key={site.id}>
84                  <SiteCard
85                    site={site}
86                    onUnpin={onUnpin}
87                    showDropdownMenu={!!getDropdownActions}
88                    footerButtons={getFooterButtons(site)}
89                    dropdownActions={getDropdownActions?.(site) || []}
90                  />
91                </div>
92// … truncated