Site card

1"use client";
2 
3import { Button } from "@/components/ui/button";
4import { Card, CardContent, CardFooter } from "@/components/ui/card";
5import {
6  DropdownMenu,
7  DropdownMenuContent,
8  DropdownMenuItem,
9  DropdownMenuTrigger,
10} from "@/components/ui/dropdown-menu";
11import { MoreVertical, PinOff } from "lucide-react";
12import type { ComponentProps } from "react";
13import { useState } from "react";
14 
15interface SiteData {
16  id: string;
17  name: string;
18  displayName: string;
19  collectionName?: string;
20  thumbnail: {
21    url: string;
22  };
23  permissions: {
24    canRename?: boolean;
25    canCreate?: boolean;
26  };
27  hosts: Array<{
28    targetHostname?: string;
29  }>;
30  collectionId: string;
31}
32 
33interface FooterButton {
34  icon: React.ReactNode;
35  label: string;
36  onClick: () => void;
37}
38 
39interface DropdownAction {
40  icon: React.ReactNode;
41  label: string;
42  onClick: () => void;
43  show?: boolean;
44}
45 
46interface PinnedSiteCardProps<T extends SiteData> {
47  site: T;
48  isDisabled?: boolean;
49  onUnpin?: (siteId: string) => void;
50  showPinOverlay?: boolean;
51  showDropdownMenu?: boolean;
52  footerButtons?: FooterButton[];
53  dropdownActions?: DropdownAction[];
54}
55 
56export function SiteCard<T extends SiteData>({
57  site,
58  isDisabled = false,
59  onUnpin,
60  showPinOverlay = true,
61  showDropdownMenu = true,
62  footerButtons = [],
63  dropdownActions = [],
64  ...props
65}: PinnedSiteCardProps<T> & ComponentProps<"div">) {
66  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
67 
68  const handleCardClick = (_e: React.MouseEvent) => {
69    if (!isDisabled) {
70      console.log(
71        `Navigate to /collection/${site.collectionId}/sites/${site.id}/overview`,
72      );
73    }
74  };
75 
76  const handleMenuClick = (e: React.MouseEvent) => {
77    e.preventDefault();
78    e.stopPropagation();
79  };
80 
81  // Filter dropdown actions based on show property
82  const visibleDropdownActions = dropdownActions.filter(
83    (action) => action.show !== false,
84  );
85 
86  return (
87    <Card
88      {...props}
89      elevation="sm"
90      style="outline"
91      className={`group relative w-full cursor-pointer transition-all overflow-hidden p-0 gap-0 h-[226px] flex flex-col${
92        isDisabled ? " opacity-40 pointer-events-none" : ""
93      }`}
94      onClick={handleCardClick}
95    >
96      <CardContent
97        className={`p-0 flex-1 min-h-0 transition-all duration-200 ease-in-out ${
98          site.collectionName ? "group-hover:flex-[0.6]" : ""
99        }`}
100      >
101        <div className="relative w-full h-full bg-muted">
102          <img
103// … truncated