@appcorp/kismaa-web-ui 0.1.91 → 0.1.92
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -18,10 +18,10 @@ var BlogList = function (_a) {
|
|
|
18
18
|
react_1.default.createElement("div", { className: "flex flex-row items-start justify-start gap-8" },
|
|
19
19
|
react_1.default.createElement("div", { className: "flex flex-row items-center gap-2" },
|
|
20
20
|
react_1.default.createElement(calendar_icon_1.CalendarIcon, { className: "size-4" }),
|
|
21
|
-
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))),
|
|
21
|
+
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))),
|
|
22
22
|
react_1.default.createElement("div", { className: "flex flex-row items-center gap-2" },
|
|
23
23
|
react_1.default.createElement(outline_1.ClockIcon, { className: "size-5", stroke: "var(--color-gray-500)" }),
|
|
24
|
-
react_1.default.createElement("p", { className: "text-gray-500" }, d.readTime))),
|
|
24
|
+
react_1.default.createElement("p", { className: "text-sm text-gray-500" }, d.readTime))),
|
|
25
25
|
react_1.default.createElement("p", { className: "font-secondary text-xl font-bold" }, d.title),
|
|
26
26
|
react_1.default.createElement("p", { className: "text-md text-gray-500" }, (0, util_functions_1.truncateText)(d.excerpt, 100))))); })));
|
|
27
27
|
};
|
|
@@ -5,12 +5,25 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.BlogDetailSection = void 0;
|
|
7
7
|
var react_1 = __importDefault(require("react"));
|
|
8
|
+
var image_1 = __importDefault(require("next/image"));
|
|
8
9
|
var section_header_1 = require("../section-header");
|
|
10
|
+
var calendar_icon_1 = require("../../atoms/calendar-icon");
|
|
11
|
+
var util_functions_1 = require("@react-pakistan/util-functions");
|
|
12
|
+
var outline_1 = require("@heroicons/react/24/outline");
|
|
9
13
|
var BlogDetailSection = function (_a) {
|
|
10
|
-
var
|
|
14
|
+
var blogBanner = _a.blogBanner, blogContent = _a.blogContent, blogPublishedDate = _a.blogPublishedDate, blogTimeToRead = _a.blogTimeToRead, blogTitle = _a.blogTitle, breadcrumbs = _a.breadcrumbs, sectionHeading = _a.sectionHeading;
|
|
11
15
|
return (react_1.default.createElement("section", { className: "kismaa-section-spacing bg-white" },
|
|
12
16
|
react_1.default.createElement("div", { className: "kismaa-container" },
|
|
13
17
|
react_1.default.createElement(section_header_1.SectionHeader, { heading: sectionHeading, subheading: "", renderCtaButton: false, handleButtonClick: function () { return null; }, btnText: "", breadcrumbs: breadcrumbs }),
|
|
18
|
+
react_1.default.createElement("div", { className: "relative h-80 w-full" },
|
|
19
|
+
react_1.default.createElement(image_1.default, { alt: blogTitle, fill: true, height: 0, src: blogBanner, width: 0 })),
|
|
20
|
+
react_1.default.createElement("div", { className: "flex flex-row items-start justify-start gap-8 py-8" },
|
|
21
|
+
react_1.default.createElement("div", { className: "flex flex-row items-center gap-2" },
|
|
22
|
+
react_1.default.createElement(calendar_icon_1.CalendarIcon, { className: "size-4" }),
|
|
23
|
+
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))),
|
|
24
|
+
react_1.default.createElement("div", { className: "flex flex-row items-center gap-2" },
|
|
25
|
+
react_1.default.createElement(outline_1.ClockIcon, { className: "size-5", stroke: "var(--color-gray-500)" }),
|
|
26
|
+
react_1.default.createElement("p", { className: "text-sm text-gray-500" }, blogTimeToRead))),
|
|
14
27
|
react_1.default.createElement("div", { className: "grid grid-cols-12 gap-16 pt-8" },
|
|
15
28
|
react_1.default.createElement("div", { className: "col-span-12" }, blogContent)))));
|
|
16
29
|
};
|
|
@@ -7,4 +7,8 @@ exports.blogDetailSectionData = {
|
|
|
7
7
|
items: [{ label: 'Blog', route: '/blog', isActive: false }],
|
|
8
8
|
},
|
|
9
9
|
blogContent: '#Hello',
|
|
10
|
+
blogBanner: 'https://plus.unsplash.com/premium_photo-1701590725747-ac131d4dcffd?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8d2Vic2l0ZSUyMGJhbm5lcnxlbnwwfHwwfHx8MA%3D%3D',
|
|
11
|
+
blogTitle: 'Hello World',
|
|
12
|
+
blogPublishedDate: '12 August 2025',
|
|
13
|
+
blogTimeToRead: '3 mins',
|
|
10
14
|
};
|
|
@@ -1,6 +1,11 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
1
2
|
import { BreadcrumbsProps } from '../../molecules/breadcrumbs';
|
|
2
3
|
export interface BlogDetailSectionProps {
|
|
3
|
-
|
|
4
|
+
blogBanner: string;
|
|
5
|
+
blogContent: ReactNode;
|
|
6
|
+
blogTitle: string;
|
|
4
7
|
breadcrumbs: BreadcrumbsProps;
|
|
5
|
-
|
|
8
|
+
sectionHeading: string;
|
|
9
|
+
blogTimeToRead: string;
|
|
10
|
+
blogPublishedDate: string;
|
|
6
11
|
}
|