@c-rex/components 0.0.8 → 0.0.9

package/dist/result-view/blog-view.stories.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/periotto/Desktop/workspace/c-rex.net-web-client-foundation/packages/components/dist/result-view/blog-view.stories.cjs.js","../../src/result-view/blog-view.stories.tsx","../../src/blog-card.tsx","../../../utils/src/classMerge.ts","../../src/blur-image.tsx","../../src/result-view/blog.tsx"],"names":["__create","Object","create","__defProp","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__getProtoOf","getPrototypeOf","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toESM","mod","isNodeMode","__esModule","value","__toCommonJS","blog_view_stories_exports","Default","default","blog_view_stories_default","module","exports","import_link","require","import_clsx","import_tailwind_merge","cn","inputs","twMerge","clsx","import_react","import_image","import_jsx_runtime","BlurImage","props","useState","isLoading","setLoading","jsx","Image","alt","className","onLoad","BlogCard","data","priority","horizontal","import_jsx_runtime2","jsxs","children","image","title","blurDataURL","width","height","placeholder","src","sizes","description","authors","date","Link","href","slug","BlogView","items","getTitle","labels","map","item","join","import_jsx_runtime3","index","_id","shortId","blog_default","meta","component","parameters","layout","tags","mockItems","id","language","languages","type","renditions","directoryNodes","args"],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,IAAIA,WAAWC,OAAOC,MAAM;AAC5B,IAAIC,YAAYF,OAAOG,cAAc;AACrC,IAAIC,mBAAmBJ,OAAOK,wBAAwB;AACtD,IAAIC,oBAAoBN,OAAOO,mBAAmB;AAClD,IAAIC,eAAeR,OAAOS,cAAc;AACxC,IAAIC,eAAeV,OAAOW,SAAS,CAACC,cAAc;AAClD,IAAIC,WAAW,SAACC,QAAQC;IACtB,IAAK,IAAIC,QAAQD,IACfb,UAAUY,QAAQE,MAAM;QAAEC,KAAKF,GAAG,CAACC,KAAK;QAAEE,YAAY;IAAK;AAC/D;AACA,IAAIC,cAAc,SAACC,IAAIC,MAAMC,QAAQC;IACnC,IAAIF,QAAQ,CAAA,OAAOA,qCAAP,SAAOA,KAAG,MAAM,YAAY,OAAOA,SAAS,YAAY;YAC7D,kCAAA,2BAAA;;;gBAAA,IAAIG,MAAJ;gBACH,IAAI,CAACd,aAAae,IAAI,CAACL,IAAII,QAAQA,QAAQF,QACzCpB,UAAUkB,IAAII,KAAK;oBAAEP,KAAK;+BAAMI,IAAI,CAACG,IAAI;;oBAAEN,YAAY,CAAEK,CAAAA,OAAOnB,iBAAiBiB,MAAMG,IAAG,KAAMD,KAAKL,UAAU;gBAAC;;YAFpH,QAAK,YAAWZ,kBAAkBe,0BAA7B,SAAA,6BAAA,QAAA,yBAAA;;YAAA;YAAA;;;qBAAA,6BAAA;oBAAA;;;oBAAA;0BAAA;;;;IAGP;IACA,OAAOD;AACT;AACA,IAAIM,UAAU,SAACC,KAAKC,YAAYd;WAAYA,SAASa,OAAO,OAAO5B,SAASS,aAAamB,QAAQ,CAAC,GAAGR,YACnG,sEAAsE;IACtE,iEAAiE;IACjE,sEAAsE;IACtE,qEAAqE;IACrES,cAAc,CAACD,OAAO,CAACA,IAAIE,UAAU,GAAG3B,UAAUY,QAAQ,WAAW;QAAEgB,OAAOH;QAAKT,YAAY;IAAK,KAAKJ,QACzGa;;AAEF,IAAII,eAAe,SAACJ;WAAQR,YAAYjB,UAAU,CAAC,GAAG,cAAc;QAAE4B,OAAO;IAAK,IAAIH;;AAEtF,wCAAwC;AC7BxC,IAAAK,4BAAA,CAAA;AAAAnB,SAAAmB,2BAAA;IAAAC,SAAA;eAAAA;;IAAAC,SAAA;eAAAC;;AAAA;AAAAC,OAAAC,OAAA,GAAAN,aAAAC;ADqCA,oBAAoB;AErCpB,IAAAM,cAAiBZ,QAAAa,QAAA,cAAA;AFwCjB,6BAA6B;AGxC7B,IAAAC,cAAsCD,QAAA;AACtC,IAAAE,wBAAwBF,QAAA;AAEjB,SAASG;IAAA,IAAA,IAAA,OAAA,UAAA,QAAA,AAAMC,SAAN,UAAA,OAAA,OAAA,GAAA,OAAA,MAAA;QAAMA,OAAN,QAAA,SAAA,CAAA,KAAM;;IAClB,OAAA,CAAA,GAAOF,sBAAAG,OAAA,EAAA,CAAA,GAAQJ,YAAAK,IAAA,EAAKF;AACxB;AH0CA,qBAAqB;AI7CrB,IAAAG,eAAyBP,QAAA;AAEzB,IAAAQ,eAAkBrB,QAAAa,QAAA,eAAA;AAOV,IAAAS,qBAAAT,QAAA;AAJD,IAAMU,YAAY,SAACC;IACtB,IAA4B,wBAAA,CAAA,GAAIJ,aAAAK,QAAA,EAAS,WAAlCC,YAAqB,SAAVC,aAAU;IAE5B,OACI,aAAA,GAAA,CAAA,GAAAL,mBAAAM,GAAA,EAACP,aAAAQ,OAAAA,EAAA,wCACOL;QACJM,KAAKN,MAAMM,GAAA;QACXC,WAAWf,GACPQ,MAAMO,SAAA,EACN,4BACAL,YAAY,YAAY;QAE5BM,QAAQ;mBAAML,WAAW;;;AAGrC;AJ8CA,oBAAoB;AE/BA,IAAAL,sBAAAT,QAAA;AAhBb,IAAMoB,WAAW;QACpBC,aAAAA,MACAC,iBAAAA,oCACAC,YAAAA,4CAAa;IAEb,OACI,aAAA,GAAA,CAAA,GAAAC,oBAAAC,IAAA,EAAC,WAAA;QACGP,WAAWf,GACP,kBACAoB,aACM,mDACA;QAGTG,UAAA;YAAAL,KAAKM,KAAA,IACF,aAAA,GAAA,CAAA,GAAAH,oBAAAT,GAAA,EAAC,OAAA;gBAAIG,WAAU;gBACXQ,UAAA,aAAA,GAAA,CAAA,GAAAF,oBAAAT,GAAA,EAACL,WAAA;oBACGO,KAAKI,KAAKO,KAAA;oBACVC,aAAaR,KAAKQ,WAAA;oBAClBX,WAAWf,GACP,wCACAoB,aAAa,YAAY;oBAE7BO,OAAO;oBACPC,QAAQ;oBACRT,UAAAA;oBACAU,aAAY;oBACZC,KAAKZ,KAAKM,KAAA;oBACVO,OAAM;gBAAA;YACV;YAGR,aAAA,GAAA,CAAA,GAAAV,oBAAAC,IAAA,EAAC,OAAA;gBACGP,WAAWf,GACP,wBACAoB,aAAa,mBAAmB;gBAGpCG,UAAA;oBAAA,aAAA,GAAA,CAAA,GAAAF,oBAAAC,IAAA,EAAC,OAAA;wBAAIP,WAAU;wBACXQ,UAAA;4BAAA,aAAA,GAAA,CAAA,GAAAF,oBAAAT,GAAA,EAAC,MAAA;gCAAGG,WAAU;gCACTQ,UAAAL,KAAKO,KAAA;4BAAA;4BAETP,KAAKc,WAAA,IACF,aAAA,GAAA,CAAA,GAAAX,oBAAAT,GAAA,EAAC,KAAA;gCAAEG,WAAU;gCACRQ,UAAAL,KAAKc,WAAA;4BAAA;yBACV;oBAAA;oBAGR,aAAA,GAAA,CAAA,GAAAX,oBAAAC,IAAA,EAAC,OAAA;wBAAIP,WAAU;wBACXQ,UAAA;4BAAA,aAAA,GAAA,CAAA,GAAAF,oBAAAT,GAAA,EAAC,OAAA;gCAAIG,WAAU;gCACVQ,UAAAL,KAAKe,OAAA,IACF,aAAA,GAAA,CAAA,GAAAZ,oBAAAT,GAAA,EAAC,KAAA;oCAAEG,WAAU;oCAAiCQ,UAAAL,KAAKe,OAAA;gCAAA;4BAAQ;4BAIlEf,KAAKgB,IAAA,IACF,aAAA,GAAA,CAAA,GAAAb,oBAAAT,GAAA,EAAC,KAAA;gCAAEG,WAAU;gCAAiCQ,UAAAL,KAAKgB,IAAA;4BAAA;yBAAK;oBAAA;iBAEhE;YAAA;YAEJ,aAAA,GAAA,CAAA,GAAAb,oBAAAT,GAAA,EAAChB,YAAAuC,OAAAA,EAAA;gBAAKC,MAAMlB,KAAKmB,IAAA;gBAAMtB,WAAU;gBAAmB3C,QAAO;gBACvDmD,UAAA,aAAA,GAAA,CAAA,GAAAF,oBAAAT,GAAA,EAAC,QAAA;oBAAKG,WAAU;oBAAUQ,UAAA;gBAAA;YAAY;SAC1C;IAAA;AAGZ;AFuCA,2BAA2B;AK3GP,IAAAjB,sBAAAT,QAAA;AATpB,IAAMyC,WAA8B;QAAGC,cAAAA;IACnC,IAAMC,WAAW,SAACC;QACd,OAAOA,OAAOC,GAAA,CAAI,SAACC;mBAASA,KAAKvD,KAAK;WAAEwD,IAAA;IAC5C;IAEA,OACI,aAAA,GAAA,CAAA,GAAAC,oBAAAjC,GAAA,EAAC,OAAA;QAAIG,WAAU;QACVQ,UAAAgB,MAAMG,GAAA,CAAI,SAACC,MAAMG;YACd,OACI,aAAA,GAAA,CAAA,GAAAD,oBAAAjC,GAAA,EAACK,UAAA;gBAEGC,MAAM;oBACFO,OAAOe,SAASG,KAAKF,MAAM;oBAC3Bf,aAAa;oBACbF,OAAO;oBACPQ,aAAa;oBACbC,SAAS;oBACTc,KAAK;oBACLb,MAAM;oBACNG,MAAM,QAAoB,OAAZM,KAAKK,OAAO;gBAC9B;YAAA,GAVKF;QAajB;IAAC;AAGb;AAEA,IAAOG,eAAQX;ALmHf,wCAAwC;ACrJxC,IAAMY,OAA8B;IAChCzB,OAAO;IACP0B,WAAWF;IACXG,YAAY;QACRC,QAAQ;IACZ;IACAC,MAAM;QAAC;KAAU;AACrB;AAEA,IAAO7D,4BAAQyD;AAGf,IAAMK,YAAY;IACd;QACIC,IAAI;QACJR,SAAS;QACTP,QAAQ;YACJ;gBAAErD,OAAO;gBAA8BqE,UAAU;YAAQ;YACzD;gBAAErE,OAAO;gBAAuBqE,UAAU;YAAQ;SACtD;QACAC,WAAW;YAAC;SAAO;QACnBC,MAAM;QACNC,YAAY,EAAC;QACbC,gBAAgB,EAAC;IACrB;IACA;QACIL,IAAI;QACJR,SAAS;QACTP,QAAQ;YACJ;gBAAErD,OAAO;gBAAgCqE,UAAU;YAAQ;SAC/D;QACAC,WAAW;YAAC;SAAO;QACnBC,MAAM;QACNC,YAAY,EAAC;QACbC,gBAAgB,EAAC;IACrB;IACA;QACIL,IAAI;QACJR,SAAS;QACTP,QAAQ;YACJ;gBAAErD,OAAO;gBAAqBqE,UAAU;YAAQ;YAChD;gBAAErE,OAAO;gBAAqBqE,UAAU;YAAQ;SACpD;QACAC,WAAW;YAAC;SAAO;QACnBC,MAAM;QACNC,YAAY,EAAC;QACbC,gBAAgB,EAAC;IACrB;CACJ;AAEO,IAAMtE,UAAiB;IAC1BuE,MAAM;QACFvB,OAAOgB;IACX;AACJ;ADmJA,6DAA6D;AAC7D,KAAM7D,CAAAA,OAAOC,OAAO,GAAG;IACrBJ,SAAAA;AACF,CAAA","sourcesContent":["\"use strict\";\nvar __create = Object.create;\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __getProtoOf = Object.getPrototypeOf;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n  for (var name in all)\n    __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n  if (from && typeof from === \"object\" || typeof from === \"function\") {\n    for (let key of __getOwnPropNames(from))\n      if (!__hasOwnProp.call(to, key) && key !== except)\n        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n  }\n  return to;\n};\nvar __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(\n  // If the importer is in node compatibility mode or this is not an ESM\n  // file that has been converted to a CommonJS file using a Babel-\n  // compatible transform (i.e. \"__esModule\" has not been set), then set\n  // \"default\" to the CommonJS \"module.exports\" for node compatibility.\n  isNodeMode || !mod || !mod.__esModule ? __defProp(target, \"default\", { value: mod, enumerable: true }) : target,\n  mod\n));\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\n\n// src/result-view/blog-view.stories.tsx\nvar blog_view_stories_exports = {};\n__export(blog_view_stories_exports, {\n  Default: () => Default,\n  default: () => blog_view_stories_default\n});\nmodule.exports = __toCommonJS(blog_view_stories_exports);\n\n// src/blog-card.tsx\nvar import_link = __toESM(require(\"next/link\"), 1);\n\n// ../utils/src/classMerge.ts\nvar import_clsx = require(\"clsx\");\nvar import_tailwind_merge = require(\"tailwind-merge\");\nfunction cn(...inputs) {\n  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));\n}\n\n// src/blur-image.tsx\nvar import_react = require(\"react\");\nvar import_image = __toESM(require(\"next/image\"), 1);\nvar import_jsx_runtime = require(\"react/jsx-runtime\");\nvar BlurImage = (props) => {\n  const [isLoading, setLoading] = (0, import_react.useState)(true);\n  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(\n    import_image.default,\n    {\n      ...props,\n      alt: props.alt,\n      className: cn(\n        props.className,\n        \"duration-500 ease-in-out\",\n        isLoading ? \"blur-sm\" : \"blur-0\"\n      ),\n      onLoad: () => setLoading(false)\n    }\n  );\n};\n\n// src/blog-card.tsx\nvar import_jsx_runtime2 = require(\"react/jsx-runtime\");\nvar BlogCard = ({\n  data,\n  priority,\n  horizontal = false\n}) => {\n  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(\n    \"article\",\n    {\n      className: cn(\n        \"group relative\",\n        horizontal ? \"grid grid-cols-1 gap-3 md:grid-cols-2 md:gap-6\" : \"flex flex-col space-y-2\"\n      ),\n      children: [\n        data.image && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(\"div\", { className: \"w-full overflow-hidden rounded-xl border\", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(\n          BlurImage,\n          {\n            alt: data.title,\n            blurDataURL: data.blurDataURL,\n            className: cn(\n              \"size-full object-cover object-center\",\n              horizontal ? \"lg:h-72\" : null\n            ),\n            width: 800,\n            height: 400,\n            priority,\n            placeholder: \"blur\",\n            src: data.image,\n            sizes: \"(max-width: 768px) 750px, 600px\"\n          }\n        ) }),\n        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(\n          \"div\",\n          {\n            className: cn(\n              \"flex flex-1 flex-col\",\n              horizontal ? \"justify-center\" : \"justify-between\"\n            ),\n            children: [\n              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(\"div\", { className: \"w-full\", children: [\n                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(\"h2\", { className: \"my-1.5 line-clamp-2 font-heading text-2xl\", children: data.title }),\n                data.description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(\"p\", { className: \"line-clamp-2 text-muted-foreground\", children: data.description })\n              ] }),\n              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(\"div\", { className: \"mt-4 flex items-center space-x-3\", children: [\n                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(\"div\", { className: \"flex items-center -space-x-2\", children: data.authors && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(\"p\", { className: \"text-sm text-muted-foreground\", children: data.authors }) }),\n                data.date && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(\"p\", { className: \"text-sm text-muted-foreground\", children: data.date })\n              ] })\n            ]\n          }\n        ),\n        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_link.default, { href: data.slug, className: \"absolute inset-0\", target: \"_blank\", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(\"span\", { className: \"sr-only\", children: \"View Article\" }) })\n      ]\n    }\n  );\n};\n\n// src/result-view/blog.tsx\nvar import_jsx_runtime3 = require(\"react/jsx-runtime\");\nvar BlogView = ({ items }) => {\n  const getTitle = (labels) => {\n    return labels.map((item) => item.value).join();\n  };\n  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(\"div\", { className: \"grid gap-8 md:grid-cols-2 md:gap-x-6 md:gap-y-10 xl:grid-cols-3\", children: items.map((item, index) => {\n    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(\n      BlogCard,\n      {\n        data: {\n          title: getTitle(item.labels),\n          blurDataURL: \"/img/blog-post-1.webp\",\n          image: \"/img/blog-post-1.webp\",\n          description: \"item.shortDescription\",\n          authors: \"item.authors\",\n          _id: \"item._id\",\n          date: \"item.date\",\n          slug: `info/${item.shortId}`\n        }\n      },\n      index\n    );\n  }) });\n};\nvar blog_default = BlogView;\n\n// src/result-view/blog-view.stories.tsx\nvar meta = {\n  title: \"Components/ResultView/Blog\",\n  component: blog_default,\n  parameters: {\n    layout: \"centered\"\n  },\n  tags: [\"autodocs\"]\n};\nvar blog_view_stories_default = meta;\nvar mockItems = [\n  {\n    id: \"1\",\n    shortId: \"doc-1\",\n    labels: [\n      { value: \"Getting Started with C-Rex\", language: \"en-US\" },\n      { value: \"Come\\xE7ando com C-Rex\", language: \"pt-BR\" }\n    ],\n    languages: [\"pt-BR\"],\n    type: \"document\",\n    renditions: [],\n    directoryNodes: []\n  },\n  {\n    id: \"2\",\n    shortId: \"doc-2\",\n    labels: [\n      { value: \"Advanced Configuration Guide\", language: \"en-US\" }\n    ],\n    languages: [\"en-US\"],\n    type: \"document\",\n    renditions: [],\n    directoryNodes: []\n  },\n  {\n    id: \"3\",\n    shortId: \"doc-3\",\n    labels: [\n      { value: \"API Documentation\", language: \"en-US\" },\n      { value: \"Documentation API\", language: \"fr-FR\" }\n    ],\n    languages: [\"fr-FR\"],\n    type: \"document\",\n    renditions: [],\n    directoryNodes: []\n  }\n];\nvar Default = {\n  args: {\n    items: mockItems\n  }\n};\n// Annotate the CommonJS export names for ESM import in node:\n0 && (module.exports = {\n  Default\n});\n","import type { Meta, StoryObj } from '@storybook/react';\nimport BlogView from '../result-view/blog';\n\nconst meta: Meta<typeof BlogView> = {\n    title: 'Components/ResultView/Blog',\n    component: BlogView,\n    parameters: {\n        layout: 'centered',\n    },\n    tags: ['autodocs'],\n};\n\nexport default meta;\ntype Story = StoryObj<typeof BlogView>;\n\nconst mockItems = [\n    {\n        id: '1',\n        shortId: 'doc-1',\n        labels: [\n            { value: 'Getting Started with C-Rex', language: 'en-US' },\n            { value: 'Começando com C-Rex', language: 'pt-BR' }\n        ],\n        languages: ['pt-BR'],\n        type: 'document',\n        renditions: [],\n        directoryNodes: []\n    },\n    {\n        id: '2',\n        shortId: 'doc-2',\n        labels: [\n            { value: 'Advanced Configuration Guide', language: 'en-US' }\n        ],\n        languages: ['en-US'],\n        type: 'document',\n        renditions: [],\n        directoryNodes: []\n    },\n    {\n        id: '3',\n        shortId: 'doc-3',\n        labels: [\n            { value: 'API Documentation', language: 'en-US' },\n            { value: 'Documentation API', language: 'fr-FR' }\n        ],\n        languages: ['fr-FR'],\n        type: 'document',\n        renditions: [],\n        directoryNodes: []\n    }\n];\n\nexport const Default: Story = {\n    args: {\n        items: mockItems as any\n    }\n};","import Link from \"next/link\";\nimport { cn } from \"@c-rex/utils\";\nimport { BlurImage } from \"./blur-image\";\n\n//import Author from \"./author\";\n\ninterface BlogCardProp {\n    data: {\n        title: string;\n        blurDataURL: string;\n        image: string;\n        description: string;\n        authors: string;\n        _id: string;\n        date: string;\n        slug: string;\n    };\n    priority?: boolean;\n    horizontal?: boolean;\n}\n\nexport const BlogCard = ({\n    data,\n    priority,\n    horizontal = false,\n}: BlogCardProp) => {\n    return (\n        <article\n            className={cn(\n                \"group relative\",\n                horizontal\n                    ? \"grid grid-cols-1 gap-3 md:grid-cols-2 md:gap-6\"\n                    : \"flex flex-col space-y-2\",\n            )}\n        >\n            {data.image && (\n                <div className=\"w-full overflow-hidden rounded-xl border\">\n                    <BlurImage\n                        alt={data.title}\n                        blurDataURL={data.blurDataURL}\n                        className={cn(\n                            \"size-full object-cover object-center\",\n                            horizontal ? \"lg:h-72\" : null,\n                        )}\n                        width={800}\n                        height={400}\n                        priority={priority}\n                        placeholder=\"blur\"\n                        src={data.image}\n                        sizes=\"(max-width: 768px) 750px, 600px\"\n                    />\n                </div>\n            )}\n            <div\n                className={cn(\n                    \"flex flex-1 flex-col\",\n                    horizontal ? \"justify-center\" : \"justify-between\",\n                )}\n            >\n                <div className=\"w-full\">\n                    <h2 className=\"my-1.5 line-clamp-2 font-heading text-2xl\">\n                        {data.title}\n                    </h2>\n                    {data.description && (\n                        <p className=\"line-clamp-2 text-muted-foreground\">\n                            {data.description}\n                        </p>\n                    )}\n                </div>\n                <div className=\"mt-4 flex items-center space-x-3\">\n                    <div className=\"flex items-center -space-x-2\">\n                        {data.authors && (\n                            <p className=\"text-sm text-muted-foreground\">{data.authors}</p>\n                        )}\n                    </div>\n\n                    {data.date && (\n                        <p className=\"text-sm text-muted-foreground\">{data.date}</p>\n                    )}\n                </div>\n            </div>\n            <Link href={data.slug} className=\"absolute inset-0\" target=\"_blank\">\n                <span className=\"sr-only\">View Article</span>\n            </Link>\n        </article>\n    );\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n    return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { useState } from \"react\";\nimport type { ComponentProps } from \"react\";\nimport Image from \"next/image\";\nimport { cn } from \"@c-rex/utils\";\n\nexport const BlurImage = (props: ComponentProps<typeof Image>) => {\n    const [isLoading, setLoading] = useState(true);\n\n    return (\n        <Image\n            {...props}\n            alt={props.alt}\n            className={cn(\n                props.className,\n                \"duration-500 ease-in-out\",\n                isLoading ? \"blur-sm\" : \"blur-0\",\n            )}\n            onLoad={() => setLoading(false)}\n        />\n    );\n}\n","import { FC } from \"react\";\n\nimport { BlogCard } from \"../blog-card\";\nimport { informationUnitsItems, Labels } from \"@c-rex/interfaces\";\n\ninterface BlogViewProps {\n    items: informationUnitsItems[];\n}\n\nconst BlogView: FC<BlogViewProps> = ({ items }) => {\n    const getTitle = (labels: Labels[]): string => {\n        return labels.map((item) => item.value).join();\n    };\n\n    return (\n        <div className=\"grid gap-8 md:grid-cols-2 md:gap-x-6 md:gap-y-10 xl:grid-cols-3\">\n            {items.map((item, index) => {\n                return (\n                    <BlogCard\n                        key={index}\n                        data={{\n                            title: getTitle(item.labels),\n                            blurDataURL: \"/img/blog-post-1.webp\",\n                            image: \"/img/blog-post-1.webp\",\n                            description: \"item.shortDescription\",\n                            authors: \"item.authors\",\n                            _id: \"item._id\",\n                            date: \"item.date\",\n                            slug: `info/${item.shortId}`,\n                        }}\n                    />\n                );\n            })}\n        </div>\n    );\n};\n\nexport default BlogView;\n"]}

package/dist/result-view/blog-view.stories.d.cts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import BlogView from './blog.cjs';
+import 'react';
+import '@c-rex/interfaces';
+
+declare const meta: Meta<typeof BlogView>;
+
+type Story = StoryObj<typeof BlogView>;
+declare const Default: Story;
+
+export { Default, meta as default };

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

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import BlogView from './blog.js';
+import 'react';
+import '@c-rex/interfaces';
+
+declare const meta: Meta<typeof BlogView>;
+
+type Story = StoryObj<typeof BlogView>;
+declare const Default: Story;
+
+export { Default, meta as default };

package/dist/result-view/blog-view.stories.esm.js

@@ -0,0 +1,295 @@
+// src/blog-card.tsx
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import Link from "next/link";
+// ../utils/src/classMerge.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn() {
+    for(var _len = arguments.length, inputs = new Array(_len), _key = 0; _key < _len; _key++){
+        inputs[_key] = arguments[_key];
+    }
+    return twMerge(clsx(inputs));
+}
+// src/blur-image.tsx
+import { useState } from "react";
+import Image from "next/image";
+import { jsx } from "react/jsx-runtime";
+var BlurImage = function(props) {
+    var _useState = _sliced_to_array(useState(true), 2), isLoading = _useState[0], setLoading = _useState[1];
+    return /* @__PURE__ */ jsx(Image, _object_spread_props(_object_spread({}, props), {
+        alt: props.alt,
+        className: cn(props.className, "duration-500 ease-in-out", isLoading ? "blur-sm" : "blur-0"),
+        onLoad: function() {
+            return setLoading(false);
+        }
+    }));
+};
+// src/blog-card.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var BlogCard = function(param) {
+    var data = param.data, priority = param.priority, _param_horizontal = param.horizontal, horizontal = _param_horizontal === void 0 ? false : _param_horizontal;
+    return /* @__PURE__ */ jsxs("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"),
+        children: [
+            data.image && /* @__PURE__ */ jsx2("div", {
+                className: "w-full overflow-hidden rounded-xl border",
+                children: /* @__PURE__ */ jsx2(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"
+                })
+            }),
+            /* @__PURE__ */ jsxs("div", {
+                className: cn("flex flex-1 flex-col", horizontal ? "justify-center" : "justify-between"),
+                children: [
+                    /* @__PURE__ */ jsxs("div", {
+                        className: "w-full",
+                        children: [
+                            /* @__PURE__ */ jsx2("h2", {
+                                className: "my-1.5 line-clamp-2 font-heading text-2xl",
+                                children: data.title
+                            }),
+                            data.description && /* @__PURE__ */ jsx2("p", {
+                                className: "line-clamp-2 text-muted-foreground",
+                                children: data.description
+                            })
+                        ]
+                    }),
+                    /* @__PURE__ */ jsxs("div", {
+                        className: "mt-4 flex items-center space-x-3",
+                        children: [
+                            /* @__PURE__ */ jsx2("div", {
+                                className: "flex items-center -space-x-2",
+                                children: data.authors && /* @__PURE__ */ jsx2("p", {
+                                    className: "text-sm text-muted-foreground",
+                                    children: data.authors
+                                })
+                            }),
+                            data.date && /* @__PURE__ */ jsx2("p", {
+                                className: "text-sm text-muted-foreground",
+                                children: data.date
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /* @__PURE__ */ jsx2(Link, {
+                href: data.slug,
+                className: "absolute inset-0",
+                target: "_blank",
+                children: /* @__PURE__ */ jsx2("span", {
+                    className: "sr-only",
+                    children: "View Article"
+                })
+            })
+        ]
+    });
+};
+// src/result-view/blog.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var BlogView = function(param) {
+    var items = param.items;
+    var getTitle = function(labels) {
+        return labels.map(function(item) {
+            return item.value;
+        }).join();
+    };
+    return /* @__PURE__ */ jsx3("div", {
+        className: "grid gap-8 md:grid-cols-2 md:gap-x-6 md:gap-y-10 xl:grid-cols-3",
+        children: items.map(function(item, index) {
+            return /* @__PURE__ */ jsx3(BlogCard, {
+                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/".concat(item.shortId)
+                }
+            }, index);
+        })
+    });
+};
+var blog_default = BlogView;
+// src/result-view/blog-view.stories.tsx
+var meta = {
+    title: "Components/ResultView/Blog",
+    component: blog_default,
+    parameters: {
+        layout: "centered"
+    },
+    tags: [
+        "autodocs"
+    ]
+};
+var blog_view_stories_default = meta;
+var mockItems = [
+    {
+        id: "1",
+        shortId: "doc-1",
+        labels: [
+            {
+                value: "Getting Started with C-Rex",
+                language: "en-US"
+            },
+            {
+                value: "Come\xE7ando 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: []
+    }
+];
+var Default = {
+    args: {
+        items: mockItems
+    }
+};
+export { Default, blog_view_stories_default as default };
+//# sourceMappingURL=blog-view.stories.esm.js.map

package/dist/result-view/blog-view.stories.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/periotto/Desktop/workspace/c-rex.net-web-client-foundation/packages/components/dist/result-view/blog-view.stories.esm.js","../../src/blog-card.tsx","../../../utils/src/classMerge.ts","../../src/blur-image.tsx","../../src/result-view/blog.tsx","../../src/result-view/blog-view.stories.tsx"],"names":["Link","clsx","twMerge","cn","inputs","useState","Image","jsx","BlurImage","props","isLoading","setLoading","alt","className","onLoad","jsxs","BlogCard","data","priority","horizontal","children","image","title","blurDataURL","width","height","placeholder","src","sizes","description","authors","date","href","slug","target","BlogView","items","getTitle","labels","map","item","value","join","index","_id","shortId","blog_default","meta","component","parameters","layout","tags","blog_view_stories_default","mockItems","id","language","languages","type","renditions","directoryNodes","Default","args","default"],"mappings":"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","sourcesContent":["// src/blog-card.tsx\nimport Link from \"next/link\";\n\n// ../utils/src/classMerge.ts\nimport { clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\nfunction cn(...inputs) {\n  return twMerge(clsx(inputs));\n}\n\n// src/blur-image.tsx\nimport { useState } from \"react\";\nimport Image from \"next/image\";\nimport { jsx } from \"react/jsx-runtime\";\nvar BlurImage = (props) => {\n  const [isLoading, setLoading] = useState(true);\n  return /* @__PURE__ */ jsx(\n    Image,\n    {\n      ...props,\n      alt: props.alt,\n      className: cn(\n        props.className,\n        \"duration-500 ease-in-out\",\n        isLoading ? \"blur-sm\" : \"blur-0\"\n      ),\n      onLoad: () => setLoading(false)\n    }\n  );\n};\n\n// src/blog-card.tsx\nimport { jsx as jsx2, jsxs } from \"react/jsx-runtime\";\nvar BlogCard = ({\n  data,\n  priority,\n  horizontal = false\n}) => {\n  return /* @__PURE__ */ jsxs(\n    \"article\",\n    {\n      className: cn(\n        \"group relative\",\n        horizontal ? \"grid grid-cols-1 gap-3 md:grid-cols-2 md:gap-6\" : \"flex flex-col space-y-2\"\n      ),\n      children: [\n        data.image && /* @__PURE__ */ jsx2(\"div\", { className: \"w-full overflow-hidden rounded-xl border\", children: /* @__PURE__ */ jsx2(\n          BlurImage,\n          {\n            alt: data.title,\n            blurDataURL: data.blurDataURL,\n            className: cn(\n              \"size-full object-cover object-center\",\n              horizontal ? \"lg:h-72\" : null\n            ),\n            width: 800,\n            height: 400,\n            priority,\n            placeholder: \"blur\",\n            src: data.image,\n            sizes: \"(max-width: 768px) 750px, 600px\"\n          }\n        ) }),\n        /* @__PURE__ */ jsxs(\n          \"div\",\n          {\n            className: cn(\n              \"flex flex-1 flex-col\",\n              horizontal ? \"justify-center\" : \"justify-between\"\n            ),\n            children: [\n              /* @__PURE__ */ jsxs(\"div\", { className: \"w-full\", children: [\n                /* @__PURE__ */ jsx2(\"h2\", { className: \"my-1.5 line-clamp-2 font-heading text-2xl\", children: data.title }),\n                data.description && /* @__PURE__ */ jsx2(\"p\", { className: \"line-clamp-2 text-muted-foreground\", children: data.description })\n              ] }),\n              /* @__PURE__ */ jsxs(\"div\", { className: \"mt-4 flex items-center space-x-3\", children: [\n                /* @__PURE__ */ jsx2(\"div\", { className: \"flex items-center -space-x-2\", children: data.authors && /* @__PURE__ */ jsx2(\"p\", { className: \"text-sm text-muted-foreground\", children: data.authors }) }),\n                data.date && /* @__PURE__ */ jsx2(\"p\", { className: \"text-sm text-muted-foreground\", children: data.date })\n              ] })\n            ]\n          }\n        ),\n        /* @__PURE__ */ jsx2(Link, { href: data.slug, className: \"absolute inset-0\", target: \"_blank\", children: /* @__PURE__ */ jsx2(\"span\", { className: \"sr-only\", children: \"View Article\" }) })\n      ]\n    }\n  );\n};\n\n// src/result-view/blog.tsx\nimport { jsx as jsx3 } from \"react/jsx-runtime\";\nvar BlogView = ({ items }) => {\n  const getTitle = (labels) => {\n    return labels.map((item) => item.value).join();\n  };\n  return /* @__PURE__ */ jsx3(\"div\", { className: \"grid gap-8 md:grid-cols-2 md:gap-x-6 md:gap-y-10 xl:grid-cols-3\", children: items.map((item, index) => {\n    return /* @__PURE__ */ jsx3(\n      BlogCard,\n      {\n        data: {\n          title: getTitle(item.labels),\n          blurDataURL: \"/img/blog-post-1.webp\",\n          image: \"/img/blog-post-1.webp\",\n          description: \"item.shortDescription\",\n          authors: \"item.authors\",\n          _id: \"item._id\",\n          date: \"item.date\",\n          slug: `info/${item.shortId}`\n        }\n      },\n      index\n    );\n  }) });\n};\nvar blog_default = BlogView;\n\n// src/result-view/blog-view.stories.tsx\nvar meta = {\n  title: \"Components/ResultView/Blog\",\n  component: blog_default,\n  parameters: {\n    layout: \"centered\"\n  },\n  tags: [\"autodocs\"]\n};\nvar blog_view_stories_default = meta;\nvar mockItems = [\n  {\n    id: \"1\",\n    shortId: \"doc-1\",\n    labels: [\n      { value: \"Getting Started with C-Rex\", language: \"en-US\" },\n      { value: \"Come\\xE7ando com C-Rex\", language: \"pt-BR\" }\n    ],\n    languages: [\"pt-BR\"],\n    type: \"document\",\n    renditions: [],\n    directoryNodes: []\n  },\n  {\n    id: \"2\",\n    shortId: \"doc-2\",\n    labels: [\n      { value: \"Advanced Configuration Guide\", language: \"en-US\" }\n    ],\n    languages: [\"en-US\"],\n    type: \"document\",\n    renditions: [],\n    directoryNodes: []\n  },\n  {\n    id: \"3\",\n    shortId: \"doc-3\",\n    labels: [\n      { value: \"API Documentation\", language: \"en-US\" },\n      { value: \"Documentation API\", language: \"fr-FR\" }\n    ],\n    languages: [\"fr-FR\"],\n    type: \"document\",\n    renditions: [],\n    directoryNodes: []\n  }\n];\nvar Default = {\n  args: {\n    items: mockItems\n  }\n};\nexport {\n  Default,\n  blog_view_stories_default as default\n};\n","import Link from \"next/link\";\nimport { cn } from \"@c-rex/utils\";\nimport { BlurImage } from \"./blur-image\";\n\n//import Author from \"./author\";\n\ninterface BlogCardProp {\n    data: {\n        title: string;\n        blurDataURL: string;\n        image: string;\n        description: string;\n        authors: string;\n        _id: string;\n        date: string;\n        slug: string;\n    };\n    priority?: boolean;\n    horizontal?: boolean;\n}\n\nexport const BlogCard = ({\n    data,\n    priority,\n    horizontal = false,\n}: BlogCardProp) => {\n    return (\n        <article\n            className={cn(\n                \"group relative\",\n                horizontal\n                    ? \"grid grid-cols-1 gap-3 md:grid-cols-2 md:gap-6\"\n                    : \"flex flex-col space-y-2\",\n            )}\n        >\n            {data.image && (\n                <div className=\"w-full overflow-hidden rounded-xl border\">\n                    <BlurImage\n                        alt={data.title}\n                        blurDataURL={data.blurDataURL}\n                        className={cn(\n                            \"size-full object-cover object-center\",\n                            horizontal ? \"lg:h-72\" : null,\n                        )}\n                        width={800}\n                        height={400}\n                        priority={priority}\n                        placeholder=\"blur\"\n                        src={data.image}\n                        sizes=\"(max-width: 768px) 750px, 600px\"\n                    />\n                </div>\n            )}\n            <div\n                className={cn(\n                    \"flex flex-1 flex-col\",\n                    horizontal ? \"justify-center\" : \"justify-between\",\n                )}\n            >\n                <div className=\"w-full\">\n                    <h2 className=\"my-1.5 line-clamp-2 font-heading text-2xl\">\n                        {data.title}\n                    </h2>\n                    {data.description && (\n                        <p className=\"line-clamp-2 text-muted-foreground\">\n                            {data.description}\n                        </p>\n                    )}\n                </div>\n                <div className=\"mt-4 flex items-center space-x-3\">\n                    <div className=\"flex items-center -space-x-2\">\n                        {data.authors && (\n                            <p className=\"text-sm text-muted-foreground\">{data.authors}</p>\n                        )}\n                    </div>\n\n                    {data.date && (\n                        <p className=\"text-sm text-muted-foreground\">{data.date}</p>\n                    )}\n                </div>\n            </div>\n            <Link href={data.slug} className=\"absolute inset-0\" target=\"_blank\">\n                <span className=\"sr-only\">View Article</span>\n            </Link>\n        </article>\n    );\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n    return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { useState } from \"react\";\nimport type { ComponentProps } from \"react\";\nimport Image from \"next/image\";\nimport { cn } from \"@c-rex/utils\";\n\nexport const BlurImage = (props: ComponentProps<typeof Image>) => {\n    const [isLoading, setLoading] = useState(true);\n\n    return (\n        <Image\n            {...props}\n            alt={props.alt}\n            className={cn(\n                props.className,\n                \"duration-500 ease-in-out\",\n                isLoading ? \"blur-sm\" : \"blur-0\",\n            )}\n            onLoad={() => setLoading(false)}\n        />\n    );\n}\n","import { FC } from \"react\";\n\nimport { BlogCard } from \"../blog-card\";\nimport { informationUnitsItems, Labels } from \"@c-rex/interfaces\";\n\ninterface BlogViewProps {\n    items: informationUnitsItems[];\n}\n\nconst BlogView: FC<BlogViewProps> = ({ items }) => {\n    const getTitle = (labels: Labels[]): string => {\n        return labels.map((item) => item.value).join();\n    };\n\n    return (\n        <div className=\"grid gap-8 md:grid-cols-2 md:gap-x-6 md:gap-y-10 xl:grid-cols-3\">\n            {items.map((item, index) => {\n                return (\n                    <BlogCard\n                        key={index}\n                        data={{\n                            title: getTitle(item.labels),\n                            blurDataURL: \"/img/blog-post-1.webp\",\n                            image: \"/img/blog-post-1.webp\",\n                            description: \"item.shortDescription\",\n                            authors: \"item.authors\",\n                            _id: \"item._id\",\n                            date: \"item.date\",\n                            slug: `info/${item.shortId}`,\n                        }}\n                    />\n                );\n            })}\n        </div>\n    );\n};\n\nexport default BlogView;\n","import type { Meta, StoryObj } from '@storybook/react';\nimport BlogView from '../result-view/blog';\n\nconst meta: Meta<typeof BlogView> = {\n    title: 'Components/ResultView/Blog',\n    component: BlogView,\n    parameters: {\n        layout: 'centered',\n    },\n    tags: ['autodocs'],\n};\n\nexport default meta;\ntype Story = StoryObj<typeof BlogView>;\n\nconst mockItems = [\n    {\n        id: '1',\n        shortId: 'doc-1',\n        labels: [\n            { value: 'Getting Started with C-Rex', language: 'en-US' },\n            { value: 'Começando com C-Rex', language: 'pt-BR' }\n        ],\n        languages: ['pt-BR'],\n        type: 'document',\n        renditions: [],\n        directoryNodes: []\n    },\n    {\n        id: '2',\n        shortId: 'doc-2',\n        labels: [\n            { value: 'Advanced Configuration Guide', language: 'en-US' }\n        ],\n        languages: ['en-US'],\n        type: 'document',\n        renditions: [],\n        directoryNodes: []\n    },\n    {\n        id: '3',\n        shortId: 'doc-3',\n        labels: [\n            { value: 'API Documentation', language: 'en-US' },\n            { value: 'Documentation API', language: 'fr-FR' }\n        ],\n        languages: ['fr-FR'],\n        type: 'document',\n        renditions: [],\n        directoryNodes: []\n    }\n];\n\nexport const Default: Story = {\n    args: {\n        items: mockItems as any\n    }\n};"]}