@c-rex/components 0.3.0-build.36 → 0.3.0-build.38

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "@c-rex/components",
-    "version":  "0.3.0-build.36",
+    "version":  "0.3.0-build.38",
     "files":  [
                   "src"
               ],
@@ -232,7 +232,11 @@
                     "./taxonomy-restriction-command-menu":  {
                                                                 "types":  "./src/restriction-menu/taxonomy-restriction-command-menu.tsx",
                                                                 "import":  "./src/restriction-menu/taxonomy-restriction-command-menu.tsx"
-                                                            }
+                                                            },
+                    "./blog-author-card":  {
+                                               "types":  "./src/blog/blog-author-card.tsx",
+                                               "import":  "./src/blog/blog-author-card.tsx"
+                                           }
                 },
     "scripts":  {
                     "storybook":  "storybook dev -p 6006",

package/src/article/article-action-bar.tsx

@@ -15,8 +15,10 @@ type Props = {
     id: string;
     articleType: ResultTypes;
     favoriteLabel: string;
+    className?: string;
+    children?: React.ReactNode;
 }
-export const ArticleActionBar: FC<Props> = ({ id, articleType, favoriteLabel }) => {
+export const ArticleActionBar: FC<Props> = ({ id, articleType, favoriteLabel, className, children }) => {
     const t = useTranslations();
     const inputRef = useRef<HTMLInputElement>(null);
     const { next } = useHighlight();
@@ -32,7 +34,10 @@ export const ArticleActionBar: FC<Props> = ({ id, articleType, favoriteLabel })
     }, [open]);
 
     return (
-        <div className="w-9 flex gap-2 transition-all duration-300 z-20 items-end flex-col sticky top-40 md:top-24 self-start">
+        <div className={cn(
+            "w-9 flex gap-2 transition-all duration-300 z-20 items-end flex-col sticky top-32 self-start",
+            className
+        )}>
 
             <SidebarTrigger side="right" />
 
@@ -101,6 +106,8 @@ export const ArticleActionBar: FC<Props> = ({ id, articleType, favoriteLabel })
 
                 </>
             )}
+
+            {children}
         </div>
     )
 }

package/src/autocomplete.tsx

@@ -101,27 +101,6 @@ export const AutoComplete = ({
         });
     };
 
-    const clearSearch = () => {
-        setQuery("");
-        setOpen(false);
-        const nextParams = new URLSearchParams(keepParams ? searchParams.toString() : "");
-        nextParams.set("page", "1");
-        nextParams.delete("search");
-        const queryString = nextParams.toString();
-
-        onSelectParams?.forEach(param => {
-            nextParams.set(param.key, param.value);
-        });
-        const targetUrl = queryString ? `${onSelectPath}?${queryString}` : onSelectPath;
-        const currentUrl = `${pathname}${searchParams.toString().length > 0 ? `?${searchParams.toString()}` : ""}`;
-        if (targetUrl === currentUrl) return;
-
-        startSearchNavigation();
-        startNavigation(() => {
-            router.push(targetUrl);
-        });
-    };
-
     useEffect(() => setQuery(initialValue), [initialValue]);
     useEffect(() => {
         stopSearchNavigation();
@@ -199,6 +178,7 @@ export const AutoComplete = ({
                             setQuery(e.target.value);
                             setOpen(true);
                         }}
+                        onFocus={() => setOpen(true)}
                     />
                     {isNavigating || searchNavigationPending ? (
                         <InputGroupAddon align="inline-end">
@@ -210,7 +190,7 @@ export const AutoComplete = ({
                                 size="icon-xs"
                                 variant="ghost"
                                 aria-label={t("clearSearch")}
-                                onClick={clearSearch}
+                                onClick={() => setQuery("")}
                             >
                                 <X className="size-3" />
                             </InputGroupButton>
@@ -221,7 +201,9 @@ export const AutoComplete = ({
 
             {open && (
                 <ul className="suggestions-list absolute z-10 w-full bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto">
-                    {loading ? (
+                    {query.length === 0 ? (
+                        <li className="px-4 py-2 text-sm text-muted-foreground">{t("typingHint")}</li>
+                    ) : loading ? (
                         <li>
                             <div className="flex items-center justify-center py-4">
                                 <div className="animate-spin rounded-full h-6 w-6 border-2 border-gray-300 border-t-gray-950" />

package/src/blog/blog-author-card.tsx

@@ -0,0 +1,116 @@
+import { User, Mail, Link as LinkIcon } from "lucide-react";
+import Link from "next/link";
+import { cn } from "@c-rex/utils";
+import { Card, CardContent, CardHeader, CardTitle } from "@c-rex/ui/card";
+
+export type BlogAuthor = {
+    name: string;
+    photo: string | null;
+    title?: string | null;
+    role?: string | null;
+    emails?: string[];
+    urls?: string[];
+};
+
+type Props = {
+    authors: BlogAuthor[];
+    label: string;
+    embedded?: boolean;
+    fields?: Array<keyof BlogAuthor>;
+    className?: string;
+};
+
+const DEFAULT_FIELDS: Array<keyof BlogAuthor> = ["photo", "name", "title", "role"];
+
+const AuthorAvatar = ({ author }: { author: BlogAuthor }) => (
+    author.photo ? (
+        <img
+            src={author.photo}
+            alt={author.name}
+            className="size-10 rounded-full object-cover shrink-0"
+        />
+    ) : (
+        <div className="size-10 rounded-full bg-muted shrink-0 flex items-center justify-center">
+            <User className="size-6" />
+        </div>
+    )
+);
+
+const AuthorEntry = ({ author, fields }: { author: BlogAuthor; fields: Array<keyof BlogAuthor> }) => {
+    const showPhoto = fields.includes("photo");
+    const showName = fields.includes("name");
+    const showTitle = fields.includes("title");
+    const showRole = fields.includes("role");
+    const showEmails = fields.includes("emails");
+    const showUrls = fields.includes("urls");
+
+    return (
+        <div className="flex items-start gap-3">
+            {showPhoto && <AuthorAvatar author={author} />}
+            <div className="flex flex-col gap-0.5 min-w-0">
+                {showName && (
+                    <span className="text-sm font-medium truncate">{author.name}</span>
+                )}
+                {showTitle && author.title && (
+                    <span className="text-xs text-muted-foreground truncate">{author.title}</span>
+                )}
+                {showRole && author.role && (
+                    <span className="text-xs text-muted-foreground truncate">{author.role}</span>
+                )}
+                {showEmails && author.emails && author.emails.length > 0 && (
+                    <div className="flex flex-col gap-0.5 mt-1">
+                        {author.emails.map((email) => (
+                            <Link
+                                key={email}
+                                href={`mailto:${email}`}
+                                className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
+                            >
+                                <Mail className="size-3 shrink-0" />
+                                <span className="truncate">{email}</span>
+                            </Link>
+                        ))}
+                    </div>
+                )}
+                {showUrls && author.urls && author.urls.length > 0 && (
+                    <div className="flex flex-col gap-0.5 mt-1">
+                        {author.urls.map((url) => (
+                            <Link
+                                key={url}
+                                href={url}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
+                            >
+                                <LinkIcon className="size-3 shrink-0" />
+                                <span className="truncate">{url}</span>
+                            </Link>
+                        ))}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export const BlogAuthorCard = ({ authors, label, embedded = false, fields = DEFAULT_FIELDS, className }: Props) => {
+    if (authors.length === 0) return null;
+
+    const content = (
+        <CardContent className="space-y-3 pb-4">
+            {authors.map((author, i) => (
+                <AuthorEntry key={i} author={author} fields={fields} />
+            ))}
+        </CardContent>
+    );
+
+    if (embedded) return content;
+
+    return (
+        <Card className={cn("gap-0", className)}>
+            <CardHeader>
+                <CardTitle className="text-lg">{label}</CardTitle>
+            </CardHeader>
+            {content}
+        </Card>
+    );
+};

package/src/documents/result-list-item.tsx

@@ -83,7 +83,12 @@ const DocumentResultListRowContent: FC<RowContentProps> = ({
                 </span>
 
                 <span className="text-lg font-medium">
-                    <a className="hover:underline [overflow-wrap:anywhere] hyphens-auto" href={itemLink}>{title}</a>
+                    <Link
+                        className="hover:underline [overflow-wrap:anywhere] hyphens-auto"
+                        href={itemLink}
+                    >
+                        {title}
+                    </Link>
                 </span>
 
                 <div>

package/src/navbar/navbar.tsx

@@ -11,7 +11,7 @@ import { cn } from "@c-rex/utils";
 import { getTranslations } from "next-intl/server";
 import { Button } from "@c-rex/ui/button";
 import { DropdownHoverItem } from "@c-rex/ui/dropdown-hover-item";
-import { Menu } from "lucide-react";
+import { Menu, Search } from "lucide-react";
 import { getOrganizationBranding } from "@c-rex/services/vcard";
 
 type NavBarProps = {
@@ -53,14 +53,9 @@ export const NavBar: FC<NavBarProps> = async ({
     }
 
     return (
-        <header className="sticky flex flex-col top-0 z-40 w-full p-4 backdrop-blur-xl transition-all bg-transparent border-b gap-2">
-            <div className="w-full flex items-center justify-between gap-2">
-                <div
-                    className={cn(
-                        "flex items-center gap-4",
-                        title && "lg:w-[calc(16rem-16px)]"
-                    )}
-                >
+        <header className="sticky flex flex-col top-0 z-40 w-full backdrop-blur-xl transition-all bg-transparent border-b">
+            <div className="w-full flex items-center justify-between gap-2 p-4">
+                <div className="flex items-center gap-4">
                     {showMenu && (
                         <DropdownHoverItem
                             label={
@@ -107,28 +102,22 @@ export const NavBar: FC<NavBarProps> = async ({
                             <img
                                 src={organizationBranding.logoSrc}
                                 alt={`${organizationBranding.organizationName} logo`}
-                                className="h-14"
+                                className="h-10"
                             />
                         </Link>
                     )}
                 </div>
 
-                {title && (
-                    <div className="flex-1 hidden md:flex md:justify-center lg:justify-start">
-                        <h1 className="md:text-2xl lg:text-3xl font-bold tracking-tight text-balance">{title}</h1>
-                    </div>
-                )}
-
                 <div className="flex gap-2">
-                    {willShowInput &&
-                        <div className="hidden sm:flex flex-1 items-center px-3 border rounded-full h-8 c-rex-search-bar">
-                            <SearchInput
-                                autocompleteType={autocompleteType}
-                                onSelectPath={onSelectPath}
-                                {...props}
-                            />
-                        </div>
-                    }
+
+
+                    <Button rounded="full" size="sm" className="w-8" variant="ghost">
+                        <Search className="!size-5" />
+                    </Button>
+
+                    {clientConfigs.languageSwitcher.enabled && (
+                        <SettingsMenu />
+                    )}
 
                     {clientConfigs.OIDC.userEnabled && (
                         <>
@@ -140,15 +129,12 @@ export const NavBar: FC<NavBarProps> = async ({
                         </>
                     )}
 
-                    {clientConfigs.languageSwitcher.enabled && (
-                        <SettingsMenu />
-                    )}
                 </div>
             </div>
 
             {title && (
-                <div className="flex-1 flex justify-center md:hidden">
-                    <h1 className="text-2xl font-bold tracking-tight text-balance">{title}</h1>
+                <div className="flex-1 flex justify-center border-t py-2">
+                    <h1 className="text-2xl font-bold tracking-tight text-balance text-center">{title}</h1>
                 </div>
             )}
         </header>

package/src/navbar/settings.tsx

@@ -25,7 +25,7 @@ export const SettingsMenu: FC = () => {
     return (
         <DropdownMenu>
             <DropdownMenuTrigger asChild>
-                <Button variant="ghost" rounded="full" size="icon">
+                <Button rounded="full" size="sm" className="w-8" variant="ghost">
                     <Settings className="!size-5" />
                 </Button>
 

package/src/page-wrapper.tsx

@@ -22,7 +22,7 @@ export const PageWrapper = ({
     renderRestrictionMenu,
     restrictField,
     requestType,
-    itemsToRender,
+    itemsByRow,
     onlyUsedEntries = true,
     enableHierarchy = false,
     fetchMode = "deferred",
@@ -33,7 +33,7 @@ export const PageWrapper = ({
     const restrictionMenuProps: ComponentProps<typeof TaxonomyRestrictionMenu> = {
         restrictField: restrictField ?? "informationSubjects",
         requestType: requestType ?? "InformationSubjectsGetAllClient",
-        itemsToRender,
+        itemsByRow,
         onlyUsedEntries,
         enableHierarchy,
         fetchMode,
@@ -46,7 +46,7 @@ export const PageWrapper = ({
             <NavBar showInput={showInput} showPkgFilter={showPkgFilter} {...props} />
 
             {showRestrictMenu && (
-                <div className="container pt-6">
+                <div className="container pt-4">
                     {renderRestrictionMenu ? renderRestrictionMenu(restrictionMenuProps) : (
                         <TaxonomyRestrictionMenu {...restrictionMenuProps} />
                     )}

package/src/restriction-menu/restriction-selection-command-menu.tsx

@@ -15,7 +15,7 @@ import { useRestrictionStore } from "../stores/restriction-store";
 import { useBreakpoint } from "@c-rex/ui/hooks";
 import { DEVICE_OPTIONS } from "@c-rex/constants";
 import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from "@c-rex/ui/command";
-import { Dialog, DialogContent } from "@c-rex/ui/dialog";
+import { Dialog, DialogContent, DialogTitle } from "@c-rex/ui/dialog";
 import { Button } from "@c-rex/ui/button";
 import { Check, ChevronDown } from "lucide-react";
 import { useSearchNavigationStore } from "../stores/search-navigation-store";
@@ -209,6 +209,7 @@ const RestrictionCommandDialog: FC<RestrictionCommandDialogProps> = ({
 
             <Dialog open={open} onOpenChange={setOpen}>
                 <DialogContent className="overflow-hidden p-0">
+                    <DialogTitle className="sr-only">{t("search")}</DialogTitle>
                     <Command shouldFilter={false} className="[&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
                         <CommandInput placeholder={t("search")} value={search} onValueChange={setSearch} />
                         <CommandList ref={listRef}>
@@ -264,7 +265,7 @@ export const RestrictionSelectionCommandMenu: FC<Props> = ({
     showAllWhenEmpty = true,
     onRequestMore,
     stripLabelPrefix,
-    navigationMenuListClassName = "items-center justify-between flex-row",
+    navigationMenuListClassName = "items-center justify-start gap-4 flex-row",
     itemsByRow = {
         [DEVICE_OPTIONS.MOBILE]: 2,
         [DEVICE_OPTIONS.TABLET]: 4,

package/src/restriction-menu/restriction-selection-menu.tsx

@@ -117,7 +117,7 @@ export const RestrictionSelectionMenu: FC<Props> = ({
     hasMoreItems = false,
     showAllWhenEmpty = true,
     onRequestMore,
-    navigationMenuListClassName = "items-center justify-between flex-row",
+    navigationMenuListClassName = "items-center justify-start gap-4 flex-row",
     itemsByRow = {
         [DEVICE_OPTIONS.MOBILE]: 2,
         [DEVICE_OPTIONS.TABLET]: 4,
@@ -277,7 +277,7 @@ export const RestrictionSelectionMenu: FC<Props> = ({
     };
 
     return (
-        <NavigationMenu viewport={false} className="max-w-full w-full c-rex-restriction-menu">
+        <NavigationMenu viewport={false} className="max-w-full w-full c-rex-restriction-menu overflow-auto pb-4">
             <NavigationMenuList className={cn("w-full", navigationMenuListClassName)}>
 
 

package/src/restriction-menu/taxonomy-restriction-command-menu.tsx

@@ -41,7 +41,7 @@ export const TaxonomyRestrictionCommandMenu: FC<TaxonomyRestrictionCommandMenuPr
     enableHierarchy = false,
     fetchMode = "deferred",
     showAllWhenEmpty = true,
-    navigationMenuListClassName = "items-center justify-between flex-row",
+    navigationMenuListClassName = "items-center justify-start gap-4 flex-row",
     stripLabelPrefix,
 }) => {
     const [loadAll, setLoadAll] = useState(false);

package/src/restriction-menu/taxonomy-restriction-menu.tsx

@@ -5,6 +5,7 @@ import { FC, ReactNode, useMemo, useState } from "react";
 import * as ComponentOptions from "../generated/client-components";
 import { Skeleton } from "@c-rex/ui/skeleton";
 import { RestrictionSelectionMenu } from "./restriction-selection-menu";
+import { DEVICE_OPTIONS } from "@c-rex/constants";
 
 type GenericRequestData = {
     items?: DomainEntityModel[];
@@ -22,7 +23,11 @@ type RestrictionMenuFetchMode = "all" | "deferred";
 export type TaxonomyRestrictionMenuProps = {
     restrictField: string;
     navigationMenuListClassName?: string;
-    itemsToRender?: number;
+    itemsByRow?: {
+        [DEVICE_OPTIONS.MOBILE]: number;
+        [DEVICE_OPTIONS.TABLET]: number;
+        [DEVICE_OPTIONS.DESKTOP]: number;
+    };
     requestType: keyof typeof ComponentOptions;
     onlyUsedEntries?: boolean;
     enableHierarchy?: boolean;
@@ -31,16 +36,22 @@ export type TaxonomyRestrictionMenuProps = {
     queryParams?: GenericQueryParams;
 };
 
+const DEFAULT_ITEMS_BY_ROW = {
+    [DEVICE_OPTIONS.MOBILE]: 7,
+    [DEVICE_OPTIONS.TABLET]: 7,
+    [DEVICE_OPTIONS.DESKTOP]: 7,
+};
+
 export const TaxonomyRestrictionMenu: FC<TaxonomyRestrictionMenuProps> = ({
     queryParams,
     restrictField,
-    itemsToRender = 7,
+    itemsByRow = DEFAULT_ITEMS_BY_ROW,
     requestType,
     onlyUsedEntries = true,
     enableHierarchy = false,
     fetchMode = "deferred",
     showAllWhenEmpty = true,
-    navigationMenuListClassName = "items-center justify-between flex-row",
+    navigationMenuListClassName = "items-center justify-start gap-4 flex-row",
 }) => {
     const [loadAll, setLoadAll] = useState(false);
     const RequestComponent = ComponentOptions[requestType] as unknown as FC<GenericRequestProps>;
@@ -50,11 +61,12 @@ export const TaxonomyRestrictionMenu: FC<TaxonomyRestrictionMenuProps> = ({
         Number.isFinite(Number(queryParams?.PageSize)) && Number(queryParams?.PageSize) > 0
             ? Number(queryParams?.PageSize)
             : undefined;
+    const maxItemsByRow = useMemo(() => Math.max(...Object.values(itemsByRow)), [itemsByRow]);
     const resolvedPageSize = useMemo(() => {
         if (explicitPageSize) return explicitPageSize;
-        if (fetchMode === "deferred" && !loadAll) return Math.max(itemsToRender, 1);
+        if (fetchMode === "deferred" && !loadAll) return Math.max(maxItemsByRow, 1);
         return 100;
-    }, [explicitPageSize, fetchMode, itemsToRender, loadAll]);
+    }, [explicitPageSize, fetchMode, maxItemsByRow, loadAll]);
     const requestedFields = Array.isArray(queryParams?.Fields) ? queryParams.Fields : undefined;
     const resolvedFields = useMemo(() => {
         const baseFields = requestedFields && requestedFields.length > 0 ? requestedFields : ["labels"];
@@ -94,6 +106,7 @@ export const TaxonomyRestrictionMenu: FC<TaxonomyRestrictionMenuProps> = ({
                         enableHierarchy={enableHierarchy}
                         hasMoreItems={hasMoreItems}
                         showAllWhenEmpty={showAllWhenEmpty}
+                        itemsByRow={itemsByRow}
                         onRequestMore={() => {
                             if (fetchMode === "deferred" && !explicitPageSize) {
                                 setLoadAll(true);

package/src/results/filter-sidebar/index.tsx

@@ -69,10 +69,6 @@ const FilterSidebar: FC<FilterSidebarProps> = ({
     });
     const startSearchNavigation = useSearchNavigationStore((state) => state.start);
 
-    useEffect(() => {
-        console.log(isMobile, isMobileFiltersOpen)
-    }, [isMobile, isMobileFiltersOpen]);
-
     const filteredTags = useMemo(() => {
         const resolved = memoizeFilteredTags(tags, params.filter, params.packages, {
             uiLanguage: locale,

package/src/results/information-unit-search-results-cards.tsx

@@ -1,96 +1,196 @@
 "use client"
 
-import { FC, useState } from "react";
+import { FC, useEffect, useRef, useState } from "react";
 
 import Link from "next/link";
-import { cn } from "@c-rex/utils";
+import { cn, formatDateToLocale } from "@c-rex/utils";
 import { Badge } from "@c-rex/ui/badge";
-import { useTranslations } from "next-intl";
+import { useLocale } from "next-intl";
 import { TopicsResponseItem } from "@c-rex/interfaces";
 import { Card } from "@c-rex/ui/card";
 import { useQueryState } from "nuqs";
+import { User } from "lucide-react";
 
 interface InformationUnitSearchResultsCardsProps {
     items: TopicsResponseItem[];
 }
 
-const InformationUnitSearchResultsCards: FC<InformationUnitSearchResultsCardsProps> = ({ items }) => {
-    const t = useTranslations("results")
-    const [isLoading, setLoading] = useState(true);
-    const [query] = useQueryState("search");
+type CardData = {
+    image: string | null;
+    description: string | null;
+    authors: { name: string; photo: string | null }[];
+    loaded: boolean;
+};
 
-    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" : ""
+const InformationUnitSearchResultCard: FC<{
+    item: TopicsResponseItem;
+    index: number;
+    query: string | null;
+}> = ({ item, index, query }) => {
+    const locale = useLocale();
+    const date = formatDateToLocale(item.created!, locale);
+    const cardRef = useRef<HTMLDivElement>(null);
+    const [cardData, setCardData] = useState<CardData>({ image: null, description: null, authors: [], loaded: false });
+
+    useEffect(() => {
+        const el = cardRef.current;
+        if (!el) return;
+
+        const observer = new IntersectionObserver(
+            ([entry]) => {
+                if (!entry.isIntersecting) return;
+                observer.disconnect();
+
+                const fetches: Promise<void>[] = [];
+
+                if (item.renditionUrl) {
+                    fetches.push(
+                        fetch(item.renditionUrl)
+                            .then(r => r.text())
+                            .then(html => {
+                                const doc = new DOMParser().parseFromString(html, "text/html");
+                                setCardData(prev => ({
+                                    ...prev,
+                                    image: doc.querySelector(".teaserfig img")?.getAttribute("src") || null,
+                                    description: doc.querySelector(".teaser-p")?.textContent || null,
+                                }));
+                            })
+                            .catch(() => { })
+                    );
+                }
+
+                if (item.vcardUrls?.length) {
+                    fetches.push(
+                        Promise.all(
+                            item.vcardUrls.map(url =>
+                                fetch(url)
+                                    .then(r => r.json())
+                                    .then(vcard => ({ name: vcard.fullName || "", photo: vcard.photos?.[0]?.source || null }))
+                                    .catch(() => null)
+                            )
+                        ).then(results => {
+                            setCardData(prev => ({
+                                ...prev,
+                                authors: results.filter(Boolean) as { name: string; photo: string | null }[],
+                            }));
+                        })
+                    );
+                }
+
+                Promise.all(fetches).then(() => {
+                    setCardData(prev => ({ ...prev, loaded: true }));
+                });
+            },
+            { rootMargin: "200px" }
+        );
+
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [item.renditionUrl, item.vcardUrls]);
+
+    return (
+        <div ref={cardRef} className={cn(index == 0 ? "md:col-span-2" : "")}>
+            <Card
+                className={cn(
+                    "c-rex-result-item information-unit-search-results-card relative p-0 gap-0",
+                    `c-rex-result-${item.type.toLowerCase()}`,
+                    index == 0
+                        ? "grid grid-cols-1 md:grid-cols-2"
+                        : "h-full flex flex-col space-y-2",
+                    item.disabled ? "c-rex-result-item-disabled" : ""
+                )}
+            >
+                <div className={cn(
+                    "w-full overflow-hidden",
+                    index == 0 ? "rounded-t-xl md:rounded-t-none md:rounded-tl-xl md:rounded-bl-xl" : "rounded-t-xl"
+                )}>
+                    {cardData.image ? (
+                        <img
+                            src={cardData.image}
+                            alt={item.title}
+                            className="size-full object-cover object-center"
+                            style={{ width: "100%", height: index == 0 ? "100%" : "190px" }}
+                            loading={index == 0 ? "eager" : "lazy"}
+                        />
+                    ) : (
+                        <div
+                            style={{ height: "190px" }}
+                            className={cn(
+                                "w-full bg-gray-100 animate-pulse",
+                                index == 0 ? "" : "rounded-t-xl"
+                            )}
+                        />
                     )}
-                >
-
-                    <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="flex flex-1 flex-col p-4 gap-4 justify-between">
+                    <div className="w-full flex flex-col items-start gap-4">
+                        <h2 className="line-clamp-2 font-heading text-2xl">
+                            {item.title}
+                        </h2>
+                        <Badge variant="secondary"> {date} </Badge>
                     </div>
 
-                    <div
-                        className={cn(
-                            "flex flex-1 flex-col p-4",
-                            index == 0 ? "justify-around" : "justify-between",
+                    <div className="flex items-end flex-row">
+                        {cardData.description ? (
+                            <p className="m-0 flex-1 text-sm text-muted-foreground">
+                                {cardData.description}
+                            </p>
+                        ) : (
+                            <div className="flex-1 space-y-2">
+                                <div className="h-3 w-full rounded bg-gray-100 animate-pulse" />
+                                <div className="h-3 w-4/5 rounded bg-gray-100 animate-pulse" />
+                            </div>
                         )}
-                    >
-                        <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>
+                    </div>
 
-                            {item.created && (
-                                <p className="m-0 text-sm text-muted-foreground">{item.created}</p>
-                            )}
+                    {cardData.authors.length > 0 && (
+                        <div className="flex flex-wrap gap-4">
+                            {cardData.authors.map((author, i) => (
+                                <div key={i} className="flex items-center gap-2">
 
-                        </div>
-                    </div>
 
-                    {!item.disabled && (
-                        <Link href={`${item.link}?q=${query}`} className="absolute inset-0">
-                            <span className="sr-only">{t("viewArticle")}</span>
-                        </Link>
+                                    {author.photo ? (
+                                        <img
+                                            src={author.photo}
+                                            alt={author.name}
+                                            className="size-6 rounded-full object-cover"
+                                        />
+                                    ) : (
+                                        <div className="size-6 rounded-full bg-muted flex items-center justify-center" >
+                                            <User className="size-4" />
+                                        </div>
+                                    )}
+                                    <span className="text-xs text-muted-foreground">{author.name}</span>
+                                </div>
+                            ))}
+                        </div>
                     )}
-                </Card>
+                </div>
+
+                {!item.disabled && (
+                    <Link href={item.link} className="absolute inset-0">
+                        <span className="sr-only">View article</span>
+                    </Link>
+                )}
+            </Card>
+        </div>
+    );
+};
+
+const InformationUnitSearchResultsCards: FC<InformationUnitSearchResultsCardsProps> = ({ items }) => {
+    const [query] = useQueryState("search");
+
+    return (
+        <div className="grid gap-6 md:grid-cols-2">
+            {items.map((item, index) => (
+                <InformationUnitSearchResultCard
+                    key={item.shortId}
+                    item={item}
+                    index={index}
+                    query={query}
+                />
             ))}
         </div>
     );

package/src/toc/toc-breadcrumb.tsx

@@ -9,7 +9,7 @@ import {
 } from "@c-rex/ui/breadcrumb";
 import type { TocBreadcrumbItem } from "./types";
 
-type TocBreadcrumbProps = {
+export type TocBreadcrumbProps = {
     lang: string;
     homeLabel: string;
     homeHref?: string;