@c-rex/components 0.1.8 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c-rex/components",
-  "version": "0.1.8",
+  "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"

package/src/dialog-filter.tsx

@@ -1,4 +1,4 @@
-import React, { FC, use, useEffect, useState } from "react"
+import React, { FC, useEffect, useState } from "react"
 import { Button } from "@c-rex/ui/button"
 import {
     Dialog,
@@ -18,10 +18,10 @@ 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;
-    setLoading: (loading: boolean) => void;
 }
 interface Languages {
     lang: string;
@@ -29,8 +29,9 @@ interface Languages {
     checked: boolean;
 }
 
-export const DialogFilter: FC<DialogFilterProps> = ({ trigger, setLoading }) => {
+export const DialogFilter: FC<DialogFilterProps> = ({ trigger }) => {
     const t = useTranslations("filter");
+    const { setLoading } = useSearchContext();
     const { availableLanguagesAndCountries } = useAppConfig()
     const [params, setParams] = useQueryStates({
         language: parseAsString,

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/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/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/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,
-    },
-};