@c-rex/components 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c-rex/components",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "files": [
     "src"
   ],

package/src/blog-card.tsx

@@ -1,8 +1,7 @@
 import Link from "next/link";
 import { cn } from "@c-rex/utils";
 import { BlurImage } from "./blur-image";
-
-//import Author from "./author";
+import { useTranslations } from "next-intl";
 
 interface BlogCardProp {
     data: {
@@ -24,6 +23,8 @@ export const BlogCard = ({
     priority,
     horizontal = false,
 }: BlogCardProp) => {
+    const t = useTranslations("results")
+
     return (
         <article
             className={cn(
@@ -80,7 +81,7 @@ export const BlogCard = ({
                 </div>
             </div>
             <Link href={data.slug} className="absolute inset-0" target="_blank">
-                <span className="sr-only">View Article</span>
+                <span className="sr-only">{t("viewArticle")}</span>
             </Link>
         </article>
     );

package/src/navbar/navbar.tsx

@@ -48,7 +48,6 @@ export const NavBar: FC<NavBarProps> = async () => {
         country: getCountryCodeByLang(lang)
     }));
 
-
     return (
         <header className="sticky top-0 z-40 flex w-full bg-background/60 backdrop-blur-xl transition-all bg-transparent border-b justify-center py-4">
             <div className="container flex justify-between">
@@ -61,6 +60,7 @@ export const NavBar: FC<NavBarProps> = async () => {
                             height={50}
                         />
                     </Link>
+                    {configs.projectName}
                 </div>
 
                 <div className="flex items-center space-x-3">

package/src/result-list.tsx

@@ -1,16 +1,22 @@
-import { FC } from "react";
-import { informationUnitsItems } from "@c-rex/interfaces";
+import React, { FC } from "react";
+import { ConfigInterface, informationUnitsItems } from "@c-rex/interfaces";
 import { Empty } from "./empty";
-//import { CUSTOMER_CONFIG } from '@/config/customerConfig';
-//import { RESULT_VIEW_OPTIONS } from '@/constants/components';
 import BlogView from './result-view/blog';
-
-const ViewComponent = BlogView;
+import TableView from './result-view/table';
 
 interface ResultListProps {
     items: informationUnitsItems[];
+    configs: ConfigInterface
 }
 
-export const ResultList: FC<ResultListProps> = ({ items }) => {
-    return <>{items.length == 0 ? <Empty /> : <ViewComponent items={items} />}</>;
+export const ResultList: FC<ResultListProps> = ({ items, configs }) => {
+    const ViewComponent = configs.resultViewStyle == "table" ? TableView : BlogView;
+
+    return (
+        <>
+            {
+                items.length == 0 ? <Empty /> : <ViewComponent items={items} />
+            }
+        </>
+    );
 };

package/src/result-view/table.tsx

@@ -1,5 +1,4 @@
-import { FC, ReactNode } from "react";
-
+import React, { FC, ReactNode } from "react";
 import {
     Table,
     TableBody,
@@ -8,36 +7,21 @@ import {
     TableRow,
 } from "@c-rex/ui/table";
 import { informationUnitsItems, Labels } from "@c-rex/interfaces";
-//import { getFlagIcon } from '@c-rex/utils/index';
+import Link from "next/link";
+import { useTranslations } from "next-intl";
 
 interface TableViewProps {
     items: informationUnitsItems[];
 }
 
 const TableView: FC<TableViewProps> = ({ items }) => {
+    const t = useTranslations("results")
+
     const getTitle = (labels: Labels[]): string => {
         return labels.map((item) => item.value).join();
     };
-    const getIcons = (languages: string[]): ReactNode[] => {
-        return languages.map((lang, index) => {
-            const aux = lang.split("-")[1];
-
-            /*
-                  const FlagIcon = getFlagIcon(aux);
-                  
-                  return FlagIcon && (
-                      <div key={index} style={{ width: 36 }} className="border me-3">
-                      <FlagIcon />
-                      </div>
-                  )
-                  */
-
-            return (
-                <div key={index} style={{ width: 36 }} className="border me-3">
-                    {aux}
-                </div>
-            );
-        });
+    const getIcons = (languages: string[]): string => {
+        return languages.map((lang) => lang.split("-")[1]).join(",");
     };
 
     return (
@@ -45,14 +29,20 @@ const TableView: FC<TableViewProps> = ({ items }) => {
             <Table>
                 <TableHeader>
                     <TableRow>
-                        <TableCell>Title</TableCell>
-                        <TableCell>Country</TableCell>
+                        <TableCell>{t("title")}</TableCell>
+                        <TableCell>{t("language")}</TableCell>
                     </TableRow>
                 </TableHeader>
                 <TableBody>
                     {items.map((item: informationUnitsItems, index: number) => (
                         <TableRow key={index}>
-                            <TableCell>{getTitle(item.labels)}</TableCell>
+                            <Link
+                                key={index}
+                                href={`info/${item.shortId}`}
+                                target="_blank"
+                            >
+                                <TableCell>{getTitle(item.labels)}</TableCell>
+                            </Link>
                             <TableCell>{getIcons(item.languages)}</TableCell>
                         </TableRow>
                     ))}