@q2devel/q2-storybook 1.0.166 → 1.0.167
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.
|
@@ -23,6 +23,8 @@ export type ScheduleDetailProps = {
|
|
|
23
23
|
onButtonClick?: () => void;
|
|
24
24
|
/** Primary action button classes */
|
|
25
25
|
buttonClassName?: string;
|
|
26
|
+
/** Primary action handler */
|
|
27
|
+
onClick?: () => void;
|
|
26
28
|
};
|
|
27
|
-
export declare const ScheduleDetail: ({ title, description, weekdayDate, time, location, imageUrl, imageAlt, className, tags, buttonText, onButtonClick, buttonClassName, }: ScheduleDetailProps) => import("react/jsx-runtime").JSX.Element;
|
|
29
|
+
export declare const ScheduleDetail: ({ title, description, weekdayDate, time, location, imageUrl, imageAlt, className, tags, buttonText, onButtonClick, buttonClassName, onClick, }: ScheduleDetailProps) => import("react/jsx-runtime").JSX.Element;
|
|
28
30
|
export default ScheduleDetail;
|
|
@@ -2,10 +2,11 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { Button } from '../../../index';
|
|
4
4
|
import { buildClassesByJoining } from '../../../utils/StyleHelper';
|
|
5
|
-
|
|
5
|
+
import parse from 'html-react-parser';
|
|
6
|
+
export const ScheduleDetail = ({ title, description, weekdayDate, time, location, imageUrl, imageAlt = 'Schedule image', className, tags, buttonText, onButtonClick, buttonClassName, onClick, }) => {
|
|
6
7
|
return (_jsxs("section", { className: buildClassesByJoining('w-full flex flex-col md:flex-row md:flex-wrap xl:flex-nowrap md:items-center md:justify-between',
|
|
7
8
|
// spacing tuned to Figma feel
|
|
8
|
-
'px-5.5 py-2.5 xl:px-6.25 md:py-10 gap-2.5 xl:gap-16.25 lg:border-b lg:border-primary-black', className), children: [_jsxs("div", { className: "flex flex-col md:flex-row gap-2.5 md:gap-8 xl:gap-16.25 md:items-center", children: [_jsxs("div", { className: "flex flex-col gap-1.25 md:gap-6 md:min-w-[140px] xl:min-w-56", children: [weekdayDate && (_jsx("div", { className: "text-primary-black text-lg md:text-2xl font-semibold leading-6.75", children: weekdayDate })), time && (_jsx("div", { className: "text-primary-black text-lg md:text-2xl font-semibold leading-6.75", children: time })), location && (_jsx("div", { className: "text-primary-black text-lg md:text-2xl font-semibold leading-6.75", children: location }))] }), imageUrl && (_jsx("div", { className: "w-full md:w-auto flex justify-center md:justify-end xl:justify-center", children: _jsx("img", { src: imageUrl, alt: imageAlt, className: "h-44 w-full max-w-[560px] object-cover md:h-39.5 md:w-65.25 rounded" }) })), _jsxs("div", { className: "flex-1 w-full lg:w-66 xl:w-75 md:max-w-[520px]", children: [_jsx("h2", { className: "text-primary-black text-lg md:text-2xl font-semibold leading-6.75", children: title }), tags && tags.length > 0 && (_jsx("div", { className: "mt-1.25 md:mt-6 flex flex-wrap gap-8 text-primary-grey", children: tags.map((t) => (_jsx("span", { className: "border-b-1 border-primary-grey/40 leading-6.5 h-6.5 font-semibold text-sm md:text-base", children: t }, t))) })), description && (_jsx("
|
|
9
|
+
'px-5.5 py-2.5 xl:px-6.25 md:py-10 gap-2.5 xl:gap-16.25 lg:border-b lg:border-primary-black', className), children: [_jsxs("div", { className: "flex flex-col md:flex-row gap-2.5 md:gap-8 xl:gap-16.25 md:items-center cursor-pointer group", onClick: onClick, children: [_jsxs("div", { className: "flex flex-col gap-1.25 md:gap-6 md:min-w-[140px] xl:min-w-56", children: [weekdayDate && (_jsx("div", { className: "text-primary-black text-lg md:text-2xl font-semibold leading-6.75 group-hover:text-primary-pink transition-colors duration-300", children: weekdayDate })), time && (_jsx("div", { className: "text-primary-black text-lg md:text-2xl font-semibold leading-6.75 group-hover:text-primary-pink transition-colors duration-300", children: time })), location && (_jsx("div", { className: "text-primary-black text-lg md:text-2xl font-semibold leading-6.75 group-hover:text-primary-pink transition-colors duration-300", children: location }))] }), imageUrl && (_jsx("div", { className: "w-full md:w-auto flex justify-center md:justify-end xl:justify-center", children: _jsx("img", { src: imageUrl, alt: imageAlt, className: "h-44 w-full max-w-[560px] object-cover md:h-39.5 md:w-65.25 rounded" }) })), _jsxs("div", { className: "flex-1 w-full lg:w-66 xl:w-75 md:max-w-[520px]", children: [_jsx("h2", { className: "text-primary-black text-lg md:text-2xl font-semibold leading-6.75 group-hover:text-primary-pink transition-colors duration-300", children: title }), tags && tags.length > 0 && (_jsx("div", { className: "mt-1.25 md:mt-6 flex flex-wrap gap-8 text-primary-grey", children: tags.map((t) => (_jsx("span", { className: "border-b-1 border-primary-grey/40 leading-6.5 h-6.5 font-semibold text-sm md:text-base group-hover:text-primary-pink transition-colors duration-300", children: t }, t))) })), description && (_jsx("div", { className: "mt-1.25 md:mt-6 text-primary-grey text-sm md:text-base leading-6.5 md:leading-8 max-w-[50ch] overflow-hidden line-clamp-1 group-hover:text-primary-pink transition-colors duration-300", children: parse(description) }))] })] }), buttonText && (_jsx("div", { className: "order-last md:order-none shrink-0 w-full lg:w-auto", children: _jsx(Button, { onClick: () => onButtonClick?.(), rounded: "none", className: buttonClassName, children: buttonText }) }))] }));
|
|
9
10
|
};
|
|
10
11
|
export default ScheduleDetail;
|
|
11
12
|
// Local SVG icons for metadata display
|