@appcorp/kismaa-web-ui 0.1.90 → 0.1.92

package/molecules/blog-list/index.d.ts

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { BlogItemsProps } from '../../organisms';
 interface Props {
     items: BlogItemsProps[];
-    handleClick: () => void;
+    handleClick: (s: string) => void;
 }
 export declare const BlogList: FC<Props>;
 export {};

package/molecules/blog-list/index.js

@@ -11,17 +11,17 @@ var util_functions_1 = require("@react-pakistan/util-functions");
 var outline_1 = require("@heroicons/react/24/outline");
 var BlogList = function (_a) {
     var items = _a.items, handleClick = _a.handleClick;
-    return (react_1.default.createElement("div", { className: "flex flex-col gap-8" }, items.map(function (d) { return (react_1.default.createElement("div", { onClick: handleClick, key: d.id, className: "flex cursor-pointer flex-row gap-4 rounded-lg bg-gray-100 p-4 shadow-md" },
+    return (react_1.default.createElement("div", { className: "flex flex-col gap-8" }, items.map(function (d) { return (react_1.default.createElement("div", { onClick: function () { return handleClick(d.slug); }, key: d.id, className: "flex cursor-pointer flex-row gap-4 rounded-lg bg-gray-100 p-4 shadow-md" },
         react_1.default.createElement("div", { className: "relative h-50 w-80 rounded-lg shadow-xl" },
             react_1.default.createElement(image_1.default, { alt: d.title, className: "rounded-lg", fill: true, height: 0, objectFit: "cover", priority: true, sizes: "20vw", src: d.banner, width: 0 })),
         react_1.default.createElement("div", { className: "flex w-full flex-col justify-center gap-4" },
             react_1.default.createElement("div", { className: "flex flex-row items-start justify-start gap-8" },
                 react_1.default.createElement("div", { className: "flex flex-row items-center gap-2" },
                     react_1.default.createElement(calendar_icon_1.CalendarIcon, { className: "size-4" }),
-                    react_1.default.createElement("p", { className: "text-gray-500" }, (0, util_functions_1.formatDate)(d.date, util_functions_1.DATE_FORMATS.DAY_DD_MM_YY_COMPACT))),
+                    react_1.default.createElement("p", { className: "text-sm text-gray-500" }, (0, util_functions_1.formatDate)(d.date, util_functions_1.DATE_FORMATS.DAY_DD_MM_YY_COMPACT))),
                 react_1.default.createElement("div", { className: "flex flex-row items-center gap-2" },
                     react_1.default.createElement(outline_1.ClockIcon, { className: "size-5", stroke: "var(--color-gray-500)" }),
-                    react_1.default.createElement("p", { className: "text-gray-500" }, d.readTime))),
+                    react_1.default.createElement("p", { className: "text-sm text-gray-500" }, d.readTime))),
             react_1.default.createElement("p", { className: "font-secondary text-xl font-bold" }, d.title),
             react_1.default.createElement("p", { className: "text-md text-gray-500" }, (0, util_functions_1.truncateText)(d.excerpt, 100))))); })));
 };

package/organisms/blog-detail-section/blog-detail-section.js

@@ -5,12 +5,25 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BlogDetailSection = void 0;
 var react_1 = __importDefault(require("react"));
+var image_1 = __importDefault(require("next/image"));
 var section_header_1 = require("../section-header");
+var calendar_icon_1 = require("../../atoms/calendar-icon");
+var util_functions_1 = require("@react-pakistan/util-functions");
+var outline_1 = require("@heroicons/react/24/outline");
 var BlogDetailSection = function (_a) {
-    var breadcrumbs = _a.breadcrumbs, sectionHeading = _a.sectionHeading, blogContent = _a.blogContent;
+    var blogBanner = _a.blogBanner, blogContent = _a.blogContent, blogPublishedDate = _a.blogPublishedDate, blogTimeToRead = _a.blogTimeToRead, blogTitle = _a.blogTitle, breadcrumbs = _a.breadcrumbs, sectionHeading = _a.sectionHeading;
     return (react_1.default.createElement("section", { className: "kismaa-section-spacing bg-white" },
         react_1.default.createElement("div", { className: "kismaa-container" },
             react_1.default.createElement(section_header_1.SectionHeader, { heading: sectionHeading, subheading: "", renderCtaButton: false, handleButtonClick: function () { return null; }, btnText: "", breadcrumbs: breadcrumbs }),
+            react_1.default.createElement("div", { className: "relative h-80 w-full" },
+                react_1.default.createElement(image_1.default, { alt: blogTitle, fill: true, height: 0, src: blogBanner, width: 0 })),
+            react_1.default.createElement("div", { className: "flex flex-row items-start justify-start gap-8 py-8" },
+                react_1.default.createElement("div", { className: "flex flex-row items-center gap-2" },
+                    react_1.default.createElement(calendar_icon_1.CalendarIcon, { className: "size-4" }),
+                    react_1.default.createElement("p", { className: "text-sm text-gray-500" }, (0, util_functions_1.formatDate)(blogPublishedDate, util_functions_1.DATE_FORMATS.DAY_DD_MM_YY_COMPACT))),
+                react_1.default.createElement("div", { className: "flex flex-row items-center gap-2" },
+                    react_1.default.createElement(outline_1.ClockIcon, { className: "size-5", stroke: "var(--color-gray-500)" }),
+                    react_1.default.createElement("p", { className: "text-sm text-gray-500" }, blogTimeToRead))),
             react_1.default.createElement("div", { className: "grid grid-cols-12 gap-16 pt-8" },
                 react_1.default.createElement("div", { className: "col-span-12" }, blogContent)))));
 };

package/organisms/blog-detail-section/props.js

@@ -7,4 +7,8 @@ exports.blogDetailSectionData = {
         items: [{ label: 'Blog', route: '/blog', isActive: false }],
     },
     blogContent: '#Hello',
+    blogBanner: 'https://plus.unsplash.com/premium_photo-1701590725747-ac131d4dcffd?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8d2Vic2l0ZSUyMGJhbm5lcnxlbnwwfHwwfHx8MA%3D%3D',
+    blogTitle: 'Hello World',
+    blogPublishedDate: '12 August 2025',
+    blogTimeToRead: '3 mins',
 };

package/organisms/blog-detail-section/type.d.ts

@@ -1,6 +1,11 @@
+import { ReactNode } from 'react';
 import { BreadcrumbsProps } from '../../molecules/breadcrumbs';
 export interface BlogDetailSectionProps {
-    sectionHeading: string;
+    blogBanner: string;
+    blogContent: ReactNode;
+    blogTitle: string;
     breadcrumbs: BreadcrumbsProps;
-    blogContent: string;
+    sectionHeading: string;
+    blogTimeToRead: string;
+    blogPublishedDate: string;
 }

package/organisms/blog-section/props.js

@@ -15,6 +15,7 @@ exports.blogSectionData = {
             readTime: '3 mins',
             title: '3 Interviewing Tips That Can Help You Find Right Candidate',
             excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi amet, lorem tristique In laoreet morbi morbi lorem maecenas. Morbi amet, lorem tristique In laoreet morbi morbi lorem maecenas. Morbi amet, lorem tristique In laoreet morbi morbi lorem maecenas. Morbi amet, lorem tristique In laoreet morbi morbi lorem maecenas. Morbi amet, lorem tristique In laoreet morbi morbi lorem maecenas.',
+            slug: 'slug-1',
         },
         {
             id: 'item-2',
@@ -23,6 +24,7 @@ exports.blogSectionData = {
             readTime: '3 mins',
             title: '3 Interviewing Tips That Can Help You Find Right Candidate',
             excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi amet, lorem tristique In laoreet morbi morbi lorem maecenas. Morbi amet, lorem tristique In laoreet morbi morbi lorem maecenas. Morbi amet, lorem tristique In laoreet morbi morbi lorem maecenas. Morbi amet, lorem tristique In laoreet morbi morbi lorem maecenas. Morbi amet, lorem tristique In laoreet morbi morbi lorem maecenas.',
+            slug: 'slug-2',
         },
     ],
 };

package/organisms/blog-section/type.d.ts

@@ -5,11 +5,12 @@ export interface BlogItemsProps {
     excerpt: string;
     id: string;
     readTime: string;
+    slug: string;
     title: string;
 }
 export interface BlogSectionProps {
     breadcrumbs: BreadcrumbsProps;
-    handleBlogClick: () => void;
+    handleBlogClick: (s: string) => void;
     items: BlogItemsProps[];
     sectionHeading: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appcorp/kismaa-web-ui",
-  "version": "0.1.90",
+  "version": "0.1.92",
   "source": "src/index.ts",
   "main": "lib/main.js",
   "module": "lib/module.js",