@c-rex/components 0.0.4 → 0.0.6

package/dist/src/autocomplete.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    initialValue: string;
+    onSelect: (value: string) => void;
+    onSearch: (value: string) => Promise<string[]>;
+};
+export declare const AutoComplete: ({ initialValue, onSearch, onSelect, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=autocomplete.d.ts.map

package/dist/src/autocomplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../src/autocomplete.tsx"],"names":[],"mappings":"AAiBA,KAAK,KAAK,GAAG;IACT,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,uCAI1B,KAAK,4CAqFP,CAAA"}

package/dist/src/blog-card.d.ts

@@ -0,0 +1,17 @@
+interface BlogCardProp {
+    data: {
+        title: string;
+        blurDataURL: string;
+        image: string;
+        description: string;
+        authors: string;
+        _id: string;
+        date: string;
+        slug: string;
+    };
+    priority?: boolean;
+    horizontal?: boolean;
+}
+export declare const BlogCard: ({ data, priority, horizontal, }: BlogCardProp) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=blog-card.d.ts.map

package/dist/src/blog-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"blog-card.d.ts","sourceRoot":"","sources":["../../src/blog-card.tsx"],"names":[],"mappings":"AAMA,UAAU,YAAY;IAClB,IAAI,EAAE;QACF,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,MAAM,CAAC;QACpB,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,MAAM,CAAC;QACpB,OAAO,EAAE,MAAM,CAAC;QAChB,GAAG,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,QAAQ,GAAI,iCAItB,YAAY,4CA6Dd,CAAC"}

package/dist/src/blur-image.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentProps } from "react";
+import Image from "next/image";
+export declare const BlurImage: (props: ComponentProps<typeof Image>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=blur-image.d.ts.map

package/dist/src/blur-image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"blur-image.d.ts","sourceRoot":"","sources":["../../src/blur-image.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,MAAM,YAAY,CAAC;AAG/B,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,CAAC,OAAO,KAAK,CAAC,4CAe5D,CAAA"}

package/dist/src/breadcrumb.d.ts

@@ -0,0 +1,9 @@
+import { FC } from "react";
+import { TreeOfContent } from "@c-rex/interfaces";
+interface BreadcrumbProps {
+    items: TreeOfContent[];
+    loading?: boolean;
+}
+export declare const Breadcrumb: FC<BreadcrumbProps>;
+export {};
+//# sourceMappingURL=breadcrumb.d.ts.map

package/dist/src/breadcrumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../src/breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAa,MAAM,OAAO,CAAC;AAUtC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,UAAU,eAAe;IACrB,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA+D1C,CAAC"}

package/dist/src/empty.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+export declare const Empty: FC;
+//# sourceMappingURL=empty.d.ts.map

package/dist/src/empty.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty.d.ts","sourceRoot":"","sources":["../../src/empty.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAG3B,eAAO,MAAM,KAAK,EAAE,EASnB,CAAC"}

package/dist/src/navbar.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+interface NavBarProps {
+    scroll?: boolean;
+    large?: boolean;
+}
+export declare const NavBar: FC<NavBarProps>;
+export {};
+//# sourceMappingURL=navbar.d.ts.map

package/dist/src/navbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navbar.d.ts","sourceRoot":"","sources":["../../src/navbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAM3B,UAAU,WAAW;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAsDlC,CAAC"}

package/dist/src/providers/search-state-wrapper.d.ts

@@ -0,0 +1,13 @@
+import { FC, ReactNode } from "react";
+interface SearchStateWrapperProps {
+    children: ReactNode;
+    filters: {
+        searchValue: string;
+        page: number;
+        selectedLanguage: string[];
+        availableLanguages: string[];
+    };
+}
+export declare const SearchStateWrapper: FC<SearchStateWrapperProps>;
+export {};
+//# sourceMappingURL=search-state-wrapper.d.ts.map

package/dist/src/providers/search-state-wrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-state-wrapper.d.ts","sourceRoot":"","sources":["../../../src/providers/search-state-wrapper.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,uBAAuB;IAC7B,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,EAAE;QACL,WAAW,EAAE,MAAM,CAAC;QACpB,IAAI,EAAE,MAAM,CAAC;QACb,gBAAgB,EAAE,MAAM,EAAE,CAAC;QAC3B,kBAAkB,EAAE,MAAM,EAAE,CAAC;KAChC,CAAC;CACL;AAED,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAK1D,CAAC"}

package/dist/src/result-list.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { informationUnitsItems } from "@c-rex/interfaces";
+interface ResultListProps {
+    items: informationUnitsItems[];
+}
+export declare const ResultList: FC<ResultListProps>;
+export {};
+//# sourceMappingURL=result-list.d.ts.map

package/dist/src/result-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"result-list.d.ts","sourceRoot":"","sources":["../../src/result-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAQ1D,UAAU,eAAe;IACrB,KAAK,EAAE,qBAAqB,EAAE,CAAC;CAClC;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAE1C,CAAC"}

package/dist/src/result-view/blog.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { informationUnitsItems } from "@c-rex/interfaces";
+interface BlogViewProps {
+    items: informationUnitsItems[];
+}
+declare const BlogView: FC<BlogViewProps>;
+export default BlogView;
+//# sourceMappingURL=blog.d.ts.map

package/dist/src/result-view/blog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"blog.d.ts","sourceRoot":"","sources":["../../../src/result-view/blog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAG3B,OAAO,EAAE,qBAAqB,EAAU,MAAM,mBAAmB,CAAC;AAElE,UAAU,aAAa;IACnB,KAAK,EAAE,qBAAqB,EAAE,CAAC;CAClC;AAED,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CA0B/B,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/src/result-view/table.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { informationUnitsItems } from "@c-rex/interfaces";
+interface TableViewProps {
+    items: informationUnitsItems[];
+}
+declare const TableView: FC<TableViewProps>;
+export default TableView;
+//# sourceMappingURL=table.d.ts.map

package/dist/src/result-view/table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/result-view/table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAa,MAAM,OAAO,CAAC;AAStC,OAAO,EAAE,qBAAqB,EAAU,MAAM,mBAAmB,CAAC;AAGlE,UAAU,cAAc;IACpB,KAAK,EAAE,qBAAqB,EAAE,CAAC;CAClC;AAED,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CA8CjC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/src/sidebar.d.ts

@@ -0,0 +1,10 @@
+import { ComponentProps } from "react";
+import { Sidebar } from "@c-rex/ui/sidebar";
+import { TreeOfContent } from "@c-rex/interfaces";
+interface SidebarProps extends ComponentProps<typeof Sidebar> {
+    data: TreeOfContent[];
+    loading?: boolean;
+}
+export declare function AppSidebar({ data, loading, ...props }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=sidebar.d.ts.map

package/dist/src/sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../src/sidebar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EACH,OAAO,EAUV,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,UAAU,YAAa,SAAQ,cAAc,CAAC,OAAO,OAAO,CAAC;IACzD,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CAoDnE"}

package/dist/tailwind.config.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=tailwind.config.d.ts.map

package/dist/tailwind.config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind.config.d.ts","sourceRoot":"","sources":["../tailwind.config.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,55 +1,56 @@
 {
   "name": "@c-rex/components",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "publishConfig": {
     "access": "public"
   },
   "exports": {
     "./autocomplete": {
-      "types": "./src/autocomplete.tsx",
+      "types": "./dist/autocomplete.d.ts",
       "import": "./src/autocomplete.tsx"
     },
     "./blog-card": {
-      "types": "./src/blog-card.tsx",
+      "types": "./dist/blog-card.d.ts",
       "import": "./src/blog-card.tsx"
     },
     "./blur-image": {
-      "types": "./src/blur-image.tsx",
+      "types": "./dist/blur-image.d.ts",
       "import": "./src/blur-image.tsx"
     },
     "./breadcrumb": {
-      "types": "./src/breadcrumb.tsx",
+      "types": "./dist/breadcrumb.d.ts",
       "import": "./src/breadcrumb.tsx"
     },
     "./empty": {
-      "types": "./src/empty.tsx",
+      "types": "./dist/empty.d.ts",
       "import": "./src/empty.tsx"
     },
     "./navbar": {
-      "types": "./src/navbar.tsx",
+      "types": "./dist/navbar.d.ts",
       "import": "./src/navbar.tsx"
     },
     "./providers/search-state-wrapper": {
-      "types": "./src/providers/search-state-wrapper.tsx",
+      "types": "./dist/providers/search-state-wrapper.d.ts",
       "import": "./src/providers/search-state-wrapper.tsx"
     },
     "./result-list": {
-      "types": "./src/result-list.tsx",
+      "types": "./dist/result-list.d.ts",
       "import": "./src/result-list.tsx"
     },
     "./result-view/blog": {
-      "types": "./src/result-view/blog.tsx",
+      "types": "./dist/result-view/blog.d.ts",
       "import": "./src/result-view/blog.tsx"
     },
     "./result-view/table": {
-      "types": "./src/result-view/table.tsx",
+      "types": "./dist/result-view/table.d.ts",
       "import": "./src/result-view/table.tsx"
     },
     "./sidebar": {
-      "types": "./src/sidebar.tsx",
+      "types": "./dist/sidebar.d.ts",
       "import": "./src/sidebar.tsx"
     },
     "./package.json": "./package.json"

package/src/autocomplete.tsx

@@ -0,0 +1,113 @@
+import { Command as CommandPrimitive } from "cmdk";
+import { Check } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Input } from "@c-rex/ui/input";
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandItem,
+    CommandList
+} from "@c-rex/ui/command";
+import {
+    Popover,
+    PopoverAnchor,
+    PopoverContent
+} from "@c-rex/ui/popover";
+
+type Props = {
+    initialValue: string;
+    onSelect: (value: string) => void;
+    onSearch: (value: string) => Promise<string[]>;
+};
+
+export const AutoComplete = ({
+    initialValue,
+    onSearch,
+    onSelect,
+}: Props) => {
+    const [query, setQuery] = useState(initialValue);
+    const [suggestions, setSuggestions] = useState<string[]>([]);
+
+    const [open, setOpen] = useState(false);
+
+    useEffect(() => {
+        const debounceFetch = setTimeout(() => {
+            if (query) {
+                onSearch(query).then(setSuggestions);
+            } else {
+                setSuggestions([]);
+            }
+        }, 300);
+
+        return () => clearTimeout(debounceFetch);
+    }, [onSearch, query]);
+
+    return (
+        <div className="flex items-center">
+            <Popover open={open} onOpenChange={setOpen}>
+                <Command shouldFilter={false}>
+                    <PopoverAnchor asChild>
+                        <CommandPrimitive.Input
+                            asChild
+                            value={query}
+                            onValueChange={setQuery}
+                            onKeyDown={(e) => setOpen(e.key !== "Escape")}
+                            onMouseDown={() => setOpen(false)}
+                            onFocus={() => setOpen(true)}
+                        >
+                            <Input />
+                        </CommandPrimitive.Input>
+                    </PopoverAnchor>
+
+                    {!open && <CommandList aria-hidden="true" className="hidden" />}
+
+                    <PopoverContent
+                        asChild
+                        onOpenAutoFocus={(e) => e.preventDefault()}
+                        onInteractOutside={(e) => {
+                            if (
+                                e.target instanceof Element &&
+                                e.target.hasAttribute("cmdk-input")
+                            ) {
+                                e.preventDefault();
+                            }
+                        }}
+                        className="w-[--radix-popover-trigger-width] p-0"
+                    >
+                        <CommandList>
+                            {/*isLoading && (
+                                <CommandPrimitive.Loading>
+                                    <div className="p-1">
+                                        <Skeleton className="h-6 w-full" />
+                                    </div>
+                                </CommandPrimitive.Loading>
+                            )*/}
+
+                            {suggestions.length > 0 ? (
+                                <CommandGroup>
+                                    {suggestions.map((option) => (
+                                        <CommandItem
+                                            key={option}
+                                            value={option}
+                                            onMouseDown={(e) => e.preventDefault()}
+                                            onSelect={(inputValue) => {
+                                                setOpen(false);
+                                                onSelect(inputValue ?? "");
+                                            }}
+                                        >
+                                            <Check className="mr-2 h-4 w-4 opacity-0" />
+                                            {option}
+                                        </CommandItem>
+                                    ))}
+                                </CommandGroup>
+                            ) : (
+                                <CommandEmpty>No suggestions.</CommandEmpty>
+                            )}
+                        </CommandList>
+                    </PopoverContent>
+                </Command>
+            </Popover>
+        </div>
+    );
+}

package/src/blog-card.tsx

@@ -0,0 +1,87 @@
+import Link from "next/link";
+import { cn } from "@c-rex/utils";
+import { BlurImage } from "./blur-image";
+
+//import Author from "./author";
+
+interface BlogCardProp {
+    data: {
+        title: string;
+        blurDataURL: string;
+        image: string;
+        description: string;
+        authors: string;
+        _id: string;
+        date: string;
+        slug: string;
+    };
+    priority?: boolean;
+    horizontal?: boolean;
+}
+
+export const BlogCard = ({
+    data,
+    priority,
+    horizontal = false,
+}: BlogCardProp) => {
+    return (
+        <article
+            className={cn(
+                "group relative",
+                horizontal
+                    ? "grid grid-cols-1 gap-3 md:grid-cols-2 md:gap-6"
+                    : "flex flex-col space-y-2",
+            )}
+        >
+            {data.image && (
+                <div className="w-full overflow-hidden rounded-xl border">
+                    <BlurImage
+                        alt={data.title}
+                        blurDataURL={data.blurDataURL}
+                        className={cn(
+                            "size-full object-cover object-center",
+                            horizontal ? "lg:h-72" : null,
+                        )}
+                        width={800}
+                        height={400}
+                        priority={priority}
+                        placeholder="blur"
+                        src={data.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">
+                        {data.title}
+                    </h2>
+                    {data.description && (
+                        <p className="line-clamp-2 text-muted-foreground">
+                            {data.description}
+                        </p>
+                    )}
+                </div>
+                <div className="mt-4 flex items-center space-x-3">
+                    <div className="flex items-center -space-x-2">
+                        {data.authors && (
+                            <p className="text-sm text-muted-foreground">{data.authors}</p>
+                        )}
+                    </div>
+
+                    {data.date && (
+                        <p className="text-sm text-muted-foreground">{data.date}</p>
+                    )}
+                </div>
+            </div>
+            <Link href={data.slug} className="absolute inset-0" target="_blank">
+                <span className="sr-only">View Article</span>
+            </Link>
+        </article>
+    );
+};

package/src/blur-image.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { useState } from "react";
+import type { ComponentProps } from "react";
+import Image from "next/image";
+import { cn } from "@c-rex/utils";
+
+export const BlurImage = (props: ComponentProps<typeof Image>) => {
+    const [isLoading, setLoading] = useState(true);
+
+    return (
+        <Image
+            {...props}
+            alt={props.alt}
+            className={cn(
+                props.className,
+                "duration-500 ease-in-out",
+                isLoading ? "blur-sm" : "blur-0",
+            )}
+            onLoad={() => setLoading(false)}
+        />
+    );
+}

package/src/breadcrumb.tsx

@@ -0,0 +1,81 @@
+import { FC, ReactNode } from "react";
+import {
+    Breadcrumb as BreadcrumbComponent,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbList,
+    BreadcrumbPage,
+    BreadcrumbSeparator
+} from "@c-rex/ui/breadcrumb";
+import { Skeleton } from "@c-rex/ui/skeleton";
+import { TreeOfContent } from "@c-rex/interfaces";
+
+interface BreadcrumbProps {
+    items: TreeOfContent[];
+    loading?: boolean;
+}
+
+export const Breadcrumb: FC<BreadcrumbProps> = ({ items, loading }) => {
+    if (!items) {
+        return null;
+    }
+
+    if (loading) {
+        return (
+            <BreadcrumbComponent>
+                <BreadcrumbList>
+                    <BreadcrumbItem>
+                        <BreadcrumbPage>Home</BreadcrumbPage>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator />
+                    <BreadcrumbItem>
+                        <Skeleton className="w-40 h-6" />
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator />
+                    <BreadcrumbItem>
+                        <Skeleton className="w-40 h-6" />
+                    </BreadcrumbItem>
+                </BreadcrumbList>
+            </BreadcrumbComponent>
+        );
+    }
+
+    const homeItem: TreeOfContent = {
+        link: "/",
+        label: "Home",
+        id: "home",
+        active: false,
+        children: [],
+    };
+
+    const newItemList: TreeOfContent[] = [homeItem, ...items];
+
+    const renderLink = (showLink: boolean, item: TreeOfContent): ReactNode => {
+        if (showLink) {
+            return <BreadcrumbLink href={item.link}>{item.label}</BreadcrumbLink>;
+        }
+
+        return <BreadcrumbPage>{item.label}</BreadcrumbPage>;
+    };
+
+    return (
+        <BreadcrumbComponent>
+            <BreadcrumbList>
+                {newItemList.map((item, index) => {
+                    const isLast = index === newItemList.length - 1;
+
+                    return (
+                        <>
+                            <BreadcrumbItem key={`${item.label}-item`}>
+                                {renderLink(!isLast, item)}
+                            </BreadcrumbItem>
+                            {!isLast && (
+                                <BreadcrumbSeparator key={`${item.label}-separator`} />
+                            )}
+                        </>
+                    );
+                })}
+            </BreadcrumbList>
+        </BreadcrumbComponent>
+    );
+};

package/src/empty.tsx

@@ -0,0 +1,13 @@
+import { FC } from "react";
+import { Alert, AlertDescription, AlertTitle } from "@c-rex/ui/alert";
+
+export const Empty: FC = () => {
+    return (
+        <Alert className="my-2">
+            <AlertTitle>No results</AlertTitle>
+            <AlertDescription>
+                No data available. Please try adjusting your search or filter criteria.
+            </AlertDescription>
+        </Alert>
+    );
+};

package/src/navbar.tsx

@@ -0,0 +1,66 @@
+import { FC } from "react";
+
+import Link from "next/link";
+import { Button } from "@c-rex/ui/button";
+import Image from "next/image";
+
+interface NavBarProps {
+    scroll?: boolean;
+    large?: boolean;
+}
+
+export const NavBar: FC<NavBarProps> = () => {
+    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">
+                <div className="flex gap-6 md:gap-10">
+                    <Link href="/" className="flex items-center space-x-1.5">
+                        <Image
+                            src="/img/logo.png"
+                            alt="C-rex Logo"
+                            width={88}
+                            height={50}
+                        />
+                    </Link>
+
+                    <nav className="hidden gap-6 md:flex">
+                        {/*
+                        TODO: add map to load links
+                        TODO: add function to validate active item
+                    */}
+                        <Link
+                            href={"/blog"}
+                            prefetch={true}
+                            className={
+                                "flex items-center text-lg font-medium transition-colors hover:text-foreground/80 sm:text-sm"
+                            }
+                        >
+                            Blog
+                        </Link>
+
+                        <Link
+                            href={"#"}
+                            prefetch={true}
+                            className={
+                                "flex items-center text-lg font-medium transition-colors hover:text-foreground/80 sm:text-sm"
+                            }
+                        >
+                            Documentation
+                        </Link>
+                    </nav>
+                </div>
+
+                <div className="flex items-center space-x-3">
+                    <Button
+                        className="hidden gap-2 px-5 md:flex"
+                        variant="default"
+                        size="sm"
+                        rounded="full"
+                    >
+                        <span>Sign In</span>
+                    </Button>
+                </div>
+            </div>
+        </header>
+    );
+};

package/src/providers/search-state-wrapper.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { SearchProvider } from "@c-rex/contexts";
+import { FC, ReactNode } from "react";
+
+interface SearchStateWrapperProps {
+    children: ReactNode;
+    filters: {
+        searchValue: string;
+        page: number;
+        selectedLanguage: string[];
+        availableLanguages: string[];
+    };
+}
+
+export const SearchStateWrapper: FC<SearchStateWrapperProps> = ({
+    children,
+    filters,
+}) => {
+    return <SearchProvider value={{ ...filters }}>{children}</SearchProvider>;
+};

package/src/result-list.tsx

@@ -0,0 +1,16 @@
+import { FC } from "react";
+import { 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;
+
+interface ResultListProps {
+    items: informationUnitsItems[];
+}
+
+export const ResultList: FC<ResultListProps> = ({ items }) => {
+    return <>{items.length == 0 ? <Empty /> : <ViewComponent items={items} />}</>;
+};

package/src/result-view/blog-view.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import BlogView from '../result-view/blog';
+
+const meta: Meta<typeof BlogView> = {
+    title: 'Components/ResultView/Blog',
+    component: BlogView,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof BlogView>;
+
+const mockItems = [
+    {
+        id: '1',
+        shortId: 'doc-1',
+        labels: [
+            { value: 'Getting Started with C-Rex', language: 'en-US' },
+            { value: 'Começando com C-Rex', language: 'pt-BR' }
+        ],
+        languages: ['pt-BR'],
+        type: 'document',
+        renditions: [],
+        directoryNodes: []
+    },
+    {
+        id: '2',
+        shortId: 'doc-2',
+        labels: [
+            { value: 'Advanced Configuration Guide', language: 'en-US' }
+        ],
+        languages: ['en-US'],
+        type: 'document',
+        renditions: [],
+        directoryNodes: []
+    },
+    {
+        id: '3',
+        shortId: 'doc-3',
+        labels: [
+            { value: 'API Documentation', language: 'en-US' },
+            { value: 'Documentation API', language: 'fr-FR' }
+        ],
+        languages: ['fr-FR'],
+        type: 'document',
+        renditions: [],
+        directoryNodes: []
+    }
+];
+
+export const Default: Story = {
+    args: {
+        items: mockItems as any
+    }
+};

package/src/result-view/blog.tsx

@@ -0,0 +1,38 @@
+import { FC } from "react";
+
+import { BlogCard } from "../blog-card";
+import { informationUnitsItems, Labels } from "@c-rex/interfaces";
+
+interface BlogViewProps {
+    items: informationUnitsItems[];
+}
+
+const BlogView: FC<BlogViewProps> = ({ items }) => {
+    const getTitle = (labels: Labels[]): string => {
+        return labels.map((item) => item.value).join();
+    };
+
+    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) => {
+                return (
+                    <BlogCard
+                        key={index}
+                        data={{
+                            title: getTitle(item.labels),
+                            blurDataURL: "/img/blog-post-1.webp",
+                            image: "/img/blog-post-1.webp",
+                            description: "item.shortDescription",
+                            authors: "item.authors",
+                            _id: "item._id",
+                            date: "item.date",
+                            slug: `info/${item.shortId}`,
+                        }}
+                    />
+                );
+            })}
+        </div>
+    );
+};
+
+export default BlogView;

package/src/result-view/table-view.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import TableView from '../result-view/table';
+
+const meta: Meta<typeof TableView> = {
+    title: 'Components/ResultView/Table',
+    component: TableView,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof TableView>;
+
+const mockItems = [
+    {
+        id: '1',
+        labels: [
+            { value: 'Installation Guide', language: 'en-US' },
+            { value: 'Guide d\'installation', language: 'fr-FR' }
+        ],
+        languages: ['fr-FR'],
+        type: 'document',
+        renditions: [],
+        directoryNodes: []
+    },
+    {
+        id: '2',
+        labels: [
+            { value: 'User Manual', language: 'en-US' },
+            { value: 'Manual del Usuario', language: 'es-ES' }
+        ],
+        languages: ['es-ES'],
+        type: 'document',
+        renditions: [],
+        directoryNodes: []
+    },
+    {
+        id: '3',
+        labels: [
+            { value: 'Technical Specifications', language: 'en-US' }
+        ],
+        languages: ['en-US'],
+        type: 'document',
+        renditions: [],
+        directoryNodes: []
+    }
+];
+
+export const Default: Story = {
+    args: {
+        items: mockItems as any
+    }
+};

package/src/result-view/table.tsx

@@ -0,0 +1,65 @@
+import { FC, ReactNode } from "react";
+
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHeader,
+    TableRow,
+} from "@c-rex/ui/table";
+import { informationUnitsItems, Labels } from "@c-rex/interfaces";
+//import { getFlagIcon } from '@c-rex/utils/index';
+
+interface TableViewProps {
+    items: informationUnitsItems[];
+}
+
+const TableView: FC<TableViewProps> = ({ items }) => {
+    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>
+            );
+        });
+    };
+
+    return (
+        <div className="rounded-md border">
+            <Table>
+                <TableHeader>
+                    <TableRow>
+                        <TableCell>Title</TableCell>
+                        <TableCell>Country</TableCell>
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
+                    {items.map((item, index) => (
+                        <TableRow key={index}>
+                            <TableCell>{getTitle(item.labels)}</TableCell>
+                            <TableCell>{getIcons(item.languages)}</TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </div>
+    );
+};
+
+export default TableView;

package/src/sidebar.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { ComponentProps } from "react";
+import {
+    Sidebar,
+    SidebarContent,
+    SidebarGroup,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+    SidebarMenuSub,
+    SidebarMenuSubButton,
+    SidebarMenuSubItem,
+    SidebarRail
+} from "@c-rex/ui/sidebar";
+import { Skeleton } from "@c-rex/ui/skeleton";
+import { TreeOfContent } from "@c-rex/interfaces";
+
+interface SidebarProps extends ComponentProps<typeof Sidebar> {
+    data: TreeOfContent[];
+    loading?: boolean;
+}
+
+export function AppSidebar({ data, loading, ...props }: SidebarProps) {
+    return (
+        <Sidebar collapsible="icon" {...props} className="top-20">
+            <SidebarContent>
+                <SidebarGroup>
+                    <SidebarMenu className="pt-4">
+                        {loading ? (
+                            <>
+                                <Skeleton className="w-auto h-10 mb-2" />
+                                <Skeleton className="w-auto h-10 mb-2" />
+                                <Skeleton className="w-auto h-10 mb-2 ml-8" />
+                                <Skeleton className="w-auto h-10 mb-2 ml-8" />
+                                <Skeleton className="w-auto h-10 mb-2 ml-8" />
+                                <Skeleton className="w-auto h-10 mb-2 ml-8" />
+                                <Skeleton className="w-auto h-10 mb-2" />
+                            </>
+                        ) : (
+                            <>
+                                {data.map((item) => (
+                                    <SidebarMenuItem key={item.id}>
+                                        <SidebarMenuButton asChild isActive={item.active}>
+                                            <a href={item.link} title={item.label}>
+                                                {item.label}
+                                            </a>
+                                        </SidebarMenuButton>
+
+                                        {item.children?.length ? (
+                                            <SidebarMenuSub>
+                                                {item.children.map((item) => (
+                                                    <SidebarMenuSubItem key={item.label}>
+                                                        <SidebarMenuSubButton
+                                                            asChild
+                                                            isActive={item.active}
+                                                        >
+                                                            <a href={item.link} title={item.label}>
+                                                                {item.label}
+                                                            </a>
+                                                        </SidebarMenuSubButton>
+                                                    </SidebarMenuSubItem>
+                                                ))}
+                                            </SidebarMenuSub>
+                                        ) : null}
+                                    </SidebarMenuItem>
+                                ))}
+                            </>
+                        )}
+                    </SidebarMenu>
+                </SidebarGroup>
+            </SidebarContent>
+            <SidebarRail />
+        </Sidebar>
+    );
+}

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

@@ -0,0 +1,46 @@
+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,
+    },
+};

package/src/stories/blur-image.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { BlurImage } from '../blur-image';
+
+const meta = {
+    title: 'Components/BlurImage',
+    component: BlurImage,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        src: { control: 'text' },
+        alt: { control: 'text' },
+        width: { control: 'number' },
+        height: { control: 'number' },
+        className: { control: 'text' },
+    },
+} satisfies Meta<typeof BlurImage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        src: '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',
+        alt: 'Sample image with blur effect',
+        width: 400,
+        height: 300,
+        className: 'rounded-lg',
+    },
+};
+
+export const SmallImage: Story = {
+    args: {
+        src: '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',
+        alt: 'Small sample image with blur effect',
+        width: 200,
+        height: 150,
+        className: 'rounded-lg',
+    },
+};
+
+export const RoundedImage: Story = {
+    args: {
+        src: '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',
+        alt: 'Rounded sample image with blur effect',
+        width: 300,
+        height: 300,
+        className: 'rounded-full',
+    },
+};

package/src/stories/breadcrumb.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Breadcrumb } from '../breadcrumb';
+
+const meta: Meta = {
+    title: 'Components/Breadcrumb',
+    component: Breadcrumb,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    }
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const mockItems = [
+    {
+        id: 'docs',
+        label: 'Documentation',
+        link: '/docs',
+        active: false,
+        children: [],
+    },
+    {
+        id: 'components',
+        label: 'Components',
+        link: '/docs/components',
+        active: false,
+        children: [],
+    },
+    {
+        id: 'breadcrumb',
+        label: 'Breadcrumb',
+        link: '/docs/components/breadcrumb',
+        active: true,
+        children: [],
+    },
+];
+
+export const Default: Story = {
+    args: {
+        items: mockItems,
+        loading: false,
+    },
+};
+
+export const Loading: Story = {
+    args: {
+        items: [],
+        loading: true,
+    },
+};

package/src/stories/empty.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Empty } from '../empty';
+
+const meta = {
+    title: 'Components/Empty',
+    component: Empty,
+    tags: ['autodocs'],
+} satisfies Meta<typeof Empty>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+};

package/src/stories/navbar.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { NavBar } from '../navbar';
+
+const meta: Meta = {
+    title: 'Components/NavBar',
+    component: NavBar,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+} satisfies Meta<typeof NavBar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {}

package/src/stories/sidebar.stories.tsx

@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AppSidebar } from '../sidebar';
+import { SidebarInset, SidebarProvider, SidebarTrigger } from "@c-rex/ui/sidebar";
+
+const meta = {
+    title: 'Components/Sidebar',
+    component: AppSidebar,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        data: { control: 'object' },
+        loading: { control: 'boolean' },
+    },
+    decorators: [
+        (Story: any) => (
+            <SidebarProvider>
+                <SidebarTrigger />
+
+                <div className="flex">
+                    <SidebarInset>
+                        <Story />
+                    </SidebarInset>
+                </div>
+            </SidebarProvider>
+
+        ),
+    ]
+} satisfies Meta<typeof AppSidebar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const mockData = [
+    {
+        id: '1',
+        label: 'Getting Started',
+        link: '/docs/getting-started',
+        active: true,
+        children: [
+            {
+                id: '1-1',
+                label: 'Installation',
+                link: '/docs/getting-started/installation',
+                active: false,
+                children: [],
+            },
+            {
+                id: '1-2',
+                label: 'Configuration',
+                link: '/docs/getting-started/configuration',
+                active: false,
+                children: [],
+            },
+        ],
+    },
+    {
+        id: '2',
+        label: 'Components',
+        link: '/docs/components',
+        active: false,
+        children: [
+            {
+                id: '2-1',
+                label: 'Sidebar',
+                link: '/docs/components/sidebar',
+                active: false,
+                children: [],
+            },
+            {
+                id: '2-2',
+                label: 'Navbar',
+                link: '/docs/components/navbar',
+                active: false,
+                children: [],
+            },
+        ],
+    },
+];
+
+export const Default: Story = {
+    args: {
+        data: mockData,
+        loading: false,
+    },
+};
+
+export const Loading: Story = {
+    args: {
+        data: [],
+        loading: true,
+    },
+};