@c-rex/components 0.1.7 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c-rex/components",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "files": [
     "src"
   ],
@@ -25,6 +25,14 @@
       "types": "./src/breadcrumb.tsx",
       "import": "./src/breadcrumb.tsx"
     },
+    "./pagination": {
+      "types": "./src/pagination.tsx",
+      "import": "./src/pagination.tsx"
+    },
+    "./info-card": {
+      "types": "./src/info-card.tsx",
+      "import": "./src/info-card.tsx"
+    },
     "./empty": {
       "types": "./src/empty.tsx",
       "import": "./src/empty.tsx"
@@ -76,6 +84,10 @@
     "./search-modal": {
       "types": "./src/search-modal.tsx",
       "import": "./src/search-modal.tsx"
+    },
+    "./loading": {
+      "types": "./src/loading.tsx",
+      "import": "./src/loading.tsx"
     }
   },
   "scripts": {

package/src/autocomplete.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { Input } from "@c-rex/ui/input";
-import { call, generateQueryParams, getFromCookieString } from "@c-rex/utils";
-import { CONTENT_LANG_KEY, WILD_CARD_OPTIONS } from "@c-rex/constants";
+import { call, generateQueryParams } from "@c-rex/utils";
+import { WILD_CARD_OPTIONS } from "@c-rex/constants";
 import { useTranslations } from "next-intl";
 import { useAppConfig } from "@c-rex/contexts/config-provider";
 import { QueryParams } from "@c-rex/types";
@@ -15,7 +15,7 @@ type Props = {
 export const AutoComplete = ({ initialValue, embedded, searchByPackage }: Props) => {
     const t = useTranslations();
     const containerRef = useRef<HTMLDivElement>(null);
-    const { contentLang, packageID } = useAppConfig()
+    const { articleLang, contentLang, packageID } = useAppConfig()
 
     const [open, setOpen] = useState(false);
     const [query, setQuery] = useState(initialValue);
@@ -23,43 +23,21 @@ export const AutoComplete = ({ initialValue, embedded, searchByPackage }: Props)
     const [suggestions, setSuggestions] = useState<string[]>([]);
 
     const onSearch = (value: string): Promise<string[]> => {
-        return call<string[]>("InformationUnitsService.getSuggestions", { query: value, language: contentLang });
+        return call<string[]>("InformationUnitsService.getSuggestions", { query: value, language: articleLang || contentLang });
     }
 
     const onSelect = (value: string) => {
-        const cookie = getFromCookieString(document.cookie, CONTENT_LANG_KEY)
         const params: QueryParams[] = [
-            {
-                key: "search",
-                value: value
-            },
-            {
-                key: "operator",
-                value: "OR"
-            },
-            {
-                key: "page",
-                value: "1"
-            },
-            {
-                key: "language",
-                value: cookie
-            },
-            {
-                key: "wildcard",
-                value: WILD_CARD_OPTIONS.BOTH
-            },
-            {
-                key: "like",
-                value: "false"
-            },
+            { key: "search", value: value },
+            { key: "operator", value: "OR" },
+            { key: "page", value: "1" },
+            { key: "language", value: articleLang || contentLang as string },
+            { key: "wildcard", value: WILD_CARD_OPTIONS.BOTH },
+            { key: "like", value: "false" },
         ]
 
         if (searchByPackage && packageID !== null) {
-            params.push({
-                key: "package",
-                value: packageID
-            })
+            params.push({ key: "packages", value: packageID })
         }
 
         const aux = generateQueryParams(params)

package/src/dialog-filter.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from "react"
+import React, { FC, useEffect, useState } from "react"
 import { Button } from "@c-rex/ui/button"
 import {
     Dialog,
@@ -10,8 +10,6 @@ import {
     DialogTrigger,
 } from "@c-rex/ui/dialog"
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@c-rex/ui/select"
-import { ToggleGroup, ToggleGroupItem } from "@c-rex/ui/toggle-group"
-import { RadioGroup, RadioGroupItem } from "@c-rex/ui/radio-group"
 import { Checkbox } from "@c-rex/ui/checkbox"
 import { Label } from "@c-rex/ui/label"
 import { parseAsBoolean, parseAsInteger, parseAsString, useQueryStates } from "nuqs"
@@ -20,6 +18,7 @@ import { useAppConfig } from "@c-rex/contexts/config-provider"
 import { LanguageAndCountries } from "@c-rex/interfaces"
 import { WILD_CARD_OPTIONS, OPERATOR_OPTIONS } from "@c-rex/constants"
 import { Switch } from "@c-rex/ui/switch"
+import { useSearchContext } from "@c-rex/contexts/search"
 
 interface DialogFilterProps {
     trigger: React.ReactNode;
@@ -32,12 +31,14 @@ interface Languages {
 
 export const DialogFilter: FC<DialogFilterProps> = ({ trigger }) => {
     const t = useTranslations("filter");
+    const { setLoading } = useSearchContext();
     const { availableLanguagesAndCountries } = useAppConfig()
     const [params, setParams] = useQueryStates({
         language: parseAsString,
         page: parseAsInteger,
         wildcard: parseAsString,
         operator: parseAsString,
+        filter: parseAsString,
         like: parseAsBoolean,
     }, {
         history: 'push',
@@ -49,6 +50,7 @@ export const DialogFilter: FC<DialogFilterProps> = ({ trigger }) => {
     const [operator, setOperator] = useState<string>(params.operator || OPERATOR_OPTIONS.OR);
     const [like, setLike] = useState<boolean>(params.like || false);
     const [wildcard, setWildcard] = useState<string>(params.wildcard || "");
+    const [disabled, setDisabled] = useState<boolean>(false)
     const [languages, setLanguages] = useState<Languages[]>(availableLanguagesAndCountries.map((item: LanguageAndCountries) => {
         const checked = startSelectedLanguages.includes(item.value)
 
@@ -68,7 +70,12 @@ export const DialogFilter: FC<DialogFilterProps> = ({ trigger }) => {
     }
 
     const apply = () => {
-        const selectedLanguages = languages.filter((item: any) => item.checked).map((item: any) => item.value).join(',')
+        setLoading(true);
+
+        const selectedLanguages = languages
+            .filter((item: any) => item.checked)
+            .map((item: any) => item.value)
+            .join(',')
 
         setParams({
             page: 1,
@@ -76,9 +83,29 @@ export const DialogFilter: FC<DialogFilterProps> = ({ trigger }) => {
             operator: operator,
             wildcard: wildcard,
             like: like,
+            filter: null,
         });
     }
 
+    useEffect(() => {
+        setOperator(params.operator || OPERATOR_OPTIONS.OR);
+        setLike(params.like || false);
+        setWildcard(params.wildcard || "");
+        setLanguages(availableLanguagesAndCountries.map((item: LanguageAndCountries) => {
+            const checked = startSelectedLanguages.includes(item.value)
+
+            return {
+                lang: item.lang,
+                value: item.value,
+                checked,
+            }
+        }));
+    }, [params])
+
+    useEffect(() => {
+        setDisabled(languages.every((item) => !item.checked));
+    }, [languages])
+
     return (
         <Dialog>
             <DialogTrigger asChild>
@@ -143,12 +170,12 @@ export const DialogFilter: FC<DialogFilterProps> = ({ trigger }) => {
                 </div>
 
                 <div className="grid grid-cols-2 items-center pt-2">
-                    <Label className="text-right">
+                    <Label htmlFor="operator" className="text-right">
                         {t("operator")}:
                     </Label>
 
                     <Switch
-                        id="like"
+                        id="operator"
                         onCheckedChange={(value) => setOperator(value ? OPERATOR_OPTIONS.AND : OPERATOR_OPTIONS.OR)}
                         checked={operator == OPERATOR_OPTIONS.AND}
                     />
@@ -163,7 +190,7 @@ export const DialogFilter: FC<DialogFilterProps> = ({ trigger }) => {
 
                 <DialogFooter className="pt-2">
                     <DialogClose asChild>
-                        <Button onClick={apply}>{t("apply")}</Button>
+                        <Button onClick={apply} disabled={disabled}>{t("apply")}</Button>
                     </DialogClose>
                 </DialogFooter>
             </DialogContent>

package/src/info-card.tsx

@@ -0,0 +1,38 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@c-rex/ui/card";
+import { useTranslations } from "next-intl";
+import React, { FC } from "react";
+
+type Props = {
+    title: string;
+    items: {
+        label: string;
+        value: string;
+        link?: string;
+    }[]
+}
+export const InfoCard: FC<Props> = ({ title, items }) => {
+    const t = useTranslations();
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle className="text-lg">{title}</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+                {items.map((item, index) => (
+                    <div key={index} className="border-b border-blog-divider last:border-0 pb-3 last:pb-0">
+                        {item.link ? (
+                            <a href={item.link}>
+                                <h4 className="text-sm font-medium mb-1">{t(item.label)}</h4>
+                            </a>
+                        ) : (
+                            <h4 className="text-sm font-medium mb-1">{t(item.label)}</h4>
+                        )}
+
+                        <span className="text-xs text-muted-foreground">{item.value}</span>
+                    </div>
+                ))}
+            </CardContent>
+        </Card>
+    );
+}

package/src/loading.tsx

@@ -0,0 +1,12 @@
+import React, { FC } from "react";
+
+type LoadingProps = {
+    opacity: boolean;
+}
+export const Loading: FC<LoadingProps> = ({ opacity }) => {
+    return (
+        <div className={`fixed inset-0 z-[100000] w-full h-full flex justify-center items-center bg-white ${opacity ? "opacity-50" : ""}`}>
+            <div className="animate-spin rounded-full h-12 w-12 border-2 border-gray-300 border-t-gray-950"></div>
+        </div>
+    );
+};

package/src/navbar/language-switcher/content-language-switch.tsx

@@ -3,7 +3,7 @@
 import { startTransition } from "react";
 import { SharedLanguageSwitch } from "./shared";
 import { getFromCookieString, setCookie } from "@c-rex/utils";
-import { CONTENT_LANG_KEY } from "@c-rex/constants";
+import { BLOG_TYPE_AND_LINK, CONTENT_LANG_KEY, DOCUMENTS_TYPE_AND_LINK, TOPICS_TYPE_AND_LINK } from "@c-rex/constants";
 import { useQueryState } from "nuqs"
 import { useAppConfig } from "@c-rex/contexts/config-provider";
 import { useTranslations } from "next-intl";
@@ -12,8 +12,22 @@ import { toast } from "sonner"
 export const ContentLanguageSwitch = () => {
     const t = useTranslations();
     const contentLang = getFromCookieString(document.cookie, CONTENT_LANG_KEY)
-    const { availableLanguagesAndCountries, setContentLang, availableVersions } = useAppConfig()
+    const { availableLanguagesAndCountries: aux, setContentLang, availableVersions } = useAppConfig()
 
+    const availableLanguagesAndCountries = () => {
+        let result = aux.map(item => ({ ...item, link: "#" }))
+        if (availableVersions == null) return result
+
+        result = aux.map(item => {
+            const availableVersion = availableVersions.find(version => version.lang === item.value)
+            return {
+                ...item,
+                link: availableVersion?.link ?? "#"
+            }
+        })
+
+        return result;
+    }
     const [queryLanguage, setContentLanguage] = useQueryState('language', {
         history: 'push',
         shallow: false,
@@ -23,10 +37,19 @@ export const ContentLanguageSwitch = () => {
         startTransition(() => {
             setCookie(CONTENT_LANG_KEY, locale)
             setContentLang(locale)
+
             if (queryLanguage != null) {
                 setContentLanguage(locale)
             }
 
+            const currentPath = window.location.pathname;
+            const isTopicOrBlogOrDocument = currentPath.includes(TOPICS_TYPE_AND_LINK) || currentPath.includes(BLOG_TYPE_AND_LINK) || currentPath.includes(DOCUMENTS_TYPE_AND_LINK)
+
+            if (!isTopicOrBlogOrDocument) {
+                window.location.reload();
+                return;
+            }
+
             if (availableVersions !== null) {
                 const filteredList = availableVersions.filter((item) => item.lang === locale)
 
@@ -48,7 +71,7 @@ export const ContentLanguageSwitch = () => {
 
     return (
         <SharedLanguageSwitch
-            availableLanguagesAndCountries={availableLanguagesAndCountries}
+            availableLanguagesAndCountries={availableLanguagesAndCountries()}
             changeLanguage={changeContentLanguage}
             selected={contentLang}
         />

package/src/navbar/language-switcher/shared.tsx

@@ -4,7 +4,7 @@ import { LanguageAndCountries } from "@c-rex/interfaces";
 import { DropdownMenuRadioGroup, DropdownMenuRadioItem } from "@c-rex/ui/dropdown-menu";
 
 interface SharedLanguageSwitchProps {
-    availableLanguagesAndCountries: LanguageAndCountries[];
+    availableLanguagesAndCountries: (LanguageAndCountries & { link?: string })[];
     selected: string;
     changeLanguage: (locale: string) => void;
 }
@@ -19,10 +19,18 @@ export const SharedLanguageSwitch: FC<SharedLanguageSwitchProps> = ({ availableL
     };
 
     return (
-        <DropdownMenuRadioGroup value={selected} onValueChange={changeLanguage}>
+        <DropdownMenuRadioGroup value={selected}>
             {availableLanguagesAndCountries.map(item => {
                 return (
-                    <DropdownMenuRadioItem key={item.value} value={item.value}>
+                    <DropdownMenuRadioItem
+                        key={item.value}
+                        value={item.value}
+                        link={item?.link}
+                        onClick={(e) => {
+                            e.preventDefault();
+                            changeLanguage(item.value)
+                        }}
+                    >
                         {getFlagIcon(item.country)}
                         <span>{item.lang.toUpperCase()}</span>
                     </DropdownMenuRadioItem>

package/src/navbar/navbar.tsx

@@ -11,9 +11,10 @@ import { SearchInput } from "./search-input";
 interface NavBarProps {
     title: string;
     showInput: boolean;
+    showPkgFilter: boolean;
 }
 
-export const NavBar: FC<NavBarProps> = async ({ title, showInput }) => {
+export const NavBar: FC<NavBarProps> = async ({ title, showInput, showPkgFilter }) => {
     const configs = await getConfigs();
 
     let session: any;
@@ -42,7 +43,7 @@ export const NavBar: FC<NavBarProps> = async ({ title, showInput }) => {
                 </div>
 
                 <div className="flex items-center space-x-3">
-                    <SearchInput showInput={showInput} />
+                    <SearchInput showInput={showInput} showPkgFilter={showPkgFilter} />
 
                     {configs.OIDC.user.enabled && (
                         <>

package/src/navbar/search-input.tsx

@@ -7,9 +7,10 @@ import { AutoComplete } from "../autocomplete";
 
 type Props = {
     showInput: boolean
+    showPkgFilter: boolean
 }
-export const SearchInput: FC<Props> = ({ showInput }) => {
-    const [checked, setChecked] = useState<boolean>(false);
+export const SearchInput: FC<Props> = ({ showInput, showPkgFilter }) => {
+    const [checked, setChecked] = useState<boolean>(true);
 
     if (!showInput) {
         return null;
@@ -25,17 +26,19 @@ export const SearchInput: FC<Props> = ({ showInput }) => {
                 searchByPackage={checked}
             />
 
-            <TooltipProvider>
-                <Tooltip delayDuration={100}>
-                    <TooltipTrigger onClick={() => setChecked(!checked)}>
-                        {checked ? <FileCheck className="opacity-50" /> : <FileX className="opacity-50" />}
-                    </TooltipTrigger>
-
-                    <TooltipContent>
-                        If checked will search only in this document
-                    </TooltipContent>
-                </Tooltip>
-            </TooltipProvider>
+            {showPkgFilter && <>
+                <TooltipProvider>
+                    <Tooltip delayDuration={100}>
+                        <TooltipTrigger onClick={() => setChecked(!checked)}>
+                            {checked ? <FileCheck className="opacity-50" /> : <FileX className="opacity-50" />}
+                        </TooltipTrigger>
+
+                        <TooltipContent>
+                            If checked will search only in this document
+                        </TooltipContent>
+                    </Tooltip>
+                </TooltipProvider>
+            </>}
 
         </div>
     );

package/src/page-wrapper.tsx

@@ -4,13 +4,20 @@ import { NavBar } from './navbar/navbar';
 type Props = {
     children: React.ReactNode;
     title: string;
-    showInput: boolean;
+    pageType: "BLOG" | "DOC" | "HOME"
 }
 
-export const PageWrapper = ({ children, title, showInput }: Props) => {
+export const PageWrapper = ({ children, title, pageType }: Props) => {
+    const showInput = pageType === "DOC" || pageType === "BLOG"
+    const showPkgFilter = pageType === "DOC"
+
     return (
         <>
-            <NavBar title={title} showInput={showInput} />
+            <NavBar
+                title={title}
+                showInput={showInput}
+                showPkgFilter={showPkgFilter}
+            />
             {children}
         </>
     );

package/src/pagination.tsx

@@ -8,6 +8,7 @@ import {
     PaginationPrevious,
 } from "@c-rex/ui/pagination"
 import { parseAsInteger, useQueryState } from "nuqs";
+import { useSearchContext } from "@c-rex/contexts/search";
 
 interface PaginationProps {
     totalPages: number;
@@ -16,6 +17,7 @@ interface PaginationProps {
 
 export const Pagination: FC<PaginationProps> = ({ totalPages, currentPage }) => {
     const disabledClass = "opacity-50 pointer-events-none";
+    const { setLoading } = useSearchContext();
 
     const [_, setPage] = useQueryState('page',
         parseAsInteger.withOptions({
@@ -24,6 +26,11 @@ export const Pagination: FC<PaginationProps> = ({ totalPages, currentPage }) =>
         })
     )
 
+    const onChangePage = (pageNumber: number) => {
+        setLoading(true);
+        setPage(pageNumber);
+    }
+
     return (
         <PaginationUI className="py-4">
             <PaginationContent>
@@ -31,7 +38,7 @@ export const Pagination: FC<PaginationProps> = ({ totalPages, currentPage }) =>
                     <PaginationPrevious
                         href="#"
                         className={currentPage === 1 ? disabledClass : ""}
-                        onClick={() => setPage(currentPage - 1)}
+                        onClick={() => onChangePage(currentPage - 1)}
                     />
                 </PaginationItem>
 
@@ -40,7 +47,7 @@ export const Pagination: FC<PaginationProps> = ({ totalPages, currentPage }) =>
                         <PaginationLink
                             href="#"
                             isActive={page === currentPage}
-                            onClick={() => setPage(page)}
+                            onClick={() => onChangePage(page)}
                         >
                             {page}
                         </PaginationLink>
@@ -55,7 +62,7 @@ export const Pagination: FC<PaginationProps> = ({ totalPages, currentPage }) =>
                 <PaginationItem>
                     <PaginationNext
                         href="#"
-                        onClick={() => setPage(currentPage + 1)}
+                        onClick={() => onChangePage(currentPage + 1)}
                         className={currentPage === totalPages ? disabledClass : ""}
                     />
                 </PaginationItem>

package/src/result-list.tsx

@@ -1,17 +1,19 @@
 import React, { FC } from "react";
-import { ConfigInterface, DefaultPageInfo, informationUnitsResponseItem, } from "@c-rex/interfaces";
+import { DefaultPageInfo, informationUnitsResponseItem, } from "@c-rex/interfaces";
 import { Empty } from "./empty";
 import BlogView from './result-view/blog';
 import TableView from './result-view/table';
 import { Pagination } from "./pagination";
+import { useAppConfig } from "@c-rex/contexts/config-provider";
 
 interface ResultListProps {
     items: informationUnitsResponseItem[];
-    configs: ConfigInterface;
     pagination: DefaultPageInfo;
 }
 
-export const ResultList: FC<ResultListProps> = ({ items, configs, pagination }: ResultListProps) => {
+export const ResultList: FC<ResultListProps> = ({ items, pagination }: ResultListProps) => {
+    const { configs } = useAppConfig()
+
     const ViewComponent = configs.results.resultViewStyle == "table" ? TableView : BlogView;
 
     return (

package/src/result-view/blog.tsx

@@ -1,20 +1,93 @@
-import React, { FC } from "react";
-import { BlogCard } from "../blog-card";
-import { informationUnitsResponseItem } from "@c-rex/interfaces";
+"use client"
+
+import React, { 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";
 
 interface BlogViewProps {
-    items: informationUnitsResponseItem[];
+    items: TopicsResponseItem[];
 }
 
 const BlogView: FC<BlogViewProps> = ({ items }) => {
+    const t = useTranslations("results")
+    const [isLoading, setLoading] = useState(true);
     return (
-        <div className="grid gap-8 md:grid-cols-2 md:gap-x-6 md:gap-y-10 xl:grid-cols-3">
-            {items.map((item, index) => {
+        <div className="grid gap-6 grid-cols-2 ">
+            {items.map((item, index) => (
+
+                <Card
+                    key={item.shortId}
+                    className={cn(
+                        `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"
+                                }}
+                                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>
 
-                return (
-                    <BlogCard key={index} item={item} />
-                );
-            })}
+                    {!item.disabled && (
+                        <Link href={item.link} className="absolute inset-0">
+                            <span className="sr-only">{t("viewArticle")}</span>
+                        </Link>
+                    )}
+                </Card>
+            ))}
         </div>
     );
 };

package/src/search-modal.tsx

@@ -38,7 +38,7 @@ export const SearchModal: FC<SearchModalProps> = ({ trigger }) => {
         wildcard: parseAsString,
         operator: parseAsString,
         search: parseAsString,
-        package: parseAsString,
+        packages: parseAsString,
         tags: parseAsBoolean,
         like: parseAsBoolean,
     }, {
@@ -80,7 +80,6 @@ export const SearchModal: FC<SearchModalProps> = ({ trigger }) => {
             wildcard: WILD_CARD_OPTIONS.BOTH,
             tags: false,
             like: false,
-            package: ""
         });
     }
 

package/src/blog-card.tsx

@@ -1,88 +0,0 @@
-import Link from "next/link";
-import { cn } from "@c-rex/utils";
-import { BlurImage } from "./blur-image";
-import { useTranslations } from "next-intl";
-import { informationUnitsResponseItem } from "@c-rex/interfaces";
-
-interface BlogCardProp {
-    item: informationUnitsResponseItem;
-    priority?: boolean;
-    horizontal?: boolean;
-}
-
-export const BlogCard = ({
-    item,
-    priority,
-    horizontal = false,
-}: BlogCardProp) => {
-    const t = useTranslations("results")
-    const image = "/img/blog-post-1.webp"
-    const blurDataURL = "/img/blog-post-1.webp"
-
-    return (
-        <article
-            className={cn(
-                "group relative", `c-rex_result_${item.type.toLowerCase()}`,
-                horizontal
-                    ? "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="w-full overflow-hidden rounded-xl border">
-                <BlurImage
-                    alt={item.title}
-                    blurDataURL={blurDataURL}
-                    className={cn(
-                        "size-full object-cover object-center",
-                        horizontal ? "lg:h-72" : null,
-                    )}
-                    width={800}
-                    height={400}
-                    priority={priority}
-                    placeholder="blur"
-                    src={image}
-                    sizes="(max-width: 768px) 750px, 600px"
-                />
-            </div>
-
-            <div
-                className={cn(
-                    "flex flex-1 flex-col",
-                    horizontal ? "justify-center" : "justify-between",
-                )}
-            >
-                <div className="w-full">
-                    <h2 className="my-1.5 line-clamp-2 font-heading text-2xl">
-                        {item.title}
-                    </h2>
-                    {item.type && (
-                        <p className="line-clamp-2 text-muted-foreground">
-                            {item.type}
-                        </p>
-                    )}
-                </div>
-                {/*
-                <div className="mt-4 flex items-center space-x-3">
-                    <div className="flex items-center -space-x-2">
-                        {item.authors && (
-                            <p className="text-sm text-muted-foreground">{item.authors}</p>
-                        )}
-                    </div>
-
-                    {item.date && (
-                        <p className="text-sm text-muted-foreground">{item.date}</p>
-                    )}
-                </div>
-                */}
-            </div>
-
-            {!item.disabled && (
-                <Link href={item.link} className="absolute inset-0">
-                    <span className="sr-only">{t("viewArticle")}</span>
-                </Link>
-            )}
-        </article>
-    );
-};

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

@@ -1,46 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { BlogCard } from '../blog-card';
-
-const meta: Meta = {
-    title: 'Components/BlogCard',
-    component: BlogCard,
-    tags: ['autodocs',],
-    parameters: {
-        layout: 'centered',
-    },
-    argTypes: {
-        data: { control: 'object', description: 'The data to be displayed in the card' },
-        priority: { control: 'boolean', description: 'Whether the image should be prioritized', type: 'boolean' },
-        horizontal: { control: 'boolean' },
-    },
-} satisfies Meta<typeof BlogCard>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const mockBlogData = {
-    title: 'Getting Started with C-Rex Components',
-    blurDataURL: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==',
-    image: 'https://images.pexels.com/photos/31712301/pexels-photo-31712301/free-photo-of-scenic-cycling-tour-in-andernach-fields.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
-    description: 'Learn how to use C-Rex components to build modern web applications with React and Next.js.',
-    authors: 'John Doe',
-    _id: '1',
-    date: '2023-05-15',
-    slug: 'getting-started-with-c-rex-components',
-};
-
-export const Horizontal: Story = {
-    args: {
-        data: mockBlogData,
-        priority: false,
-        horizontal: true,
-    },
-};
-
-export const WithPriority: Story = {
-    args: {
-        data: mockBlogData,
-        priority: true,
-        horizontal: false,
-    },
-};