@c-rex/components 0.1.38 → 0.1.39

package/src/results/{table-with-images.tsx → information-unit-search-results-card-list.tsx}

@@ -1,127 +1,125 @@
-import { FC } from "react";
-import { CommonItemsModel } from "@c-rex/interfaces";
-import { FileStack } from "lucide-react";
-import { FileDownloadDropdown } from "../renditions/file-download";
-import { cn, getType, getTitle, getVersions } from "@c-rex/utils";
-import { Button } from "@c-rex/ui/button";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@c-rex/ui/tooltip";
-import { Favorite, ResultTypes } from "@c-rex/types";
-import { RESULT_TYPES } from "@c-rex/constants";
-import { FavoriteButton } from "../favorites/favorite-button";
-import { ImageRenditionContainer } from "../renditions/image/container";
-import { BookmarkButton } from "../favorites/bookmark-button";
-import { HtmlRendition } from "../renditions/html";
-
-interface TableWithImageProps {
-    items: CommonItemsModel[];
-    query?: string;
-    markersList?: Favorite[];
-    disabledResults?: ResultTypes[];
-    imageRestrictions?: string[];
-    showActions?: boolean;
-}
-
-
-export const TableWithImage: FC<TableWithImageProps> = ({
-    items,
-    query = "",
-    disabledResults = [],
-    imageRestrictions = [],
-    showActions = true,
-}) => {
-    return (
-        <div className="flex-1">
-            {items.map((item, index) => {
-                const title = getTitle(item.titles, item.labels);
-                const itemType = getType(item.class);
-                const disabled = disabledResults.includes(itemType);
-                const isDocument = itemType === RESULT_TYPES.DOCUMENT;
-                const multipleVersions = getVersions(item.versionOf);
-                const packageId = item.packages && item.packages.length > 0 ? item.packages[0]?.shortId : null;
-
-                let itemLink = `/topics/${item.shortId}/content`
-                if (isDocument) {
-                    itemLink = `/documents/${item.shortId}/details`
-                }
-                itemLink += `?q=${query}`
-
-                if (packageId) {
-                    itemLink += `&package=${packageId}`
-                }
-
-                return (
-                    <div
-                        key={item.shortId}
-                        className={cn(
-                            "min-h-12 flex flex-wrap items-center border px-4 py-2 gap-2 rounded",
-                            index == items.length - 1 ? "" : "mb-4",
-                            `c-rex-result-item c-rex-result-${itemType}`,
-                            disabled && "c-rex-result-item-disabled",
-                        )}
-                    >
-                        <div className="h-16 w-16 flex items-start">
-                            <ImageRenditionContainer
-                                itemShortId={item.shortId!}
-                                imageRestrictions={imageRestrictions}
-                                emptyImageStyle="h-16 w-16"
-                            />
-                        </div>
-
-                        <div className="flex-1 p-2 flex flex-col">
-                            <span className="text-sm text-muted-foreground">
-                                {item.revision}
-                            </span>
-
-                            <span className="text-lg font-medium">
-                                {disabled ? (
-                                    title
-                                ) : (
-                                    <a className="hover:underline" href={itemLink}>{title}</a>
-                                )}
-                            </span>
-
-                            <span className="text-sm">
-                                {itemType}
-                            </span>
-                            <span className="text-sm">
-                                <HtmlRendition shortId={item.shortId!} />
-                            </span>
-                        </div>
-
-                        <div className="flex flex-col p-2 ml-auto justify-center">
-                            <div className="flex gap-2">
-                                <FileDownloadDropdown renditions={item.renditions} />
-
-                                <FavoriteButton
-                                    id={item.shortId!}
-                                    type={itemType}
-                                    label={title}
-                                />
-
-                                {multipleVersions.length > 1 && (
-                                    <Tooltip>
-                                        <TooltipTrigger asChild>
-                                            <Button variant="ghost" size="icon">
-                                                <FileStack />
-                                            </Button>
-                                        </TooltipTrigger>
-                                        <TooltipContent>
-                                            Available in: {multipleVersions.join(", ")}
-                                        </TooltipContent>
-                                    </Tooltip>
-                                )}
-
-                                {isDocument && (
-                                    <BookmarkButton
-                                        shortId={item.shortId!}
-                                        triggerVariant="ghost"
-                                    />
-                                )}
-                            </div>
-                        </div>
-                    </div>
-                );
-            })}
-        </div>
-    );
-};
+import { FC } from "react";
+import { CommonItemsModel } from "@c-rex/interfaces";
+import { FileStack } from "lucide-react";
+import { FileDownloadDropdown } from "../renditions/file-download";
+import { cn } from "@c-rex/utils";
+import { Button } from "@c-rex/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@c-rex/ui/tooltip";
+import { Favorite, ResultTypes } from "@c-rex/types";
+import { RESULT_TYPES } from "@c-rex/constants";
+import { FavoriteButton } from "../favorites/favorite-button";
+import { ImageRenditionContainer } from "../renditions/image/container";
+import { BookmarkButton } from "../favorites/bookmark-button";
+import { HtmlRendition } from "../renditions/html";
+import { getResultItemSummary } from "./summary";
+
+interface InformationUnitSearchResultsCardListProps {
+    items: CommonItemsModel[];
+    query?: string;
+    markersList?: Favorite[];
+    disabledResults?: ResultTypes[];
+    imageRestrictions?: string[];
+    showActions?: boolean;
+}
+
+
+export const InformationUnitSearchResultsCardList: FC<InformationUnitSearchResultsCardListProps> = ({
+    items,
+    query = "",
+    disabledResults = [],
+    imageRestrictions = [],
+    showActions = true,
+}) => {
+    return (
+        <div className="flex-1">
+            {items.map((item, index) => {
+                const { title, itemType, multipleVersions, packageId } = getResultItemSummary(item);
+                const disabled = disabledResults.includes(itemType);
+                const isDocument = itemType === RESULT_TYPES.DOCUMENT;
+
+                let itemLink = `/topics/${item.shortId}/content`
+                if (isDocument) {
+                    itemLink = `/documents/${item.shortId}/details`
+                }
+                itemLink += `?q=${query}`
+
+                if (packageId) {
+                    itemLink += `&package=${packageId}`
+                }
+
+                return (
+                    <div
+                        key={item.shortId}
+                        className={cn(
+                            "min-h-12 flex flex-wrap items-center border px-4 py-2 gap-2 rounded",
+                            index == items.length - 1 ? "" : "mb-4",
+                            `c-rex-result-item c-rex-result-${itemType}`,
+                            disabled && "c-rex-result-item-disabled",
+                        )}
+                    >
+                        <div className="h-16 w-16 flex items-start">
+                            <ImageRenditionContainer
+                                itemShortId={item.shortId!}
+                                imageRestrictions={imageRestrictions}
+                                emptyImageStyle="h-16 w-16"
+                            />
+                        </div>
+
+                        <div className="flex-1 p-2 flex flex-col">
+                            <span className="text-sm text-muted-foreground">
+                                {item.revision}
+                            </span>
+
+                            <span className="text-lg font-medium">
+                                {disabled ? (
+                                    title
+                                ) : (
+                                    <a className="hover:underline" href={itemLink}>{title}</a>
+                                )}
+                            </span>
+
+                            <span className="text-sm">
+                                {itemType}
+                            </span>
+                            <span className="text-sm">
+                                <HtmlRendition shortId={item.shortId!} />
+                            </span>
+                        </div>
+
+                        <div className="flex flex-col p-2 ml-auto justify-center">
+                            <div className="flex gap-2">
+                                <FileDownloadDropdown renditions={item.renditions} />
+
+                                <FavoriteButton
+                                    id={item.shortId!}
+                                    type={itemType}
+                                    label={title}
+                                />
+
+                                {multipleVersions.length > 1 && (
+                                    <Tooltip>
+                                        <TooltipTrigger asChild>
+                                            <Button variant="ghost" size="icon">
+                                                <FileStack />
+                                            </Button>
+                                        </TooltipTrigger>
+                                        <TooltipContent>
+                                            Available in: {multipleVersions.join(", ")}
+                                        </TooltipContent>
+                                    </Tooltip>
+                                )}
+
+                                {isDocument && (
+                                    <BookmarkButton
+                                        shortId={item.shortId!}
+                                        triggerVariant="ghost"
+                                    />
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                );
+            })}
+        </div>
+    );
+};

package/src/results/{cards.tsx → information-unit-search-results-cards.tsx}

@@ -1,99 +1,99 @@
-"use client"
-
-import { FC, useState } from "react";
-
-import Link from "next/link";
-import { cn } from "@c-rex/utils";
-import { Badge } from "@c-rex/ui/badge";
-import { useTranslations } from "next-intl";
-import { TopicsResponseItem } from "@c-rex/interfaces";
-import { Card } from "@c-rex/ui/card";
-import { useQueryState } from "nuqs";
-
-interface BlogViewProps {
-    items: TopicsResponseItem[];
-}
-
-const BlogView: FC<BlogViewProps> = ({ items }) => {
-    const t = useTranslations("results")
-    const [isLoading, setLoading] = useState(true);
-    const [query] = useQueryState("search");
-
-    return (
-        <div className="grid gap-6 grid-cols-2">
-
-            {items.map((item, index) => (
-                <Card
-                    key={item.shortId}
-                    className={cn(
-                        `c-rex-result-item blog-card relative p-0 c-rex-result-${item.type.toLowerCase()}`,
-                        index == 0
-                            ? "col-span-2 grid grid-cols-1 gap-3 md:grid-cols-2 md:gap-6"
-                            : "flex flex-col space-y-2",
-                        item.disabled ? "c-rex-result-item-disabled" : ""
-                    )}
-                >
-
-                    <div className={
-                        cn(
-                            "w-full overflow-hidden",
-                            index == 0 ? "rounded-tl-xl rounded-bl-xl" : "rounded-t-xl"
-                        )}>
-                        {item.image && (
-                            <img
-                                src={item.image}
-                                alt={item.title}
-                                className={cn(
-                                    "size-full object-cover object-center",
-                                    isLoading ? "bg-gray-300 animate-pulse" : "",
-                                )}
-                                style={{
-                                    width: "100%", height: index == 0 ? "auto" : "190px"
-                                }}
-                                loading={index == 0 ? "eager" : "lazy"}
-                                onLoad={() => setLoading(false)}
-                                onError={() => setLoading(false)}
-                            />
-                        )}
-
-                    </div>
-
-                    <div
-                        className={cn(
-                            "flex flex-1 flex-col p-4",
-                            index == 0 ? "justify-around" : "justify-between",
-                        )}
-                    >
-                        <div className="w-full">
-                            <h2 className="my-1.5 line-clamp-2 font-heading text-2xl">
-                                {item.title}
-                            </h2>
-
-                            {item.type && (
-                                <Badge variant="secondary">
-                                    {item.type}
-                                </Badge>
-                            )}
-                        </div>
-                        <div className="mt-4 flex items-end flex-row gap-2">
-                            <p className="m-0 flex-1 text-sm text-muted-foreground">{item.description?.substring(0, 100)}...</p>
-
-                            {item.created && (
-                                <p className="m-0 text-sm text-muted-foreground">{item.created}</p>
-                            )}
-
-                        </div>
-                    </div>
-
-                    {!item.disabled && (
-                        <Link href={`${item.link}?q=${query}`} className="absolute inset-0">
-                            <span className="sr-only">{t("viewArticle")}</span>
-                        </Link>
-                    )}
-                </Card>
-            ))}
-        </div>
-    );
-};
-
-export default BlogView;
+"use client"
+
+import { FC, useState } from "react";
+
+import Link from "next/link";
+import { cn } from "@c-rex/utils";
+import { Badge } from "@c-rex/ui/badge";
+import { useTranslations } from "next-intl";
+import { TopicsResponseItem } from "@c-rex/interfaces";
+import { Card } from "@c-rex/ui/card";
+import { useQueryState } from "nuqs";
+
+interface InformationUnitSearchResultsCardsProps {
+    items: TopicsResponseItem[];
+}
+
+const InformationUnitSearchResultsCards: FC<InformationUnitSearchResultsCardsProps> = ({ items }) => {
+    const t = useTranslations("results")
+    const [isLoading, setLoading] = useState(true);
+    const [query] = useQueryState("search");
+
+    return (
+        <div className="grid gap-6 grid-cols-2">
+
+            {items.map((item, index) => (
+                <Card
+                    key={item.shortId}
+                    className={cn(
+                        `c-rex-result-item information-unit-search-results-card relative p-0 c-rex-result-${item.type.toLowerCase()}`,
+                        index == 0
+                            ? "col-span-2 grid grid-cols-1 gap-3 md:grid-cols-2 md:gap-6"
+                            : "flex flex-col space-y-2",
+                        item.disabled ? "c-rex-result-item-disabled" : ""
+                    )}
+                >
+
+                    <div className={
+                        cn(
+                            "w-full overflow-hidden",
+                            index == 0 ? "rounded-tl-xl rounded-bl-xl" : "rounded-t-xl"
+                        )}>
+                        {item.image && (
+                            <img
+                                src={item.image}
+                                alt={item.title}
+                                className={cn(
+                                    "size-full object-cover object-center",
+                                    isLoading ? "bg-gray-300 animate-pulse" : "",
+                                )}
+                                style={{
+                                    width: "100%", height: index == 0 ? "auto" : "190px"
+                                }}
+                                loading={index == 0 ? "eager" : "lazy"}
+                                onLoad={() => setLoading(false)}
+                                onError={() => setLoading(false)}
+                            />
+                        )}
+
+                    </div>
+
+                    <div
+                        className={cn(
+                            "flex flex-1 flex-col p-4",
+                            index == 0 ? "justify-around" : "justify-between",
+                        )}
+                    >
+                        <div className="w-full">
+                            <h2 className="my-1.5 line-clamp-2 font-heading text-2xl">
+                                {item.title}
+                            </h2>
+
+                            {item.type && (
+                                <Badge variant="secondary">
+                                    {item.type}
+                                </Badge>
+                            )}
+                        </div>
+                        <div className="mt-4 flex items-end flex-row gap-2">
+                            <p className="m-0 flex-1 text-sm text-muted-foreground">{item.description?.substring(0, 100)}...</p>
+
+                            {item.created && (
+                                <p className="m-0 text-sm text-muted-foreground">{item.created}</p>
+                            )}
+
+                        </div>
+                    </div>
+
+                    {!item.disabled && (
+                        <Link href={`${item.link}?q=${query}`} className="absolute inset-0">
+                            <span className="sr-only">{t("viewArticle")}</span>
+                        </Link>
+                    )}
+                </Card>
+            ))}
+        </div>
+    );
+};
+
+export default InformationUnitSearchResultsCards;