@c-rex/components 0.1.37 → 0.1.39

package/src/carousel/carousel.tsx

@@ -1,352 +1,353 @@
-"use client"
-
-import {
-    useRef,
-    useState,
-    useEffect,
-    useCallback,
-    FC,
-    createContext,
-    useContext,
-} from "react";
-import { cn, formatDateToLocale, getLanguage, getTitle, getType } from "@c-rex/utils";
-import { Button } from "@c-rex/ui/button";
-import { ArrowLeft, ArrowRight } 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, useTranslations } from "next-intl";
-import Link from "next/link";
-import { useBreakpoint } from "@c-rex/ui/hooks";
-import { DEVICE_OPTIONS } from "@c-rex/constants";
-
-type PageInfo = {
-    hasNextPage: boolean;
-    hasPreviousPage: boolean;
-    pageCount: number;
-};
-type Props = {
-    className?: string;
-    arrows?: boolean;
-    autoplay?: boolean;
-    autoplaySpeed?: number;
-    itemsByRow?: {
-        [DEVICE_OPTIONS.MOBILE]: number,
-        [DEVICE_OPTIONS.TABLET]: number,
-        [DEVICE_OPTIONS.DESKTOP]: number,
-    };
-    indicators?: boolean;
-    showImages?: boolean;
-    carouselItemComponent?: FC<{ item: CommonItemsModel; showImages: boolean; linkPattern: string }>;
-    serviceType: keyof typeof ServiceOptions;
-    queryParams?: Record<string, any>;
-    loadByPages?: boolean;
-    linkPattern: string;
-};
-type CarouselContextProps = {
-    next: () => void;
-    prev: () => void;
-    setCurrent: (idx: number) => void;
-    current: number;
-    slidesToShow: number;
-    slidesLength: number;
-    page?: number;
-    pageCount?: number;
-    setPage?: (page: number) => void;
-    hasNextPage?: boolean;
-    hasPrevPage?: boolean;
-};
-
-const CarouselContext = createContext<CarouselContextProps | null>(null);
-
-export function useCarousel() {
-    const context = useContext(CarouselContext);
-    if (!context) {
-        throw new Error("useCarousel must be used within a <Carousel />");
-    }
-    return context;
-}
-
-export const Carousel: FC<Props> = ({
-    className,
-    arrows = false,
-    autoplay = false,
-    itemsByRow = {
-        [DEVICE_OPTIONS.MOBILE]: 1,
-        [DEVICE_OPTIONS.TABLET]: 3,
-        [DEVICE_OPTIONS.DESKTOP]: 4,
-    },
-    indicators = false,
-    autoplaySpeed = 3000,
-    showImages = false,
-    carouselItemComponent,
-    serviceType,
-    queryParams = {},
-    loadByPages = false,
-    linkPattern
-}) => {
-    const service = ServiceOptions[serviceType] as typeof documentsGetAllClientService;
-    const RenderComponent = carouselItemComponent || DefaultRenderCarouselItem;
-
-    const device = useBreakpoint();
-    const [slidesToShow, setSlidesToShow] = useState(1);
-
-    useEffect(() => {
-        if (device == null) return;
-        setSlidesToShow(itemsByRow[device as keyof typeof DEVICE_OPTIONS] as number);
-    }, [device, itemsByRow]);
-
-    // State
-    const [current, setCurrent] = useState(0);
-    const [data, setData] = useState<CommonItemsModel[] | null>(null);
-    const [loading, setIsLoading] = useState(true);
-    const [error, setError] = useState<unknown>(null);
-
-    // Pagination
-    const [page, setPage] = useState(1);
-    const [pageInfo, setPageInfo] = useState<PageInfo | null>(null);
-    const [hasNextPage, setHasNextPage] = useState(true);
-    const [hasPrevPage, setHasPrevPage] = useState(false);
-
-    // Autoplay
-    const timer = useRef<NodeJS.Timeout | null>(null);
-
-    // Data loading
-    useEffect(() => {
-        let isMounted = true;
-        setIsLoading(true);
-        setError(null);
-        setData(null);
-        if (loadByPages) {
-            (async () => {
-                try {
-                    const result = await service({ ...queryParams, PageNumber: page });
-                    if (!isMounted) return;
-                    setData((result && 'items' in result) ? result.items as CommonItemsModel[] : []);
-                    setPageInfo((result && 'pageInfo' in result) ? result.pageInfo as PageInfo : null);
-                } catch (err) {
-                    if (!isMounted) return;
-                    setError(err);
-                } finally {
-                    if (isMounted) setIsLoading(false);
-                }
-            })();
-        } else {
-            (async () => {
-                try {
-                    const result = await service(queryParams);
-                    if (!isMounted) return;
-                    setData((result && 'items' in result) ? result.items as CommonItemsModel[] : []);
-                } catch (err) {
-                    if (!isMounted) return;
-                    setError(err);
-                } finally {
-                    if (isMounted) setIsLoading(false);
-                }
-            })();
-        }
-        return () => { isMounted = false; };
-    }, [queryParams, page, loadByPages, service]);
-
-    // Page info
-    useEffect(() => {
-        if (loadByPages && pageInfo) {
-            setHasNextPage(pageInfo.hasNextPage);
-            setHasPrevPage(pageInfo.hasPreviousPage);
-        }
-    }, [pageInfo, loadByPages]);
-
-    // Autoplay logic (static mode only)
-    useEffect(() => {
-        if (!autoplay || loading || !data || data.length === 0 || loadByPages) return;
-        timer.current = setTimeout(() => {
-            if (current < data.length - slidesToShow) {
-                setCurrent((prev) => prev + 1);
-            } else {
-                setCurrent(0);
-            }
-        }, autoplaySpeed);
-        return () => {
-            if (timer.current) clearTimeout(timer.current);
-        };
-    }, [autoplay, autoplaySpeed, current, data, slidesToShow, loading, loadByPages]);
-
-    // Navigation
-    const prev = useCallback(() => {
-        if (loadByPages) {
-            if (hasPrevPage) setPage((p) => p - 1);
-        } else {
-            setCurrent((prev) => Math.max(prev - 1, 0));
-        }
-    }, [loadByPages, hasPrevPage]);
-
-    const next = useCallback(() => {
-        if (loadByPages) {
-            if (hasNextPage) setPage((p) => p + 1);
-        } else {
-            setCurrent((prev) => (prev < (data?.length || 0) - slidesToShow ? prev + 1 : 0));
-        }
-    }, [loadByPages, hasNextPage, data, slidesToShow]);
-
-    const contextValue: CarouselContextProps = {
-        next,
-        prev,
-        setCurrent,
-        current,
-        slidesToShow,
-        pageCount: pageInfo?.pageCount || 1,
-        slidesLength: data?.length || 0,
-        page: loadByPages ? page : undefined,
-        setPage: loadByPages ? setPage : undefined,
-        hasNextPage: loadByPages ? hasNextPage : undefined,
-        hasPrevPage: loadByPages ? hasPrevPage : undefined,
-    };
-
-    return (
-        <CarouselContext.Provider value={contextValue}>
-            <div className={cn("flex items-center flex-col", className)}>
-                <div className={cn("w-full flex items-center")}>
-                    {(arrows && data && data.length > 0) && <CarouselPrev />}
-                    <div className={cn("flex-1 overflow-hidden relative flex items-center")}>
-                        <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}%)` }}
-                        >
-                            {loading ? (
-                                <Skeleton className="w-full h-80" />
-                            ) : error ? (
-                                <div className="w-full h-80 flex items-center justify-center text-red-500">
-                                    {JSON.stringify(error)}
-                                </div>
-                            ) : data && data.length == 0 ? (
-                                <Empty />
-                            ) : data && data.length > 0 ? (
-                                data.map((item: CommonItemsModel) => (
-                                    <div
-                                        key={item.shortId}
-                                        className={`flex-shrink-0 flex-grow-0 flex justify-center`}
-                                        style={{ width: `${100 / slidesToShow}%` }}
-                                    >
-                                        <RenderComponent item={item} showImages={showImages} linkPattern={linkPattern} />
-                                    </div>
-                                ))
-                            ) : null}
-                        </div>
-                    </div>
-                    {(arrows && data && data.length > 0) && <CarouselNext />}
-                </div>
-                {indicators && <CarouselIndicators />}
-            </div>
-        </CarouselContext.Provider>
-    );
-};
-
-const CarouselNext: FC = () => {
-    const { next, current, slidesToShow, slidesLength, hasNextPage } = useCarousel();
-    const disabled = hasNextPage === undefined ? current >= slidesLength - slidesToShow : !hasNextPage;
-    return (
-        <Button className="w-9" rounded="full" onClick={next} variant="default" disabled={disabled}>
-            <ArrowRight />
-        </Button>
-    );
-};
-
-const CarouselPrev: FC = () => {
-    const { prev, current, hasPrevPage } = useCarousel();
-    const disabled = hasPrevPage === undefined ? current === 0 : !hasPrevPage;
-
-    return (
-        <Button className="w-9" rounded="full" onClick={prev} variant="default" disabled={disabled}>
-            <ArrowLeft />
-        </Button>
-    );
-};
-
-const CarouselIndicators: FC<{ className?: string }> = ({ className }) => {
-    const { current, setCurrent, slidesToShow, slidesLength, page, setPage, pageCount } = useCarousel();
-    // Static mode
-    if (!setPage) {
-        const totalOfIndicators = Math.max(slidesLength - slidesToShow + 1, 1);
-        if (totalOfIndicators === 1) return null;
-        return (
-            <ol className={cn("flex gap-2 z-20 list-none p-0 m-0", className)}>
-                {Array.from({ length: totalOfIndicators }).map((_, index) => (
-                    <li key={`indicator-${index}`}>
-                        <Button
-                            className={`w-3 h-3 rounded-full border-0 cursor-pointer transition-colors ${index === current ? "bg-gray-800" : "bg-gray-300"}`}
-                            size="xs"
-                            onClick={() => setCurrent(index)}
-                        />
-                    </li>
-                ))}
-            </ol>
-        );
-    }
-    // Paginated mode
-    const totalOfIndicators = pageCount || 1;
-    if (totalOfIndicators === 1) return null;
-    return (
-        <ol className={cn("flex gap-2 z-20 list-none p-0 m-0", className)}>
-            {Array.from({ length: totalOfIndicators }).map((_, index) => {
-                const pageNumber = index + 1;
-                return (
-                    <li key={pageNumber}>
-                        <Button
-                            className={`w-3 h-3 rounded-full border-0 cursor-pointer transition-colors ${pageNumber === page ? "bg-gray-800" : "bg-gray-300"}`}
-                            size="xs"
-                            onClick={() => setPage(pageNumber)}
-                        />
-                    </li>
-                );
-            })}
-        </ol>
-    );
-};
-
-const DefaultRenderCarouselItem: FC<{
-    item: CommonItemsModel;
-    showImages: boolean;
-    linkPattern: string
-}> = ({ item, showImages, linkPattern }) => {
-    const locale = useLocale();
-    const t = useTranslations("itemTypes");
-
-    const date = formatDateToLocale(item.created!, locale);
-    const title = getTitle(item.titles, item.labels);
-    const itemType = getType(item.class);
-    const language = getLanguage(item.languages)
-    const countryCode = language.split("-")[1] || "";
-
-    return (
-        <div className="p-2 flex flex-1">
-            <Card className="p-4 flex-1 justify-between relative">
-                <Badge className="absolute -top-2 -right-2">{t(itemType.toLowerCase())}</Badge>
-
-                {showImages && (
-                    <ImageRenditionContainer
-                        itemShortId={item.shortId!}
-                        emptyImageStyle="h-48 w-full"
-                        imageStyle="object-cover h-48 w-full"
-                    />
-                )}
-
-                <Link href={linkPattern.replace("{id}", item.shortId!)} className="hover:underline text-lg font-semibold flex-1">
-                    {title}
-                </Link>
-
-                <div className="flex justify-between w-full">
-                    <span className="w-8 block border">
-                        <Flag countryCode={countryCode} />
-                    </span>
-                    <span className="text-gray-400">{date || item.revision}</span>
-                </div>
-            </Card>
-        </div>
-    );
-};
+"use client"
+
+import {
+    useRef,
+    useState,
+    useEffect,
+    useCallback,
+    FC,
+    createContext,
+    useContext,
+} from "react";
+import { cn, formatDateToLocale, getLanguage, getTitle, getType } from "@c-rex/utils";
+import { Button } from "@c-rex/ui/button";
+import { ArrowLeft, ArrowRight } 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, useTranslations } from "next-intl";
+import Link from "next/link";
+import { useBreakpoint } from "@c-rex/ui/hooks";
+import { DEVICE_OPTIONS } from "@c-rex/constants";
+
+type PageInfo = {
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+    pageCount: number;
+};
+type Props = {
+    className?: string;
+    arrows?: boolean;
+    autoplay?: boolean;
+    autoplaySpeed?: number;
+    itemsByRow?: {
+        [DEVICE_OPTIONS.MOBILE]: number,
+        [DEVICE_OPTIONS.TABLET]: number,
+        [DEVICE_OPTIONS.DESKTOP]: number,
+    };
+    indicators?: boolean;
+    showImages?: boolean;
+    carouselItemComponent?: FC<{ item: CommonItemsModel; showImages: boolean; linkPattern: string }>;
+    serviceType: keyof typeof ServiceOptions;
+    queryParams?: Record<string, any>;
+    loadByPages?: boolean;
+    linkPattern: string;
+};
+type CarouselContextProps = {
+    next: () => void;
+    prev: () => void;
+    setCurrent: (idx: number) => void;
+    current: number;
+    slidesToShow: number;
+    slidesLength: number;
+    page?: number;
+    pageCount?: number;
+    setPage?: (page: number) => void;
+    hasNextPage?: boolean;
+    hasPrevPage?: boolean;
+};
+
+const CarouselContext = createContext<CarouselContextProps | null>(null);
+
+export function useCarousel() {
+    const context = useContext(CarouselContext);
+    if (!context) {
+        throw new Error("useCarousel must be used within a <Carousel />");
+    }
+    return context;
+}
+
+export const Carousel: FC<Props> = ({
+    className,
+    arrows = false,
+    autoplay = false,
+    itemsByRow = {
+        [DEVICE_OPTIONS.MOBILE]: 1,
+        [DEVICE_OPTIONS.TABLET]: 3,
+        [DEVICE_OPTIONS.DESKTOP]: 4,
+    },
+    indicators = false,
+    autoplaySpeed = 3000,
+    showImages = false,
+    carouselItemComponent,
+    serviceType,
+    queryParams = {},
+    loadByPages = false,
+    linkPattern
+}) => {
+    const service = ServiceOptions[serviceType] as typeof documentsGetAllClientService;
+    const RenderComponent = carouselItemComponent || DefaultRenderCarouselItem;
+
+    const device = useBreakpoint();
+    const [slidesToShow, setSlidesToShow] = useState(1);
+
+    useEffect(() => {
+        if (device == null) return;
+        setSlidesToShow(itemsByRow[device as keyof typeof DEVICE_OPTIONS] as number);
+    }, [device, itemsByRow]);
+
+    // State
+    const [current, setCurrent] = useState(0);
+    const [data, setData] = useState<CommonItemsModel[] | null>(null);
+    const [loading, setIsLoading] = useState(true);
+    const [error, setError] = useState<unknown>(null);
+
+    // Pagination
+    const [page, setPage] = useState(1);
+    const [pageInfo, setPageInfo] = useState<PageInfo | null>(null);
+    const [hasNextPage, setHasNextPage] = useState(true);
+    const [hasPrevPage, setHasPrevPage] = useState(false);
+
+    // Autoplay
+    const timer = useRef<NodeJS.Timeout | null>(null);
+
+    // Data loading
+    useEffect(() => {
+        let isMounted = true;
+        setIsLoading(true);
+        setError(null);
+        setData(null);
+        if (loadByPages) {
+            (async () => {
+                try {
+                    const result = await service({ ...queryParams, PageNumber: page });
+                    if (!isMounted) return;
+                    setData((result && 'items' in result) ? result.items as CommonItemsModel[] : []);
+                    setPageInfo((result && 'pageInfo' in result) ? result.pageInfo as PageInfo : null);
+                } catch (err) {
+                    if (!isMounted) return;
+                    setError(err);
+                } finally {
+                    if (isMounted) setIsLoading(false);
+                }
+            })();
+        } else {
+            (async () => {
+                try {
+                    const result = await service(queryParams);
+                    if (!isMounted) return;
+                    setData((result && 'items' in result) ? result.items as CommonItemsModel[] : []);
+                } catch (err) {
+                    if (!isMounted) return;
+                    setError(err);
+                } finally {
+                    if (isMounted) setIsLoading(false);
+                }
+            })();
+        }
+        return () => { isMounted = false; };
+    }, [queryParams, page, loadByPages, service]);
+
+    // Page info
+    useEffect(() => {
+        if (loadByPages && pageInfo) {
+            setHasNextPage(pageInfo.hasNextPage);
+            setHasPrevPage(pageInfo.hasPreviousPage);
+        }
+    }, [pageInfo, loadByPages]);
+
+    // Autoplay logic (static mode only)
+    useEffect(() => {
+        if (!autoplay || loading || !data || data.length === 0 || loadByPages) return;
+        timer.current = setTimeout(() => {
+            if (current < data.length - slidesToShow) {
+                setCurrent((prev) => prev + 1);
+            } else {
+                setCurrent(0);
+            }
+        }, autoplaySpeed);
+        return () => {
+            if (timer.current) clearTimeout(timer.current);
+        };
+    }, [autoplay, autoplaySpeed, current, data, slidesToShow, loading, loadByPages]);
+
+    // Navigation
+    const prev = useCallback(() => {
+        if (loadByPages) {
+            if (hasPrevPage) setPage((p) => p - 1);
+        } else {
+            setCurrent((prev) => Math.max(prev - 1, 0));
+        }
+    }, [loadByPages, hasPrevPage]);
+
+    const next = useCallback(() => {
+        if (loadByPages) {
+            if (hasNextPage) setPage((p) => p + 1);
+        } else {
+            setCurrent((prev) => (prev < (data?.length || 0) - slidesToShow ? prev + 1 : 0));
+        }
+    }, [loadByPages, hasNextPage, data, slidesToShow]);
+
+    const contextValue: CarouselContextProps = {
+        next,
+        prev,
+        setCurrent,
+        current,
+        slidesToShow,
+        pageCount: pageInfo?.pageCount || 1,
+        slidesLength: data?.length || 0,
+        page: loadByPages ? page : undefined,
+        setPage: loadByPages ? setPage : undefined,
+        hasNextPage: loadByPages ? hasNextPage : undefined,
+        hasPrevPage: loadByPages ? hasPrevPage : undefined,
+    };
+
+    return (
+        <CarouselContext.Provider value={contextValue}>
+            <div className={cn("flex items-center flex-col", className)}>
+                <div className={cn("w-full flex items-center")}>
+                    {(arrows && data && data.length > 0) && <CarouselPrev />}
+                    <div className={cn("flex-1 overflow-hidden relative flex items-center")}>
+                        <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}%)` }}
+                        >
+                            {loading ? (
+                                <Skeleton className="w-full h-80" />
+                            ) : error ? (
+                                <div className="w-full h-80 flex items-center justify-center text-red-500">
+                                    {JSON.stringify(error)}
+                                </div>
+                            ) : data && data.length == 0 ? (
+                                <Empty />
+                            ) : data && data.length > 0 ? (
+                                data.map((item: CommonItemsModel) => (
+                                    <div
+                                        key={item.shortId}
+                                        className={`flex-shrink-0 flex-grow-0 flex justify-center`}
+                                        style={{ width: `${100 / slidesToShow}%` }}
+                                    >
+                                        <RenderComponent item={item} showImages={showImages} linkPattern={linkPattern} />
+                                    </div>
+                                ))
+                            ) : null}
+                        </div>
+                    </div>
+                    {(arrows && data && data.length > 0) && <CarouselNext />}
+                </div>
+                {indicators && <CarouselIndicators />}
+            </div>
+        </CarouselContext.Provider>
+    );
+};
+
+const CarouselNext: FC = () => {
+    const { next, current, slidesToShow, slidesLength, hasNextPage } = useCarousel();
+    const disabled = hasNextPage === undefined ? current >= slidesLength - slidesToShow : !hasNextPage;
+    return (
+        <Button className="w-9" rounded="full" onClick={next} variant="default" disabled={disabled}>
+            <ArrowRight />
+        </Button>
+    );
+};
+
+const CarouselPrev: FC = () => {
+    const { prev, current, hasPrevPage } = useCarousel();
+    const disabled = hasPrevPage === undefined ? current === 0 : !hasPrevPage;
+
+    return (
+        <Button className="w-9" rounded="full" onClick={prev} variant="default" disabled={disabled}>
+            <ArrowLeft />
+        </Button>
+    );
+};
+
+const CarouselIndicators: FC<{ className?: string }> = ({ className }) => {
+    const { current, setCurrent, slidesToShow, slidesLength, page, setPage, pageCount } = useCarousel();
+    // Static mode
+    if (!setPage) {
+        const totalOfIndicators = Math.max(slidesLength - slidesToShow + 1, 1);
+        if (totalOfIndicators === 1) return null;
+        return (
+            <ol className={cn("flex gap-2 z-20 list-none p-0 m-0", className)}>
+                {Array.from({ length: totalOfIndicators }).map((_, index) => (
+                    <li key={`indicator-${index}`}>
+                        <Button
+                            className={`w-3 h-3 rounded-full border-0 cursor-pointer transition-colors ${index === current ? "bg-gray-800" : "bg-gray-300"}`}
+                            size="xs"
+                            onClick={() => setCurrent(index)}
+                        />
+                    </li>
+                ))}
+            </ol>
+        );
+    }
+    // Paginated mode
+    const totalOfIndicators = pageCount || 1;
+    if (totalOfIndicators === 1) return null;
+    return (
+        <ol className={cn("flex gap-2 z-20 list-none p-0 m-0", className)}>
+            {Array.from({ length: totalOfIndicators }).map((_, index) => {
+                const pageNumber = index + 1;
+                return (
+                    <li key={pageNumber}>
+                        <Button
+                            className={`w-3 h-3 rounded-full border-0 cursor-pointer transition-colors ${pageNumber === page ? "bg-gray-800" : "bg-gray-300"}`}
+                            size="xs"
+                            onClick={() => setPage(pageNumber)}
+                        />
+                    </li>
+                );
+            })}
+        </ol>
+    );
+};
+
+const DefaultRenderCarouselItem: FC<{
+    item: CommonItemsModel;
+    showImages: boolean;
+    linkPattern: string
+}> = ({ item, showImages, linkPattern }) => {
+    const locale = useLocale();
+    const t = useTranslations("itemTypes");
+
+    const date = formatDateToLocale(item.created!, locale);
+    const title = getTitle(item.titles, item.labels);
+    const itemType = getType(item.class);
+    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="p-4 flex-1 justify-between relative">
+                <Badge className="absolute -top-2 -right-2">{t(itemType.toLowerCase())}</Badge>
+
+                {showImages && (
+                    <ImageRenditionContainer
+                        itemShortId={item.shortId!}
+                        emptyImageStyle="h-48 w-full"
+                        imageStyle="object-cover h-48 w-full"
+                    />
+                )}
+
+                <span className="group-hover:underline text-lg font-semibold flex-1">
+                    {title}
+                </span>
+
+                <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>
+    );
+};