@c-rex/components 0.3.0-build.29 → 0.3.0-build.30

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "@c-rex/components",
-    "version":  "0.3.0-build.29",
+    "version":  "0.3.0-build.30",
     "files":  [
                   "src"
               ],
@@ -53,6 +53,10 @@
                                                              "types":  "./src/info/information-unit-metadata-grid.tsx",
                                                              "import":  "./src/info/information-unit-metadata-grid.tsx"
                                                          },
+                    "./information-unit-metadata-grid-client":  {
+                                                                    "types":  "./src/info/information-unit-metadata-grid-client.tsx",
+                                                                    "import":  "./src/info/information-unit-metadata-grid-client.tsx"
+                                                                },
                     "./info-card":  {
                                         "types":  "./src/info/info-card.tsx",
                                         "import":  "./src/info/info-card.tsx"
@@ -73,6 +77,10 @@
                                              "types":  "./src/renditions/html.tsx",
                                              "import":  "./src/renditions/html.tsx"
                                          },
+                    "./html-rendition-client":  {
+                                                    "types":  "./src/renditions/html-client.tsx",
+                                                    "import":  "./src/renditions/html-client.tsx"
+                                                },
                     "./image-rendition-container":  {
                                                         "types":  "./src/renditions/container.ts",
                                                         "import":  "./src/renditions/container.ts"
@@ -196,7 +204,27 @@
                     "./footer":  {
                                      "types":  "./src/footer/footer.tsx",
                                      "import":  "./src/footer/footer.tsx"
-                                 }
+                                 },
+                    "./information-unit-carousel-item":  {
+                                                             "types":  "./src/carousel/information-unit-carousel-item.tsx",
+                                                             "import":  "./src/carousel/information-unit-carousel-item.tsx"
+                                                         },
+                    "./information-unit-fragment-ids":  {
+                                                            "types":  "./src/info/information-unit-fragment-ids.ts",
+                                                            "import":  "./src/info/information-unit-fragment-ids.ts"
+                                                        },
+                    "./information-unit-preview-image":  {
+                                                             "types":  "./src/info/information-unit-preview-image.tsx",
+                                                             "import":  "./src/info/information-unit-preview-image.tsx"
+                                                         },
+                    "./restriction-selection-menu":  {
+                                                         "types":  "./src/restriction-menu/restriction-selection-menu.tsx",
+                                                         "import":  "./src/restriction-menu/restriction-selection-menu.tsx"
+                                                     },
+                    "./taxonomy-restriction-menu":  {
+                                                        "types":  "./src/restriction-menu/taxonomy-restriction-menu.tsx",
+                                                        "import":  "./src/restriction-menu/taxonomy-restriction-menu.tsx"
+                                                    }
                 },
     "scripts":  {
                     "storybook":  "storybook dev -p 6006",

package/src/carousel/carousel.tsx

@@ -9,31 +9,30 @@ import {
     createContext,
     useContext,
 } from "react";
-import { cn, findRelatedFragmentShortId, formatDateToLocale, getLanguage, getTitle, getType } from "@c-rex/utils";
+import { cn } from "@c-rex/utils";
 import { Button } from "@c-rex/ui/button";
 import { ArrowLeft, ArrowRight, LoaderCircle } from "lucide-react";
 import { Skeleton } from "@c-rex/ui/skeleton";
 import * as ServiceOptions from "@c-rex/services/client-requests";
 import { documentsGetAllClientService } from "@c-rex/services/client-requests";
 import { CommonItemsModel } from "@c-rex/interfaces";
-import { ImageRenditionContainer } from "../renditions/image/container";
-import { Card } from "@c-rex/ui/card";
-import { Badge } from "@c-rex/ui/badge";
-import { Flag } from "../icons/flag-icon"
 import { Empty } from "../results/empty";
-import { useLocale, useMessages, useTranslations } from "next-intl";
-import Link from "next/link";
+import { useTranslations } from "next-intl";
 import { useBreakpoint } from "@c-rex/ui/hooks";
 import { DEVICE_OPTIONS } from "@c-rex/constants";
 import { Alert, AlertDescription, AlertTitle } from "@c-rex/ui/alert";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@c-rex/ui/tooltip";
 import { toast } from "sonner";
+import { InformationUnitCarouselItem } from "./information-unit-carousel-item";
+import { Card } from "@c-rex/ui/card";
 
 type PageInfo = {
     hasNextPage: boolean;
     hasPreviousPage: boolean;
     pageCount: number;
 };
+
+type CarouselQueryParams = Record<string, unknown>;
+
 type Props = {
     className?: string;
     arrows?: boolean;
@@ -54,7 +53,7 @@ type Props = {
         imageFragmentSubjectIds?: string[];
     }>;
     serviceType: keyof typeof ServiceOptions;
-    queryParams?: Record<string, any>;
+    queryParams?: CarouselQueryParams;
     loadByPages?: boolean;
     linkPattern: string;
     imageFragmentSubjectIds?: string[];
@@ -305,8 +304,11 @@ export const Carousel: FC<Props> = ({
                             </div>
                         )}
                         <div
-                            className="flex will-change-transform transition-all duration-600 ease-[cubic-bezier(0.4,0,0.2,1)] w-full"
-                            style={{ transform: `translateX(-${(current * 100) / slidesToShow}%)` }}
+                            className="flex will-change-transform transition-all duration-600 w-full"
+                            style={{
+                                transform: `translateX(-${(current * 100) / slidesToShow}%)`,
+                                transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+                            }}
                         >
                             {loading && (!data || data.length === 0) ? (
                                 <CarouselSkeletonTrack slidesToShow={slidesToShow} />
@@ -463,63 +465,4 @@ const DefaultRenderCarouselItem: FC<{
     loadImage: boolean;
     linkPattern: string;
     imageFragmentSubjectIds?: string[];
-}> = ({ item, showImages, loadImage, linkPattern, imageFragmentSubjectIds = [] }) => {
-    const locale = useLocale();
-    const messages = useMessages() as Record<string, unknown>;
-    const t = useTranslations("itemTypes");
-
-    const date = formatDateToLocale(item.created!, locale);
-    const title = getTitle(item.titles, item.labels);
-    const itemType = getType(item.class, locale);
-    const itemTypeKey = itemType?.toLowerCase();
-    const itemTypeMessages = (messages.itemTypes || {}) as Record<string, string>;
-    const itemTypeLabel = itemTypeKey && itemTypeMessages[itemTypeKey]
-        ? t(itemTypeKey)
-        : itemType;
-    const language = getLanguage(item.languages)
-    const countryCode = language.split("-")[1] || "";
-    const link = linkPattern.replace("{shortId}", item.shortId!);
-    const previewFragmentShortId = findRelatedFragmentShortId({
-        item,
-        informationSubjectIds: imageFragmentSubjectIds,
-    });
-
-    return (
-        <Link href={link} className="group p-2 flex flex-1">
-            <Card className={cn("p-4 flex-1 justify-between relative", !showImages && "min-h-0")}>
-                {itemType && (
-                    <Badge className="absolute -top-2 -right-2">{itemTypeLabel}</Badge>
-                )}
-
-                {showImages ? (
-                    <div className="h-48 w-full overflow-hidden">
-                        <ImageRenditionContainer
-                            fragmentShortId={loadImage ? previewFragmentShortId : undefined}
-                            emptyImageStyle="h-48 w-full"
-                            skeletonStyle="h-48 w-full"
-                            imageStyle="object-contain object-top h-48 !w-auto max-w-full mx-auto"
-                        />
-                    </div>
-                ) : null}
-
-                <Tooltip>
-                    <TooltipTrigger asChild>
-                        <div className="h-44 overflow-hidden">
-                            <span className="line-clamp-5 text-lg font-semibold group-hover:underline">
-                                {title}
-                            </span>
-                        </div>
-                    </TooltipTrigger>
-                    <TooltipContent className="max-w-sm break-words">{title}</TooltipContent>
-                </Tooltip>
-
-                <div className="flex justify-between w-full">
-                    <span className="w-8 block">
-                        <Flag countryCode={countryCode} />
-                    </span>
-                    <span className="text-gray-400">{date || item.revision}</span>
-                </div>
-            </Card>
-        </Link>
-    );
-};
+}> = (props) => <InformationUnitCarouselItem {...props} />;

package/src/carousel/information-unit-carousel-item.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import type { FC } from "react";
+import Link from "next/link";
+import { useLocale, useMessages, useTranslations } from "next-intl";
+import { Card } from "@c-rex/ui/card";
+import { Badge } from "@c-rex/ui/badge";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@c-rex/ui/tooltip";
+import type { CommonItemsModel } from "@c-rex/interfaces";
+import { Flag } from "../icons/flag-icon";
+import { InformationUnitPreviewImage } from "../info/information-unit-preview-image";
+import { cn, formatDateToLocale, getLanguage, getTitle, getType } from "@c-rex/utils";
+
+type Props = {
+    item: CommonItemsModel;
+    showImages: boolean;
+    loadImage: boolean;
+    linkPattern: string;
+    imageFragmentSubjectIds?: string[];
+};
+
+export const InformationUnitCarouselItem: FC<Props> = ({
+    item,
+    showImages,
+    loadImage,
+    linkPattern,
+    imageFragmentSubjectIds = [],
+}) => {
+    const locale = useLocale();
+    const messages = useMessages() as Record<string, unknown>;
+    const t = useTranslations("itemTypes");
+
+    const date = formatDateToLocale(item.created!, locale);
+    const title = getTitle(item.titles, item.labels);
+    const itemType = getType(item.class, locale);
+    const itemTypeKey = itemType?.toLowerCase();
+    const itemTypeMessages = (messages.itemTypes || {}) as Record<string, string>;
+    const itemTypeLabel = itemTypeKey && itemTypeMessages[itemTypeKey]
+        ? t(itemTypeKey)
+        : itemType;
+    const language = getLanguage(item.languages);
+    const countryCode = language.split("-")[1] || "";
+    const link = linkPattern.replace("{shortId}", item.shortId!);
+
+    return (
+        <Link href={link} className="group p-2 flex flex-1">
+            <Card className={cn("p-4 flex-1 justify-between relative", !showImages && "min-h-0")}>
+                {itemType && (
+                    <Badge className="absolute -top-2 -right-2">{itemTypeLabel}</Badge>
+                )}
+
+                {showImages ? (
+                    <div className="h-48 w-full overflow-hidden">
+                        <InformationUnitPreviewImage
+                            item={item}
+                            imageFragmentSubjectIds={imageFragmentSubjectIds}
+                            loadImage={loadImage}
+                            emptyImageStyle="h-48 w-full"
+                            skeletonStyle="h-48 w-full"
+                            imageStyle="object-contain object-top h-48 !w-auto max-w-full mx-auto"
+                        />
+                    </div>
+                ) : null}
+
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <div className="h-44 overflow-hidden">
+                            <span className="line-clamp-5 text-lg font-semibold group-hover:underline">
+                                {title}
+                            </span>
+                        </div>
+                    </TooltipTrigger>
+                    <TooltipContent className="max-w-sm break-words">{title}</TooltipContent>
+                </Tooltip>
+
+                <div className="flex justify-between w-full">
+                    <span className="w-8 block">
+                        <Flag countryCode={countryCode} />
+                    </span>
+                    <span className="text-gray-400">{date || item.revision}</span>
+                </div>
+            </Card>
+        </Link>
+    );
+};

package/src/directoryNodes/directory-tree-context.tsx

@@ -260,11 +260,13 @@ export const DirectoryTreeSidebarMenu: FC<DirectoryTreeSidebarMenuProps> = ({
 
     if (isLoading && tree.length === 0) {
         return (
-            <div className="pt-4">
+            <div className="pt-4 space-y-2">
                 <Skeleton className="w-auto h-10 mb-2" />
                 <Skeleton className="w-auto h-10 mb-2" />
                 <Skeleton className="w-auto h-10 mb-2 ml-8" />
                 <Skeleton className="w-auto h-10 mb-2 ml-8" />
+                <Skeleton className="w-auto h-10 mb-2" />
+                <div className="px-2 pt-1 text-xs text-muted-foreground">Inhaltsverzeichnis wird geladen...</div>
             </div>
         );
     }

package/src/info/information-unit-fragment-ids.ts

@@ -0,0 +1,28 @@
+import type { CommonItemsModel } from "@c-rex/interfaces";
+import { findRelatedFragmentShortId } from "@c-rex/utils";
+
+type RelatedInformationUnitLike =
+    | CommonItemsModel
+    | { informationUnits?: CommonItemsModel["informationUnits"] }
+    | null
+    | undefined;
+
+export const resolveInformationUnitPreviewFragmentShortId = (
+    item: RelatedInformationUnitLike,
+    informationSubjectIds: string[] = []
+): string | undefined => {
+    return findRelatedFragmentShortId({
+        item,
+        informationSubjectIds,
+    });
+};
+
+export const resolveInformationUnitDescriptionFragmentShortId = (
+    item: RelatedInformationUnitLike,
+    informationSubjectIds: string[] = []
+): string | undefined => {
+    return findRelatedFragmentShortId({
+        item,
+        informationSubjectIds,
+    });
+};

package/src/info/information-unit-metadata-grid-client.tsx

@@ -0,0 +1,368 @@
+"use client";
+
+import { useMemo } from "react";
+import { useLocale, useTranslations } from "next-intl";
+import Link from "next/link";
+import { Card, CardContent, CardHeader, CardTitle } from "@c-rex/ui/card";
+import { Table, TableBody, TableCell, TableRow } from "@c-rex/ui/table";
+import { Flag } from "../icons/flag-icon";
+import { BookmarkButton } from "../favorites/bookmark-button";
+import { renderMetadataDisplayValues } from "./shared";
+import { InformationUnitsGetAllClient } from "../generated/client-components";
+import type {
+    CommonItemsModel,
+    InformationUnitModel,
+    LiteralModel,
+    ObjectRefModel,
+    RenditionModel,
+} from "@c-rex/interfaces";
+import {
+    INFORMATION_UNIT_PROPERTY_PRESENTATION,
+    type InformationUnitPropertyKey,
+} from "@c-rex/services/metadata-presentation-config";
+import { resolveMetadataDisplayProperties } from "@c-rex/services/metadata-view-profile";
+import {
+    extractCountryCodeFromLanguage,
+    getFileRenditionGroups,
+    resolvePreferredLanguage,
+    sortAndDeduplicateLanguages,
+} from "@c-rex/utils";
+
+type MetadataDisplayRow = {
+    key: InformationUnitPropertyKey;
+    label: string;
+    labelSource: "translationKey" | "direct";
+    values: string[];
+    valueType?: "text" | "language" | "rendition";
+    renditions?: RenditionModel[];
+};
+
+type Props = {
+    title: string;
+    linkPattern: string;
+    data: CommonItemsModel;
+    metadataIncludeProperties?: Array<keyof InformationUnitModel>;
+    metadataExcludeProperties?: Array<keyof InformationUnitModel>;
+    showBookmarkButton?: boolean;
+    showFileRenditions?: boolean;
+    embedded?: boolean;
+};
+
+const resolveLiteralLabel = (labels?: LiteralModel[] | null, uiLanguage?: string): string | undefined => {
+    if (!labels || labels.length === 0) return undefined;
+    const language = uiLanguage || "en";
+    const preferred = resolvePreferredLanguage(
+        labels.map((item) => item.language || ""),
+        language
+    );
+    if (preferred) {
+        const exact = labels.find((item) => item.language === preferred)?.value;
+        if (exact) return exact;
+    }
+    return labels.find((item) => item.value)?.value || undefined;
+};
+
+const resolveObjectRefLabel = (item: ObjectRefModel, uiLanguage: string): string | undefined => {
+    return resolveLiteralLabel(item.labels || [], uiLanguage) || item.shortId || item.id || undefined;
+};
+
+const asObjectRefArray = (value: unknown): ObjectRefModel[] => {
+    if (!Array.isArray(value)) return [];
+    return value.filter((item): item is ObjectRefModel => Boolean(item && typeof item === "object"));
+};
+
+const asLiteralArray = (value: unknown): LiteralModel[] => {
+    if (!Array.isArray(value)) return [];
+    return value.filter((item): item is LiteralModel => Boolean(item && typeof item === "object"));
+};
+
+const buildMetadataDisplayRows = (
+    data: CommonItemsModel,
+    uiLanguage: string,
+    includeProperties: InformationUnitPropertyKey[]
+): MetadataDisplayRow[] => {
+    const preferredTitle = resolveLiteralLabel(data.titles || [], uiLanguage) || resolveLiteralLabel(data.labels || [], uiLanguage);
+    const rows: MetadataDisplayRow[] = [];
+
+    for (const key of includeProperties) {
+        const config = INFORMATION_UNIT_PROPERTY_PRESENTATION[key];
+        if (!config?.metadataDisplay?.supported) continue;
+
+        if (key === "labels") continue;
+
+        if (key === "titles") {
+            if (preferredTitle) {
+                rows.push({
+                    key,
+                    label: key,
+                    labelSource: "translationKey",
+                    values: [preferredTitle],
+                    valueType: "text",
+                });
+            }
+            continue;
+        }
+
+        const value = (data as InformationUnitModel)[key];
+        if (value == null) continue;
+
+        if (key === "languages") {
+            const languages = sortAndDeduplicateLanguages((value as string[]) || []);
+            if (languages.length > 0) {
+                rows.push({
+                    key,
+                    label: key,
+                    labelSource: "translationKey",
+                    values: languages,
+                    valueType: "language",
+                });
+            }
+            continue;
+        }
+
+        if (config.valueKind === "scalar") {
+            rows.push({
+                key,
+                label: key,
+                labelSource: "translationKey",
+                values: [String(value)],
+                valueType: "text",
+            });
+            continue;
+        }
+
+        if (config.valueKind === "stringArray") {
+            const values = Array.from(new Set((value as string[]).map((item) => String(item)).filter(Boolean)));
+            if (values.length > 0) {
+                rows.push({
+                    key,
+                    label: key,
+                    labelSource: "translationKey",
+                    values,
+                    valueType: "text",
+                });
+            }
+            continue;
+        }
+
+        if (config.valueKind === "literalArray") {
+            const preferred = resolveLiteralLabel(asLiteralArray(value), uiLanguage);
+            if (preferred) {
+                rows.push({
+                    key,
+                    label: key,
+                    labelSource: "translationKey",
+                    values: [preferred],
+                    valueType: "text",
+                });
+            }
+            continue;
+        }
+
+        if (config.valueKind === "objectRef") {
+            const label = resolveObjectRefLabel(value as ObjectRefModel, uiLanguage);
+            if (label) {
+                rows.push({
+                    key,
+                    label: key,
+                    labelSource: "translationKey",
+                    values: [label],
+                    valueType: "text",
+                });
+            }
+            continue;
+        }
+
+        if (config.valueKind === "objectRefArray") {
+            const refs = asObjectRefArray(value);
+            if (refs.length === 0) continue;
+
+            const values = Array.from(
+                new Set(
+                    refs
+                        .map((ref) => resolveObjectRefLabel(ref, uiLanguage))
+                        .filter((label): label is string => Boolean(label))
+                )
+            ).sort((a, b) => a.localeCompare(b));
+
+            if (values.length === 0) continue;
+
+            rows.push({
+                key,
+                label: key,
+                labelSource: "translationKey",
+                values,
+                valueType: "text",
+            });
+            continue;
+        }
+
+        if (config.valueKind === "renditionArray") {
+            const renditions = Array.isArray(value)
+                ? value.filter((item): item is RenditionModel => Boolean(item && typeof item === "object"))
+                : [];
+            if (renditions.length === 0) continue;
+            if (getFileRenditionGroups({ renditions }).length === 0) continue;
+
+            rows.push({
+                key,
+                label: "files",
+                labelSource: "translationKey",
+                values: [],
+                valueType: "rendition",
+                renditions,
+            });
+        }
+    }
+
+    return rows;
+};
+
+const normalizeVersionItems = (items: CommonItemsModel[], uiLanguage: string) => {
+    const uniqueByShortId = new Map<string, { shortId: string; language: string }>();
+
+    items.forEach((item) => {
+        const shortId = item.shortId?.trim();
+        if (!shortId) return;
+        const language = resolvePreferredLanguage(item.languages, uiLanguage);
+        if (!language) return;
+        uniqueByShortId.set(shortId, { shortId, language });
+    });
+
+    return Array.from(uniqueByShortId.values()).sort((a, b) => {
+        const languageOrder = a.language.localeCompare(b.language);
+        if (languageOrder !== 0) return languageOrder;
+        return a.shortId.localeCompare(b.shortId);
+    });
+};
+
+const AvailableInRow = ({
+    versionOfShortId,
+    currentShortId,
+    linkPattern,
+}: {
+    versionOfShortId?: string | null;
+    currentShortId?: string | null;
+    linkPattern: string;
+}) => {
+    const t = useTranslations();
+    const locale = useLocale();
+
+    if (!versionOfShortId) return null;
+
+    return (
+        <InformationUnitsGetAllClient
+            queryParams={{
+                Restrict: [`versionOf.shortId=${versionOfShortId}`],
+                Fields: ["shortId", "languages", "labels", "versionOf"],
+                PageNumber: 1,
+                PageSize: 200,
+                Sort: ["languages"],
+            }}
+        >
+            {({ data }) => {
+                const versions = normalizeVersionItems(data?.items || [], locale)
+                    .filter((item) => item.shortId !== currentShortId);
+
+                if (versions.length === 0) return null;
+
+                return (
+                    <TableRow className="min-h-12">
+                        <TableCell className="font-medium w-28 pl-4">
+                            <h4 className="text-sm font-medium">{t("availableIn")}</h4>
+                        </TableCell>
+                        <TableCell className="text-xs text-muted-foreground flex items-center gap-2 min-h-12">
+                            {versions.map((item) => (
+                                <span className="w-8 block border" key={item.shortId}>
+                                    <Link
+                                        href={linkPattern.replace("{shortId}", item.shortId)}
+                                        title={item.language}
+                                    >
+                                        <Flag countryCode={extractCountryCodeFromLanguage(item.language)} />
+                                    </Link>
+                                </span>
+                            ))}
+                        </TableCell>
+                    </TableRow>
+                );
+            }}
+        </InformationUnitsGetAllClient>
+    );
+};
+
+export const InformationUnitMetadataGridClient = ({
+    title,
+    data,
+    embedded = false,
+    linkPattern,
+    metadataIncludeProperties,
+    metadataExcludeProperties,
+    showBookmarkButton = false,
+    showFileRenditions = true,
+}: Props) => {
+    const t = useTranslations();
+    const locale = useLocale();
+
+    const metadataRows = useMemo(() => {
+        const includeProperties = resolveMetadataDisplayProperties({
+            includeProperties: metadataIncludeProperties as string[] | undefined,
+            excludeProperties: showFileRenditions
+                ? (metadataExcludeProperties as string[] | undefined)
+                : [...(metadataExcludeProperties || []), "renditions"],
+        });
+
+        return buildMetadataDisplayRows(data, locale, includeProperties);
+    }, [data, locale, metadataExcludeProperties, metadataIncludeProperties, showFileRenditions]);
+
+    const cardContent = (
+        <CardContent className="space-y-3 !p-0">
+            <Table className="table-fixed">
+                <TableBody>
+                    {showBookmarkButton && (
+                        <TableRow className="min-h-12">
+                            <TableCell className="font-medium w-32 pl-4 align-top">
+                                <h4 className="text-sm font-medium">{t("favorites")}</h4>
+                            </TableCell>
+                            <TableCell className="min-h-12 pt-3 text-xs text-muted-foreground align-top break-words whitespace-normal">
+                                <BookmarkButton shortId={data.shortId!} />
+                            </TableCell>
+                        </TableRow>
+                    )}
+
+                    {metadataRows.map((row) => (
+                        <TableRow key={`${row.key}:${row.label}`} className="min-h-12">
+                            <TableCell className="font-medium w-32 pl-4 align-top">
+                                <h4 className="text-sm font-medium capitalize">
+                                    {row.labelSource === "translationKey" ? t(row.label) : row.label}
+                                </h4>
+                            </TableCell>
+                            <TableCell className="min-h-12 text-xs text-muted-foreground align-top break-words whitespace-normal [&_*]:break-words">
+                                {renderMetadataDisplayValues(row, locale)}
+                            </TableCell>
+                        </TableRow>
+                    ))}
+
+                    <AvailableInRow
+                        versionOfShortId={data.versionOf?.shortId}
+                        currentShortId={data.shortId}
+                        linkPattern={linkPattern}
+                    />
+                </TableBody>
+            </Table>
+        </CardContent>
+    );
+
+    if (embedded) return cardContent;
+
+    return (
+        <Card className="!p-0 !gap-0">
+            <CardHeader>
+                <CardTitle className="text-lg flex justify-between items-end">
+                    {title}
+                    {showBookmarkButton && <BookmarkButton shortId={data.shortId!} />}
+                </CardTitle>
+            </CardHeader>
+            {cardContent}
+        </Card>
+    );
+};