@q2devel/q2-storybook 1.0.188 → 1.0.192

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.
@@ -79,6 +79,8 @@ export type ProductProps = {
79
79
  wishlistButton?: string;
80
80
  wishlistButtonIcon?: string;
81
81
  wishlistButtonText?: string;
82
+ questionButton?: string;
83
+ questionButtonText?: string;
82
84
  };
83
85
  specification?: {
84
86
  heading?: string;
@@ -91,6 +93,15 @@ export type ProductProps = {
91
93
  description?: string;
92
94
  image?: string;
93
95
  };
96
+ imageGallery?: {
97
+ container?: string;
98
+ image?: string;
99
+ list?: string;
100
+ imageThumbnail?: string;
101
+ imageActiveBorder?: string;
102
+ imageActivePanel?: string;
103
+ imageActive?: string;
104
+ };
94
105
  };
95
106
  detailClassName?: string;
96
107
  buttonClassName?: string;
@@ -63,6 +63,8 @@ classNames = {
63
63
  wishlistButton: '',
64
64
  wishlistButtonIcon: '',
65
65
  wishlistButtonText: '',
66
+ questionButton: '',
67
+ questionButtonText: '',
66
68
  },
67
69
  specification: {
68
70
  heading: '',
@@ -75,6 +77,15 @@ classNames = {
75
77
  description: '',
76
78
  image: '',
77
79
  },
80
+ imageGallery: {
81
+ container: '',
82
+ list: '',
83
+ image: '',
84
+ imageThumbnail: '',
85
+ imageActiveBorder: '',
86
+ imageActivePanel: '',
87
+ imageActive: '',
88
+ },
78
89
  }, buttonClassName = '', descriptionClassName = '',
79
90
  // Cart props
80
91
  product, currentQuantity = 0, onQuantityChange, maxQuantity = 99, disabled = false, badges = [], showVariations = false, variations = [], currentVariationId, cartMode = 'full', onOpenBasket, addToCartButtonCustomAction, selectedVariationGradient = false,
@@ -171,7 +182,7 @@ mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions,
171
182
  if (!product) {
172
183
  return null;
173
184
  }
174
- return (_jsx("div", { className: buildClassesByJoining('bg-white', className), children: _jsxs("div", { className: "py-4", children: [_jsxs("div", { className: "lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8 ", children: [_jsx(ProductDetailGallery, { product: product, showWishlistButton: showWishlistButton, enableMultipleWishlists: enableMultipleWishlists, isInWishlist: isInWishlist, wishlists: wishlists, productWishlistIds: productWishlistIds, isWishlistPending: isWishlistPending, onWishlistToggle: onWishlistToggle || (() => { }), onAddToWishlist: onAddToWishlist || (() => { }), onRemoveFromWishlist: onRemoveFromWishlist || (() => { }), onCreateWishlist: onCreateWishlist || (() => { }) }), _jsxs("div", { className: "mt-10 sm:mt-16 lg:mt-0", children: [badges && badges.length > 0 && (_jsx("div", { className: buildClassesByJoining('flex flex-wrap gap-2', classNames?.badges?.container), children: badges.map((badge, index) => (_jsx("span", { className: buildClassesByJoining(badge.color
185
+ return (_jsx("div", { className: buildClassesByJoining('bg-white', className), children: _jsxs("div", { className: "py-4", children: [_jsxs("div", { className: "lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8 ", children: [_jsx(ProductDetailGallery, { product: product, showWishlistButton: showWishlistButton, enableMultipleWishlists: enableMultipleWishlists, isInWishlist: isInWishlist, wishlists: wishlists, productWishlistIds: productWishlistIds, isWishlistPending: isWishlistPending, onWishlistToggle: onWishlistToggle || (() => { }), onAddToWishlist: onAddToWishlist || (() => { }), onRemoveFromWishlist: onRemoveFromWishlist || (() => { }), onCreateWishlist: onCreateWishlist || (() => { }), classNames: classNames?.imageGallery }), _jsxs("div", { className: "mt-10 sm:mt-16 lg:mt-0", children: [badges && badges.length > 0 && (_jsx("div", { className: buildClassesByJoining('flex flex-wrap gap-2', classNames?.badges?.container), children: badges.map((badge, index) => (_jsx("span", { className: buildClassesByJoining(badge.color
175
186
  ? `${badge.color} inline-flex items-center px-2 py-1 text-xs font-medium text-w`
176
187
  : 'bg-gray-200 text-gray-800 px-2 py-1 text-xs font-medium', classNames?.badges?.badge), children: badge.text }, index))) })), _jsx(Heading, { className: buildClassesByJoining('mt-8 font-extralight', classNames?.title), level: 1, children: name }), _jsxs("div", { className: buildClassesByJoining('flex gap-4', classNames?.identifier?.container), children: [product.sku && (_jsxs("span", { className: buildClassesByJoining('text-sm text-gray-500', classNames?.identifier?.sku), children: [translations.sku, ": ", product.sku] })), product.ean && (_jsxs("span", { className: buildClassesByJoining('text-sm text-gray-500', classNames?.identifier?.ean), children: [translations.EAN, ": ", product.ean] }))] }), _jsxs("div", { className: "mt-6", children: [_jsx(Heading, { level: 3, className: "sr-only", children: "Description" }), _jsx("div", { dangerouslySetInnerHTML: {
177
188
  __html: description,
@@ -250,7 +261,9 @@ mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions,
250
261
  ?.shippingDetailFee), children: translations.shippingDetailFee })) }), _jsx("div", { className: "mt-8", children: _jsxs("div", { className: "border-t py-5 border-gray-200 flex flex-col sm:flex-row flex-wrap gap-6 text-gray-600", children: [isWatchdogEnabled && (_jsxs(Button, { unstyled: true, className: buildClassesByJoining('flex gap-2', classNames?.button
251
262
  ?.watchdogButton), onClick: onWatchdogClick, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: buildClassesByJoining('size-5 text-[var(--primary)]', classNames?.button
252
263
  ?.watchdogButtonIcon), children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0M3.124 7.5A8.969 8.969 0 0 1 5.292 3m13.416 0a8.969 8.969 0 0 1 2.168 4.5" }) }), _jsx("span", { className: buildClassesByJoining('underline hover:no-underline', classNames?.button
253
- ?.watchdogButtonText), children: translations.watchDog })] })), _jsxs(Button, { unstyled: true, className: "flex gap-2", onClick: onDemandClick, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "size-5 text-[var(--primary)]", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" }) }), _jsx("span", { className: "underline hover:no-underline", children: translations.question })] }), _jsxs(Button, { unstyled: true, className: buildClassesByJoining('flex gap-2', classNames?.button
264
+ ?.watchdogButtonText), children: translations.watchDog })] })), _jsxs(Button, { unstyled: true, className: buildClassesByJoining('flex gap-2', classNames?.button
265
+ ?.questionButton), onClick: onDemandClick, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "size-5 text-[var(--primary)]", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" }) }), _jsx("span", { className: buildClassesByJoining('underline hover:no-underline', classNames?.button
266
+ ?.questionButtonText), children: translations.question })] }), _jsxs(Button, { unstyled: true, className: buildClassesByJoining('flex gap-2', classNames?.button
254
267
  ?.shippingOptionsButton), onClick: onShippingOptionsClick, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: buildClassesByJoining('size-5 text-[var(--primary)]', classNames?.button
255
268
  ?.shippingOptionsButtonIcon), children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" }) }), _jsx("span", { className: buildClassesByJoining('underline hover:no-underline cursor-pointer', classNames?.button
256
269
  ?.shippingOptionsButtonText), children: translations.optionOfShipping })] }), isLogged && (_jsxs("div", { className: "relative", children: [_jsxs("button", { ref: wishlistButtonRef, className: buildClassesByJoining('flex gap-2 text-left hover:text-green-600 transition-colors', classNames?.button
@@ -11,6 +11,15 @@ type ProductDetailGalleryProps = {
11
11
  onAddToWishlist: (product: Product, wishlistId: string) => void;
12
12
  onRemoveFromWishlist: (product: Product, wishlistId: string) => void;
13
13
  onCreateWishlist: (name: string, product: Product) => void;
14
+ classNames?: {
15
+ container?: string;
16
+ list?: string;
17
+ image?: string;
18
+ imageThumbnail?: string;
19
+ imageActiveBorder?: string;
20
+ imageActivePanel?: string;
21
+ imageActive?: string;
22
+ };
14
23
  };
15
- declare const ProductDetailGallery: ({ product, showWishlistButton, enableMultipleWishlists, isInWishlist, wishlists, productWishlistIds, isWishlistPending, onWishlistToggle, onAddToWishlist, onRemoveFromWishlist, onCreateWishlist, }: ProductDetailGalleryProps) => import("react/jsx-runtime").JSX.Element;
24
+ declare const ProductDetailGallery: ({ product, classNames, showWishlistButton, enableMultipleWishlists, isInWishlist, wishlists, productWishlistIds, isWishlistPending, onWishlistToggle, onAddToWishlist, onRemoveFromWishlist, onCreateWishlist, }: ProductDetailGalleryProps) => import("react/jsx-runtime").JSX.Element;
16
25
  export default ProductDetailGallery;
@@ -3,7 +3,8 @@ import { useState } from 'react';
3
3
  import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react';
4
4
  import { ImageGalleryModal } from '../../Base/image-gallery-modal/ImageGalleryModal';
5
5
  import LikeButton from '../wishlist/LikeButton';
6
- const ProductDetailGallery = ({ product, showWishlistButton, enableMultipleWishlists, isInWishlist, wishlists, productWishlistIds, isWishlistPending, onWishlistToggle, onAddToWishlist, onRemoveFromWishlist, onCreateWishlist, }) => {
6
+ import { buildClassesByJoining } from '../../../utils/StyleHelper';
7
+ const ProductDetailGallery = ({ product, classNames, showWishlistButton, enableMultipleWishlists, isInWishlist, wishlists, productWishlistIds, isWishlistPending, onWishlistToggle, onAddToWishlist, onRemoveFromWishlist, onCreateWishlist, }) => {
7
8
  // State pre modálnu galériu
8
9
  const [isGalleryOpen, setIsGalleryOpen] = useState(false);
9
10
  const [galleryInitialIndex, setGalleryInitialIndex] = useState(0);
@@ -31,6 +32,6 @@ const ProductDetailGallery = ({ product, showWishlistButton, enableMultipleWishl
31
32
  onCreateWishlist(name, product);
32
33
  }
33
34
  };
34
- return (_jsxs(_Fragment, { children: [_jsxs(TabGroup, { className: "flex flex-col-reverse items-center", children: [_jsx("div", { className: "mx-auto mt-6 hidden w-full max-w-2xl sm:block lg:max-w-none", children: _jsx(TabList, { className: "grid grid-cols-4 gap-6", children: product.all_images.map((image, i) => (_jsxs(Tab, { className: "group relative flex h-24 cursor-pointer items-center justify-center bg-white text-sm font-medium text-gray-900 uppercase hover:bg-gray-50 focus:ring-3 focus:ring-[var(--primary)]/50 focus:ring-offset-4 focus:outline-hidden", children: [_jsx("span", { className: "sr-only", children: image.alt }), _jsx("span", { className: "absolute inset-0 overflow-hidden", children: _jsx("img", { src: image.href, alt: "", className: "size-full object-contain" }) }), _jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 ring-2 ring-transparent ring-offset-2 group-data-selected:ring-[var(--primary)]" })] }, i))) }) }), _jsxs(TabPanels, { className: "relative w-full", children: [product.all_images.map((image, i) => (_jsx(TabPanel, { className: "relative", children: _jsx("img", { src: image.href, alt: image.alt, className: "aspect-[7/5] w-full object-contain border-1 border-gray-200 cursor-pointer hover:opacity-90 transition-opacity", onClick: () => openGallery(i) }) }, i))), showWishlistButton && (_jsx("div", { className: "absolute top-3 right-3 z-10", children: _jsx(LikeButton, { show: true, enableMultiple: enableMultipleWishlists, isInWishlist: isInWishlist, wishlists: wishlists, productWishlistIds: productWishlistIds, isWishlistPending: isWishlistPending, handleAddToWishlist: handleAddToWishlist, handleRemoveFromWishlist: handleRemoveFromWishlist, handleCreateNewWishlist: handleCreateNewWishlist, handleWishlistToggle: handleWishlistToggle, wishlistButtonClassName: "bg-white/90 backdrop-blur-sm border border-gray-200 shadow-lg hover:shadow-xl" }) }))] })] }), _jsx(ImageGalleryModal, { images: product.all_images, isOpen: isGalleryOpen, initialIndex: galleryInitialIndex, onClose: closeGallery })] }));
35
+ return (_jsxs(_Fragment, { children: [_jsxs(TabGroup, { className: buildClassesByJoining('flex flex-col-reverse items-center', classNames?.container), children: [_jsx("div", { className: "mx-auto mt-6 hidden w-full max-w-2xl sm:block lg:max-w-none", children: _jsx(TabList, { className: buildClassesByJoining('grid grid-cols-4 gap-6', classNames?.list), children: product.all_images.map((image, i) => (_jsxs(Tab, { className: buildClassesByJoining('group relative flex h-24 cursor-pointer items-center justify-center bg-white text-sm font-medium text-gray-900 uppercase hover:bg-gray-50 focus:ring-3 focus:ring-[var(--primary)]/50 focus:ring-offset-4 focus:outline-hidden', classNames?.image), children: [_jsx("span", { className: "sr-only", children: image.alt }), _jsx("span", { className: "absolute inset-0 overflow-hidden", children: _jsx("img", { src: image.href, alt: "", className: buildClassesByJoining('size-full object-contain', classNames?.imageThumbnail) }) }), _jsx("span", { "aria-hidden": "true", className: buildClassesByJoining('pointer-events-none absolute inset-0 ring-2 ring-transparent ring-offset-2 group-data-selected:ring-[var(--primary)]', classNames?.imageActiveBorder) })] }, i))) }) }), _jsxs(TabPanels, { className: "relative w-full", children: [product.all_images.map((image, i) => (_jsx(TabPanel, { className: buildClassesByJoining('relative', classNames?.imageActivePanel), children: _jsx("img", { src: image.href, alt: image.alt, onClick: () => openGallery(i), className: buildClassesByJoining('aspect-[7/5] w-full object-contain border-1 border-gray-200 cursor-pointer hover:opacity-90 transition-opacity', classNames?.imageActive) }) }, i))), showWishlistButton && (_jsx("div", { className: "absolute top-3 right-3 z-10", children: _jsx(LikeButton, { show: true, enableMultiple: enableMultipleWishlists, isInWishlist: isInWishlist, wishlists: wishlists, productWishlistIds: productWishlistIds, isWishlistPending: isWishlistPending, handleAddToWishlist: handleAddToWishlist, handleRemoveFromWishlist: handleRemoveFromWishlist, handleCreateNewWishlist: handleCreateNewWishlist, handleWishlistToggle: handleWishlistToggle, wishlistButtonClassName: "bg-white/90 backdrop-blur-sm border border-gray-200 shadow-lg hover:shadow-xl" }) }))] })] }), _jsx(ImageGalleryModal, { images: product.all_images, isOpen: isGalleryOpen, initialIndex: galleryInitialIndex, onClose: closeGallery })] }));
35
36
  };
36
37
  export default ProductDetailGallery;
@@ -11,19 +11,66 @@ import { useState } from 'react';
11
11
  */
12
12
  export default function MovieDetail({ title, originalTitle, year, duration, language, ageRating, posterUrl, trailerUrl, description, director, cast, csfdRating, linksToMovieDatabase, specialTag, showtimes, className = '', onTicketClick, onTrailerClick, }) {
13
13
  const [isExpanded, setIsExpanded] = useState(false);
14
+ const [showTrailerDesktop, setShowTrailerDesktop] = useState(false);
15
+ const [showTrailerMobile, setShowTrailerMobile] = useState(false);
14
16
  const castString = Array.isArray(cast) ? cast.join(', ') : cast;
15
17
  const handleTicket = (showtime) => {
16
18
  if (onTicketClick) {
17
19
  onTicketClick(showtime);
18
20
  }
19
21
  };
20
- const handleTrailer = () => {
22
+ const handleTrailerDesktop = () => {
21
23
  if (onTrailerClick) {
22
24
  onTrailerClick();
23
25
  }
24
26
  else if (trailerUrl) {
25
- window.open(trailerUrl, '_blank', 'noopener,noreferrer');
27
+ setShowTrailerDesktop(true);
26
28
  }
27
29
  };
28
- return (_jsxs("div", { className: `${className}`, children: [_jsxs("div", { className: "hidden lg:flex lg:gap-12.5 lg:justify-between", children: [_jsxs("div", { className: "flex flex-col gap-[41px] w-[614px] shrink-0", children: [_jsxs("div", { className: "relative h-[371px] w-full", children: [_jsx("div", { className: "relative h-full w-full overflow-hidden", children: _jsx("img", { src: posterUrl, alt: title, className: "w-full h-full object-cover" }) }), trailerUrl && (_jsx(Button, { onClick: handleTrailer, rounded: "none", className: "absolute left-[32px] bottom-[20px] bg-primary-cyan text-white px-6.5 py-1.25 uppercase text-[13px] cursor-pointer border-primary-cyan border-1 hover:bg-white hover:text-primary-cyan", children: "UK\u00C1ZKA" }))] }), _jsx("div", { className: "flex flex-col gap-[27px]", children: showtimes.map((showtime, index) => (_jsxs("div", { className: "bg-white border-b border-[#cbdce0] flex items-start justify-between py-[10px]", children: [_jsxs("div", { className: "flex gap-[22px] items-start", children: [_jsx("div", { className: "flex items-center p-[10px] w-[100px]", children: _jsx("p", { className: "font-semibold text-[24px] leading-[30px] text-primary-black flex-1", children: showtime.date }) }), _jsx("div", { className: "flex items-center justify-center p-[10px]", children: _jsx("p", { className: "font-semibold text-[24px] leading-[30px] text-primary-black whitespace-nowrap", children: showtime.time }) }), _jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "flex items-center justify-center p-[10px]", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: showtime.hall }) }), showtime.subtitles && (_jsx("div", { className: "flex items-center justify-center p-[10px]", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: showtime.subtitles }) })), showtime.format && (_jsx("div", { className: "flex items-center justify-center p-[10px]", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: showtime.format }) }))] })] }), _jsx("div", { className: "flex items-center", children: _jsx(Button, { onClick: () => handleTicket(showtime), rounded: "none", className: "bg-primary-pink text-white px-11 py-2.5 uppercase text-lg cursor-pointer border-primary-pink border-1 hover:bg-white hover:text-primary-pink", children: "VSTUPENKY" }) })] }, index))) })] }), _jsxs("div", { className: "flex flex-col gap-[10px] w-[778px]", children: [_jsxs("h1", { className: "font-bold text-[36px] leading-[54px] text-primary-pink", children: [title, " (", year, ")"] }), _jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black", children: [originalTitle, " (", year, ")"] }), specialTag && (_jsx("div", { className: "border border-primary-grey inline-flex items-center justify-center p-[10px] self-start", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-grey whitespace-nowrap", children: specialTag }) })), _jsxs("div", { className: "flex gap-[10px] items-start", children: [_jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black", children: [_jsx("span", { className: "font-bold", children: "D\u00E9lka: " }), duration, " minut"] }), _jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: [_jsx("span", { className: "font-bold", children: "Zn\u011Bn\u00ED: " }), language] }), _jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: [_jsx("span", { className: "font-bold", children: "P\u0159\u00EDstupnost: " }), ageRating] })] }), _jsx("div", { className: "text-[16px] leading-[28px] text-primary-black whitespace-pre-line event-content", children: parse(description) }), _jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black", children: [_jsx("span", { className: "font-bold", children: "Re\u017Eie: " }), parse(director)] }), _jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black", children: [_jsx("span", { className: "font-bold", children: "\u00DA\u010Dinkuj\u00EDc\u00ED: " }), parse(castString)] }), csfdRating && (_jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black", children: [_jsx("span", { className: "font-bold", children: "\u010CSFD: " }), parse(csfdRating)] })), linksToMovieDatabase.length > 0 && (_jsx("div", { className: "flex gap-[10px] items-start mt-2", children: linksToMovieDatabase.map((link) => (_jsx(Button, { onClick: () => window.open(link.field_link_to_movie_database, '_blank', 'noopener,noreferrer'), rounded: "none", className: "bg-primary-grey text-white px-11 py-2.5 uppercase text-lg cursor-pointer border-primary-grey border-1 hover:bg-white hover:text-primary-grey", children: link.title }, link.field_link_to_movie_database))) }))] })] }), _jsxs("div", { className: "lg:hidden flex flex-col gap-[10px] w-full", children: [_jsxs("h1", { className: "font-bold text-[26px] leading-[40px] text-primary-pink", children: [parse(title), " (", year, ")"] }), _jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black", children: [parse(originalTitle), " (", year, ")"] }), specialTag && (_jsx("div", { className: "border border-primary-grey inline-flex items-center justify-center px-[10px] py-[5px] self-start", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-grey whitespace-nowrap", children: parse(specialTag) }) })), _jsxs("div", { className: "flex flex-wrap gap-[10px] items-start w-full", children: [_jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: [_jsx("span", { className: "font-bold", children: "D\u00E9lka: " }), duration, " minut"] }), _jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: [_jsx("span", { className: "font-bold", children: "Zn\u011Bn\u00ED: " }), language] }), _jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: [_jsx("span", { className: "font-bold", children: "P\u0159\u00EDstupnost: " }), ageRating] })] }), _jsxs("div", { className: "relative h-[187px] w-full", children: [_jsx("div", { className: "relative h-full w-full overflow-hidden", children: _jsx("img", { src: posterUrl, alt: title, className: "w-full h-full object-cover" }) }), trailerUrl && (_jsx(Button, { onClick: handleTrailer, rounded: "none", className: "absolute left-[10px] bottom-[15px] bg-primary-cyan text-white px-6.5 py-1.25 uppercase text-[13px] cursor-pointer border-primary-cyan border-1 hover:bg-white hover:text-primary-cyan", children: "UK\u00C1ZKA" }))] }), showtimes.length > 0 && (_jsxs("div", { className: "flex flex-col gap-[10px] w-full", children: [_jsxs("div", { className: "flex items-start justify-between w-full", children: [_jsx("div", { className: "flex items-center pl-0 pr-[10px] py-[5px] w-[100px]", children: _jsx("p", { className: "font-bold text-[20px] leading-[30px] text-primary-black flex-1", children: showtimes[0].date }) }), _jsx("div", { className: "flex items-center justify-center px-[10px] py-[5px]", children: _jsx("p", { className: "font-bold text-[20px] leading-[30px] text-primary-black whitespace-nowrap", children: showtimes[0].time }) }), _jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "flex items-center justify-center pl-[10px] pr-0 py-[5px]", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: showtimes[0].hall }) }), showtimes[0].subtitles && (_jsx("div", { className: "flex items-center justify-center px-[10px] py-[5px]", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: showtimes[0].subtitles }) })), showtimes[0].format && (_jsx("div", { className: "flex items-center justify-center px-[10px] py-[5px]", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: showtimes[0].format }) }))] })] }), _jsx(Button, { onClick: () => handleTicket(showtimes[0]), rounded: "none", className: "bg-primary-pink text-white px-11 py-2.5 uppercase text-lg cursor-pointer border-primary-pink border-1 hover:bg-white hover:text-primary-pink w-full", children: "VSTUPENKY" })] })), _jsxs("div", { className: "flex flex-col gap-[10px] w-full", children: [_jsxs("div", { className: `relative ${!isExpanded ? 'h-71 overflow-hidden' : ''}`, children: [!isExpanded && (_jsx("div", { className: "absolute bottom-0 left-0 right-0 h-[84px] bg-gradient-to-b from-transparent to-white pointer-events-none blur-[2px]" })), _jsx("div", { className: "text-[16px] leading-[28px] text-primary-blac k mb-4", children: parse(description) }), _jsxs("div", { className: "text-[16px] leading-[28px] text-primary-black mb-2", children: [_jsx("span", { className: "font-bold", children: "Re\u017Eie: " }), parse(director)] }), _jsxs("div", { className: "text-[16px] leading-[28px] text-primary-black mb-2", children: [_jsx("span", { className: "font-bold", children: "\u00DA\u010Dinkuj\u00EDc\u00ED: " }), parse(castString)] }), csfdRating && (_jsxs("div", { className: "text-[16px] leading-[28px] text-primary-black mb-2", children: [_jsx("span", { className: "font-bold", children: "\u010CSFD: " }), parse(csfdRating)] }))] }), !isExpanded ? (_jsxs("button", { onClick: () => setIsExpanded(true), className: "flex items-center gap-[12px] font-semibold text-[16px] leading-[28px] text-primary-pink", children: [_jsx("span", { children: "+" }), _jsx("span", { children: "Zobrazit v\u00EDc" })] })) : (_jsx(_Fragment, { children: linksToMovieDatabase.length > 0 && (_jsx("div", { className: "flex flex-col gap-[10px] w-full", children: linksToMovieDatabase.map((link) => (_jsx(Button, { onClick: () => window.open(link.field_link_to_movie_database, '_blank', 'noopener,noreferrer'), rounded: "none", className: "bg-primary-grey text-white px-[26px] py-[5px] uppercase text-[13px] cursor-pointer border-primary-grey border-1 hover:bg-white hover:text-primary-grey w-full", children: "IMDB" }, link.field_link_to_movie_database))) })) }))] }), showtimes.slice(1).map((showtime, index) => (_jsxs("div", { className: "flex flex-col gap-[10px] w-full", children: [_jsxs("div", { className: "flex items-start justify-between w-full", children: [_jsx("div", { className: "flex items-center pl-0 pr-[10px] py-[5px]", children: _jsx("p", { className: "font-bold text-[20px] leading-[30px] text-primary-black whitespace-nowrap", children: showtime.date }) }), _jsx("div", { className: "flex items-center justify-center px-[10px] py-[5px]", children: _jsx("p", { className: "font-bold text-[20px] leading-[30px] text-primary-black whitespace-nowrap", children: showtime.time }) }), _jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "flex items-center justify-center pl-[10px] pr-0 py-[5px]", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: showtime.hall }) }), showtime.subtitles && (_jsx("div", { className: "flex items-center justify-center px-[10px] py-[5px]", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: showtime.subtitles }) })), showtime.format && (_jsx("div", { className: "flex items-center justify-center px-[10px] py-[5px]", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: showtime.format }) }))] })] }), _jsx(Button, { onClick: () => handleTicket(showtime), rounded: "none", className: "bg-primary-pink text-white px-11 py-2.5 uppercase text-lg cursor-pointer border-primary-pink border-1 hover:bg-white hover:text-primary-pink w-full", children: "VSTUPENKY" })] }, index + 1)))] })] }));
30
+ const handleTrailerMobile = () => {
31
+ if (onTrailerClick) {
32
+ onTrailerClick();
33
+ }
34
+ else if (trailerUrl) {
35
+ setShowTrailerMobile(true);
36
+ }
37
+ };
38
+ const getEmbedUrl = (url) => {
39
+ // Handle YouTube URLs
40
+ if (url.includes('youtube.com/watch')) {
41
+ const videoId = url.split('v=')[1]?.split('&')[0];
42
+ return videoId
43
+ ? `https://www.youtube.com/embed/${videoId}?autoplay=1`
44
+ : url;
45
+ }
46
+ if (url.includes('youtu.be/')) {
47
+ const videoId = url.split('youtu.be/')[1]?.split('?')[0];
48
+ return videoId
49
+ ? `https://www.youtube.com/embed/${videoId}?autoplay=1`
50
+ : url;
51
+ }
52
+ // Handle YouTube embed URLs (already in embed format)
53
+ if (url.includes('youtube.com/embed/')) {
54
+ const separator = url.includes('?') ? '&' : '?';
55
+ return `${url}${separator}autoplay=1`;
56
+ }
57
+ // Handle Vimeo URLs
58
+ if (url.includes('vimeo.com/')) {
59
+ const videoId = url.split('vimeo.com/')[1]?.split('?')[0];
60
+ return videoId
61
+ ? `https://player.vimeo.com/video/${videoId}?autoplay=1`
62
+ : url;
63
+ }
64
+ // Handle Vimeo embed URLs (already in embed format)
65
+ if (url.includes('player.vimeo.com/video/')) {
66
+ const separator = url.includes('?') ? '&' : '?';
67
+ return `${url}${separator}autoplay=1`;
68
+ }
69
+ // If already an embed URL or other format, try to add autoplay
70
+ const separator = url.includes('?') ? '&' : '?';
71
+ return `${url}${separator}autoplay=1`;
72
+ };
73
+ return (_jsxs("div", { className: `${className}`, children: [_jsxs("div", { className: "hidden lg:flex lg:gap-12.5 lg:justify-between", children: [_jsxs("div", { className: "flex flex-col gap-[41px] w-[614px] shrink-0", children: [_jsxs("div", { className: "relative h-[371px] w-full", children: [_jsx("div", { className: "relative h-full w-full overflow-hidden", children: showTrailerDesktop && trailerUrl ? (_jsx("iframe", { src: getEmbedUrl(trailerUrl), className: "w-full h-full", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, title: `${title} trailer` })) : (_jsx("img", { src: posterUrl, alt: title, className: `w-full h-full object-cover ${trailerUrl ? 'cursor-pointer' : ''}`, onClick: trailerUrl
74
+ ? handleTrailerDesktop
75
+ : undefined })) }), trailerUrl && !showTrailerDesktop && (_jsx(Button, { onClick: handleTrailerDesktop, rounded: "none", className: "absolute left-[32px] bottom-[20px] bg-primary-cyan text-white px-6.5 py-1.25 uppercase text-[13px] cursor-pointer border-primary-cyan border-1 hover:bg-white hover:text-primary-cyan", children: "UK\u00C1ZKA" }))] }), _jsx("div", { className: "flex flex-col gap-[27px]", children: showtimes.map((showtime, index) => (_jsxs("div", { className: "bg-white border-b border-[#cbdce0] flex items-start justify-between py-[10px]", children: [_jsxs("div", { className: "flex gap-[22px] items-start", children: [_jsx("div", { className: "flex items-center p-[10px] w-[100px]", children: _jsx("p", { className: "font-semibold text-[24px] leading-[30px] text-primary-black flex-1", children: showtime.date }) }), _jsx("div", { className: "flex items-center justify-center p-[10px]", children: _jsx("p", { className: "font-semibold text-[24px] leading-[30px] text-primary-black whitespace-nowrap", children: showtime.time }) }), _jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "flex items-center justify-center p-[10px]", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: showtime.hall }) }), showtime.subtitles && (_jsx("div", { className: "flex items-center justify-center p-[10px]", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: showtime.subtitles }) })), showtime.format && (_jsx("div", { className: "flex items-center justify-center p-[10px]", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: showtime.format }) }))] })] }), _jsx("div", { className: "flex items-center", children: _jsx(Button, { onClick: () => handleTicket(showtime), rounded: "none", className: "bg-primary-pink text-white px-11 py-2.5 uppercase text-lg cursor-pointer border-primary-pink border-1 hover:bg-white hover:text-primary-pink", children: "VSTUPENKY" }) })] }, index))) })] }), _jsxs("div", { className: "flex flex-col gap-[10px] w-[778px]", children: [_jsxs("h1", { className: "font-bold text-[36px] leading-[54px] text-primary-pink", children: [title, " (", year, ")"] }), _jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black", children: [originalTitle, " (", year, ")"] }), specialTag && (_jsx("div", { className: "border border-primary-grey inline-flex items-center justify-center p-[10px] self-start", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-grey whitespace-nowrap", children: specialTag }) })), _jsxs("div", { className: "flex gap-[10px] items-start", children: [_jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black", children: [_jsx("span", { className: "font-bold", children: "D\u00E9lka: " }), duration, " minut"] }), _jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: [_jsx("span", { className: "font-bold", children: "Zn\u011Bn\u00ED: " }), language] }), _jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: [_jsx("span", { className: "font-bold", children: "P\u0159\u00EDstupnost: " }), ageRating] })] }), _jsx("div", { className: "text-[16px] leading-[28px] text-primary-black whitespace-pre-line event-content", children: parse(description) }), _jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black", children: [_jsx("span", { className: "font-bold", children: "Re\u017Eie: " }), parse(director)] }), _jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black", children: [_jsx("span", { className: "font-bold", children: "\u00DA\u010Dinkuj\u00EDc\u00ED: " }), parse(castString)] }), csfdRating && (_jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black", children: [_jsx("span", { className: "font-bold", children: "\u010CSFD: " }), parse(csfdRating)] })), linksToMovieDatabase.length > 0 && (_jsx("div", { className: "flex gap-[10px] items-start mt-2", children: linksToMovieDatabase.map((link) => (_jsx(Button, { onClick: () => window.open(link.field_link_to_movie_database, '_blank', 'noopener,noreferrer'), rounded: "none", className: "bg-primary-grey text-white px-11 py-2.5 uppercase text-lg cursor-pointer border-primary-grey border-1 hover:bg-white hover:text-primary-grey", children: link.title }, link.field_link_to_movie_database))) }))] })] }), _jsxs("div", { className: "lg:hidden flex flex-col gap-[10px] w-full", children: [_jsxs("h1", { className: "font-bold text-[26px] leading-[40px] text-primary-pink", children: [parse(title), " (", year, ")"] }), _jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black", children: [parse(originalTitle), " (", year, ")"] }), specialTag && (_jsx("div", { className: "border border-primary-grey inline-flex items-center justify-center px-[10px] py-[5px] self-start", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-grey whitespace-nowrap", children: parse(specialTag) }) })), _jsxs("div", { className: "flex flex-wrap gap-[10px] items-start w-full", children: [_jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: [_jsx("span", { className: "font-bold", children: "D\u00E9lka: " }), duration, " minut"] }), _jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: [_jsx("span", { className: "font-bold", children: "Zn\u011Bn\u00ED: " }), language] }), _jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: [_jsx("span", { className: "font-bold", children: "P\u0159\u00EDstupnost: " }), ageRating] })] }), _jsxs("div", { className: "relative h-[187px] w-full", children: [_jsx("div", { className: "relative h-full w-full overflow-hidden", children: showTrailerMobile && trailerUrl ? (_jsx("iframe", { src: getEmbedUrl(trailerUrl), className: "w-full h-full", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, title: `${title} trailer` })) : (_jsx("img", { src: posterUrl, alt: title, className: `w-full h-full object-cover ${trailerUrl ? 'cursor-pointer' : ''}`, onClick: trailerUrl ? handleTrailerMobile : undefined })) }), trailerUrl && !showTrailerMobile && (_jsx(Button, { onClick: handleTrailerMobile, rounded: "none", className: "absolute left-[10px] bottom-[15px] bg-primary-cyan text-white px-6.5 py-1.25 uppercase text-[13px] cursor-pointer border-primary-cyan border-1 hover:bg-white hover:text-primary-cyan", children: "UK\u00C1ZKA" }))] }), showtimes.length > 0 && (_jsxs("div", { className: "flex flex-col gap-[10px] w-full", children: [_jsxs("div", { className: "flex items-start justify-between w-full", children: [_jsx("div", { className: "flex items-center pl-0 pr-[10px] py-[5px] w-[100px]", children: _jsx("p", { className: "font-bold text-[20px] leading-[30px] text-primary-black flex-1", children: showtimes[0].date }) }), _jsx("div", { className: "flex items-center justify-center px-[10px] py-[5px]", children: _jsx("p", { className: "font-bold text-[20px] leading-[30px] text-primary-black whitespace-nowrap", children: showtimes[0].time }) }), _jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "flex items-center justify-center pl-[10px] pr-0 py-[5px]", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: showtimes[0].hall }) }), showtimes[0].subtitles && (_jsx("div", { className: "flex items-center justify-center px-[10px] py-[5px]", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: showtimes[0].subtitles }) })), showtimes[0].format && (_jsx("div", { className: "flex items-center justify-center px-[10px] py-[5px]", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: showtimes[0].format }) }))] })] }), _jsx(Button, { onClick: () => handleTicket(showtimes[0]), rounded: "none", className: "bg-primary-pink text-white px-11 py-2.5 uppercase text-lg cursor-pointer border-primary-pink border-1 hover:bg-white hover:text-primary-pink w-full", children: "VSTUPENKY" })] })), _jsxs("div", { className: "flex flex-col gap-[10px] w-full", children: [_jsxs("div", { className: `relative ${!isExpanded ? 'h-71 overflow-hidden' : ''}`, children: [!isExpanded && (_jsx("div", { className: "absolute bottom-0 left-0 right-0 h-[84px] bg-gradient-to-b from-transparent to-white pointer-events-none blur-[2px]" })), _jsx("div", { className: "text-[16px] leading-[28px] text-primary-blac k mb-4", children: parse(description) }), _jsxs("div", { className: "text-[16px] leading-[28px] text-primary-black mb-2", children: [_jsx("span", { className: "font-bold", children: "Re\u017Eie: " }), parse(director)] }), _jsxs("div", { className: "text-[16px] leading-[28px] text-primary-black mb-2", children: [_jsx("span", { className: "font-bold", children: "\u00DA\u010Dinkuj\u00EDc\u00ED: " }), parse(castString)] }), csfdRating && (_jsxs("div", { className: "text-[16px] leading-[28px] text-primary-black mb-2", children: [_jsx("span", { className: "font-bold", children: "\u010CSFD: " }), parse(csfdRating)] }))] }), !isExpanded ? (_jsxs("button", { onClick: () => setIsExpanded(true), className: "flex items-center gap-[12px] font-semibold text-[16px] leading-[28px] text-primary-pink", children: [_jsx("span", { children: "+" }), _jsx("span", { children: "Zobrazit v\u00EDc" })] })) : (_jsx(_Fragment, { children: linksToMovieDatabase.length > 0 && (_jsx("div", { className: "flex flex-col gap-[10px] w-full", children: linksToMovieDatabase.map((link) => (_jsx(Button, { onClick: () => window.open(link.field_link_to_movie_database, '_blank', 'noopener,noreferrer'), rounded: "none", className: "bg-primary-grey text-white px-[26px] py-[5px] uppercase text-[13px] cursor-pointer border-primary-grey border-1 hover:bg-white hover:text-primary-grey w-full", children: "IMDB" }, link.field_link_to_movie_database))) })) }))] }), showtimes.slice(1).map((showtime, index) => (_jsxs("div", { className: "flex flex-col gap-[10px] w-full", children: [_jsxs("div", { className: "flex items-start justify-between w-full", children: [_jsx("div", { className: "flex items-center pl-0 pr-[10px] py-[5px]", children: _jsx("p", { className: "font-bold text-[20px] leading-[30px] text-primary-black whitespace-nowrap", children: showtime.date }) }), _jsx("div", { className: "flex items-center justify-center px-[10px] py-[5px]", children: _jsx("p", { className: "font-bold text-[20px] leading-[30px] text-primary-black whitespace-nowrap", children: showtime.time }) }), _jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "flex items-center justify-center pl-[10px] pr-0 py-[5px]", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: showtime.hall }) }), showtime.subtitles && (_jsx("div", { className: "flex items-center justify-center px-[10px] py-[5px]", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: showtime.subtitles }) })), showtime.format && (_jsx("div", { className: "flex items-center justify-center px-[10px] py-[5px]", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: showtime.format }) }))] })] }), _jsx(Button, { onClick: () => handleTicket(showtime), rounded: "none", className: "bg-primary-pink text-white px-11 py-2.5 uppercase text-lg cursor-pointer border-primary-pink border-1 hover:bg-white hover:text-primary-pink w-full", children: "VSTUPENKY" })] }, index + 1)))] })] }));
29
76
  }
@@ -0,0 +1,28 @@
1
+ export type ScheduleDetailProps = {
2
+ /** Main title */
3
+ title: string;
4
+ /** Short description under the title */
5
+ description?: string;
6
+ /** Formatted weekday+date, e.g. "pá 16/5" */
7
+ weekdayDate?: string;
8
+ /** Time string */
9
+ time?: string;
10
+ /** Location string */
11
+ location?: string;
12
+ /** Optional header image URL */
13
+ imageUrl?: string;
14
+ /** Alt text for the image */
15
+ imageAlt?: string;
16
+ /** Additional CSS classes */
17
+ className?: string;
18
+ /** Optional tags like "české titulky", "2D" */
19
+ tags?: string[];
20
+ /** Primary action button text (e.g., VSTUPENKY) */
21
+ buttonText?: string;
22
+ /** Primary action handler */
23
+ onButtonClick?: () => void;
24
+ /** Primary action button classes */
25
+ buttonClassName?: string;
26
+ };
27
+ export declare const ScheduleDetail: ({ title, description, weekdayDate, time, location, imageUrl, imageAlt, className, tags, buttonText, onButtonClick, buttonClassName, }: ScheduleDetailProps) => import("react/jsx-runtime").JSX.Element;
28
+ export default ScheduleDetail;
@@ -0,0 +1,18 @@
1
+ 'use client';
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import Button from '../../Base/button/Button';
4
+ import { buildClassesByJoining } from '../../../utils/StyleHelper';
5
+ export const ScheduleDetail = ({ title, description, weekdayDate, time, location, imageUrl, imageAlt = 'Schedule image', className, tags, buttonText, onButtonClick, buttonClassName, }) => {
6
+ 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
+ // spacing tuned to Figma feel
8
+ 'px-5.5 py-2.5 xl:px-6.25 md:py-10 gap-2.5 md:gap-8 xl:gap-16.25', className), children: [_jsxs("div", { className: "order-1 md:order-1 flex flex-col gap-6 md:min-w-[140px] xl:min-w-[240px]", children: [weekdayDate && (_jsx("div", { className: "text-primary-black text-lg md:text-2xl font-semibold leading-none", children: weekdayDate })), time && (_jsx("div", { className: "text-primary-black text-lg md:text-2xl font-semibold leading-none", children: time })), location && (_jsx("div", { className: "text-primary-black text-lg md:text-2xl font-semibold leading-none", children: location }))] }), imageUrl && (_jsx("div", { className: "order-2 md:order-2 w-full md:w-auto md:min-w-65 md:flex-1 flex justify-center", children: _jsx("img", { src: imageUrl, alt: imageAlt, className: "h-44 w-full max-w-[560px] object-cover md:h-48 md:w-[560px] rounded" }) })), _jsxs("div", { className: "order-3 md:order-3 w-full md:w-auto flex flex-col md:flex-row md:items-center md:justify-between gap-6 md:gap-8 md:min-w-[460px]", children: [_jsxs("div", { className: "flex-1 md:max-w-[520px]", children: [_jsx("h2", { className: "text-primary-black text-lg md:text-2xl font-semibold leading-tight", children: title }), tags && tags.length > 0 && (_jsx("div", { className: "mt-6 flex flex-wrap gap-8 text-primary-grey", children: tags.map((t) => (_jsx("span", { className: "pb-1 border-b-2 border-primary-grey/40 leading-none text-sm md:text-base", children: t }, t))) })), description && (_jsx("p", { className: "mt-6 text-primary-grey text-sm md:text-base leading-7 md:leading-8 max-w-[50ch]", children: description }))] }), buttonText && (_jsx("div", { className: "order-last md:order-none shrink-0 md:ml-8", children: _jsx(Button, { onClick: () => onButtonClick?.(), rounded: "none", className: buttonClassName, children: buttonText }) }))] })] }));
9
+ };
10
+ export default ScheduleDetail;
11
+ // Local SVG icons for metadata display
12
+ const CalendarIcon = () => (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M20.8333 3.125H18.75V1.04167C18.75 0.466667 18.2833 0 17.7083 0H16.6667C16.0917 0 15.625 0.466667 15.625 1.04167V3.125H9.375V1.04167C9.375 0.466667 8.90833 0 8.33333 0H7.29167C6.71667 0 6.25 0.466667 6.25 1.04167V3.125H4.16667C2.325 3.125 0.833333 4.61667 0.833333 6.45833V20.8333C0.833333 22.675 2.325 24.1667 4.16667 24.1667H20.8333C22.675 24.1667 24.1667 22.675 24.1667 20.8333V6.45833C24.1667 4.61667 22.675 3.125 20.8333 3.125ZM22.9167 20.8333C22.9167 21.6917 22.1917 22.4167 21.3333 22.4167H4.16667C3.30833 22.4167 2.58333 21.6917 2.58333 20.8333V10.4167H22.9167V20.8333ZM22.9167 8.33333H2.58333V6.45833C2.58333 5.6 3.30833 4.875 4.16667 4.875H6.25V6.45833C6.25 7.03333 6.71667 7.5 7.29167 7.5H8.33333C8.90833 7.5 9.375 7.03333 9.375 6.45833V4.875H15.625V6.45833C15.625 7.03333 16.0917 7.5 16.6667 7.5H17.7083C18.2833 7.5 18.75 7.03333 18.75 6.45833V4.875H20.8333C21.6917 4.875 22.4167 5.6 22.4167 6.45833V8.33333H22.9167Z", fill: "white" }) }));
13
+ const ClockIcon = () => (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12.5 0C5.6 0 0 5.6 0 12.5C0 19.4 5.6 25 12.5 25C19.4 25 25 19.4 25 12.5C25 5.6 19.4 0 12.5 0ZM12.5 22.9167C6.975 22.9167 2.08333 18.025 2.08333 12.5C2.08333 6.975 6.975 2.08333 12.5 2.08333C18.025 2.08333 22.9167 6.975 22.9167 12.5C22.9167 18.025 18.025 22.9167 12.5 22.9167ZM13.5417 6.25H11.4583V13.5417L17.7083 16.6667L18.75 14.7917L13.5417 12.5V6.25Z", fill: "white" }) }));
14
+ const LocationIcon = () => (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12.5 0C7.80833 0 4.16667 3.64167 4.16667 8.33333C4.16667 14.5833 12.5 25 12.5 25S20.8333 14.5833 20.8333 8.33333C20.8333 3.64167 17.1917 0 12.5 0ZM12.5 11.4583C11.1417 11.4583 10.0417 10.3583 10.0417 8.33333C10.0417 6.30833 11.1417 5.20833 12.5 5.20833C13.8583 5.20833 14.9583 6.30833 14.9583 8.33333C14.9583 10.3583 13.8583 11.4583 12.5 11.4583Z", fill: "white" }) }));
15
+ // Local button to mirror "VSTUPENKY" style
16
+ const ActionButton = ({ label, onClick }) => (_jsx("button", { type: "button", onClick: onClick, className: buildClassesByJoining(
17
+ // mobile: full-width, desktop: auto width; flat corners to match visual
18
+ 'w-full md:w-auto px-8 py-3 md:px-10 md:py-3.5', 'bg-[#E9A8A8] text-white font-semibold tracking-wide hover:opacity-90 transition', 'rounded-none md:rounded'), children: label }));
@@ -0,0 +1,30 @@
1
+ export interface EventCardProps {
2
+ /** Event image URL */
3
+ imageUrl?: string;
4
+ /** Event image alt text */
5
+ imageAlt?: string;
6
+ /** Event category/type (e.g., "Výstava", "Kino", "Divadlo") */
7
+ category: string;
8
+ /** Event title */
9
+ title: string;
10
+ /** Event description */
11
+ description: string;
12
+ /** Event date */
13
+ date: string;
14
+ /** Event time */
15
+ time: string;
16
+ /** Event location */
17
+ location: string;
18
+ /** Additional CSS classes */
19
+ className?: string;
20
+ /** Click handler for the card */
21
+ onClick?: () => void;
22
+ /** Button text */
23
+ buttonText?: string;
24
+ /** Button click handler */
25
+ onButtonClick?: () => void;
26
+ /** Button classes */
27
+ buttonClassName?: string;
28
+ }
29
+ export declare const EventCard: ({ imageUrl, imageAlt, category, title, description, date, time, location, className, onClick, buttonText, onButtonClick, buttonClassName, }: EventCardProps) => import("react/jsx-runtime").JSX.Element;
30
+ export default EventCard;
@@ -0,0 +1,18 @@
1
+ 'use client';
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import Image from 'next/image';
4
+ import buildClassesByJoining from '../../../utils/StyleHelper';
5
+ import Button from '../../Base/button/Button';
6
+ // Icons as SVG components for better performance and customization
7
+ const CalendarIcon = () => (_jsx("svg", { width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M20.8333 3.125H18.75V1.04167C18.75 0.466667 18.2833 0 17.7083 0H16.6667C16.0917 0 15.625 0.466667 15.625 1.04167V3.125H9.375V1.04167C9.375 0.466667 8.90833 0 8.33333 0H7.29167C6.71667 0 6.25 0.466667 6.25 1.04167V3.125H4.16667C2.325 3.125 0.833333 4.61667 0.833333 6.45833V20.8333C0.833333 22.675 2.325 24.1667 4.16667 24.1667H20.8333C22.675 24.1667 24.1667 22.675 24.1667 20.8333V6.45833C24.1667 4.61667 22.675 3.125 20.8333 3.125ZM22.9167 20.8333C22.9167 21.6917 22.1917 22.4167 21.3333 22.4167H4.16667C3.30833 22.4167 2.58333 21.6917 2.58333 20.8333V10.4167H22.9167V20.8333ZM22.9167 8.33333H2.58333V6.45833C2.58333 5.6 3.30833 4.875 4.16667 4.875H6.25V6.45833C6.25 7.03333 6.71667 7.5 7.29167 7.5H8.33333C8.90833 7.5 9.375 7.03333 9.375 6.45833V4.875H15.625V6.45833C15.625 7.03333 16.0917 7.5 16.6667 7.5H17.7083C18.2833 7.5 18.75 7.03333 18.75 6.45833V4.875H20.8333C21.6917 4.875 22.4167 5.6 22.4167 6.45833V8.33333H22.9167Z", fill: "white" }) }));
8
+ const ClockIcon = () => (_jsx("svg", { width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12.5 0C5.6 0 0 5.6 0 12.5C0 19.4 5.6 25 12.5 25C19.4 25 25 19.4 25 12.5C25 5.6 19.4 0 12.5 0ZM12.5 22.9167C6.975 22.9167 2.08333 18.025 2.08333 12.5C2.08333 6.975 6.975 2.08333 12.5 2.08333C18.025 2.08333 22.9167 6.975 22.9167 12.5C22.9167 18.025 18.025 22.9167 12.5 22.9167ZM13.5417 6.25H11.4583V13.5417L17.7083 16.6667L18.75 14.7917L13.5417 12.5V6.25Z", fill: "white" }) }));
9
+ const LocationIcon = () => (_jsx("svg", { width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12.5 0C7.80833 0 4.16667 3.64167 4.16667 8.33333C4.16667 14.5833 12.5 25 12.5 25S20.8333 14.5833 20.8333 8.33333C20.8333 3.64167 17.1917 0 12.5 0ZM12.5 11.4583C11.1417 11.4583 10.0417 10.3583 10.0417 8.33333C10.0417 6.30833 11.1417 5.20833 12.5 5.20833C13.8583 5.20833 14.9583 6.30833 14.9583 8.33333C14.9583 10.3583 13.8583 11.4583 12.5 11.4583Z", fill: "white" }) }));
10
+ const CategoryBadge = ({ category }) => (_jsxs("div", { className: "flex bg-white h-10.5 min-h-10.5 overflow-hidden w-77.5", children: [_jsx("div", { className: "w-63.5 bg-primary-grey px-5.75 py-1.75", children: _jsx("div", { className: "flex flex-col font-semibold justify-center leading-0 not-italic text-4.5 text-white", children: _jsx("p", { className: "leading-7", children: category }) }) }), _jsx("div", { className: "overflow-hidden w-14 bg-primary-grey", children: _jsx("div", { className: "bottom-0 left-0 right-[0.02%] top-0" }) })] }));
11
+ export const EventCard = ({ imageUrl = "http://localhost:3845/assets/f60ef9ffaad11fe658d28ae57cd6e9548d7462de.png", imageAlt = "Event image", category, title, description, date, time, location, className, onClick, buttonText, onButtonClick, buttonClassName, }) => {
12
+ const containerClasses = buildClassesByJoining([
13
+ "content-stretch flex flex-col items-start relative size-full cursor-pointer transition-all duration-300 hover:transform hover:scale-[1.03] hover:shadow-lg w-77.5",
14
+ className
15
+ ]);
16
+ return (_jsx("div", { className: containerClasses, onClick: onClick, "data-name": "Event Card", children: _jsxs("div", { className: "flex flex-col relative shrink-0 w-77.5", children: [_jsx(Image, { src: imageUrl, alt: imageAlt, className: "object-cover max-h-43 md:max-h-60.5", width: 310, height: 234 }), _jsx(CategoryBadge, { category: category }), _jsxs("div", { className: "bg-white box-border content-stretch flex flex-col gap-4.5 items-start px-5.5 py-4.5 w-77.5", children: [_jsx("div", { className: "flex flex-col font-semibold justify-center min-w-full max-w-full not-italic text-primary-black text-6", children: _jsx("p", { className: "truncate", children: title }) }), _jsx("div", { className: "flex flex-col font-normal justify-center leading-0 min-w-full max-w-full not-italic relative shrink-0 text-primary-grey text-4", children: _jsx("p", { className: "leading-7 truncate", children: description }) }), _jsxs("div", { className: "content-stretch flex flex-col gap-2.5 items-start relative shrink-0", children: [_jsxs("div", { className: "content-stretch flex gap-4 items-center relative shrink-0 w-full", children: [_jsx("div", { className: "bg-primary-grey box-border content-stretch flex gap-2.5 items-center p-1.25 relative rounded-[39px] shrink-0", children: _jsx("div", { className: "relative shrink-0 size-6.25 flex items-center justify-center", children: _jsx(CalendarIcon, {}) }) }), _jsx("div", { className: "flex flex-col font-semibold justify-center leading-0 not-italic relative shrink-0 text-primary-black text-1.75", children: _jsx("p", { className: "leading-6.5 whitespace-pre truncate", children: date }) })] }), _jsxs("div", { className: "content-stretch flex gap-4 items-center relative shrink-0 w-full", children: [_jsx("div", { className: "bg-primary-grey content-stretch flex gap-2.5 items-center justify-center relative rounded-[39px] shrink-0 size-8.75", children: _jsx("div", { className: "overflow-hidden relative shrink-0 size-6.25 flex items-center justify-center", children: _jsx(ClockIcon, {}) }) }), _jsx("div", { className: "flex flex-col font-semibold justify-center leading-0 not-italic relative shrink-0 text-primary-black text-1.75", children: _jsx("p", { className: "leading-6.5 whitespace-pre truncate", children: time }) })] }), _jsxs("div", { className: "content-stretch flex gap-4 items-center relative shrink-0 w-full", children: [_jsx("div", { className: "bg-primary-grey content-stretch flex gap-2.5 items-center justify-center relative rounded-[39px] shrink-0 size-8.75", children: _jsx("div", { className: "overflow-hidden relative shrink-0 size-6.25 flex items-center justify-center", children: _jsx(LocationIcon, {}) }) }), _jsx("div", { className: "flex flex-col font-semibold justify-center leading-0 not-italic relative shrink-0 text-primary-black text-1.75", children: _jsx("p", { className: "leading-6.5 whitespace-pre truncate", children: location }) })] })] })] }), buttonText && (_jsx(Button, { onClick: () => onButtonClick?.(), rounded: "none", className: buttonClassName, children: buttonText }))] }) }));
17
+ };
18
+ export default EventCard;
@@ -0,0 +1,30 @@
1
+ export interface EventCardHorizontalProps {
2
+ /** Event image URL */
3
+ imageUrl?: string;
4
+ /** Event image alt text */
5
+ imageAlt?: string;
6
+ /** Event category/type (e.g., "Výstava", "Kino", "Divadlo") */
7
+ category: string;
8
+ /** Event title */
9
+ title: string;
10
+ /** Event description */
11
+ description: string;
12
+ /** Event date */
13
+ date: string;
14
+ /** Event time */
15
+ time: string;
16
+ /** Event location */
17
+ location: string;
18
+ /** Additional CSS classes */
19
+ className?: string;
20
+ /** Click handler for the card */
21
+ onClick?: () => void;
22
+ /** Button text */
23
+ buttonText?: string;
24
+ /** Button click handler */
25
+ onButtonClick?: () => void;
26
+ /** Button classes */
27
+ buttonClassName?: string;
28
+ }
29
+ export declare const EventCardHorizontal: ({ imageUrl, imageAlt, category, title, description, date, time, location, className, onClick, buttonText, onButtonClick, buttonClassName, }: EventCardHorizontalProps) => import("react/jsx-runtime").JSX.Element;
30
+ export default EventCardHorizontal;
@@ -0,0 +1,24 @@
1
+ 'use client';
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import Image from 'next/image';
4
+ import buildClassesByJoining from '../../../utils/StyleHelper';
5
+ import Button from '../../Base/button/Button';
6
+ // Icons as SVG components for better performance and customization
7
+ const CalendarIcon = () => (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M20.8333 3.125H18.75V1.04167C18.75 0.466667 18.2833 0 17.7083 0H16.6667C16.0917 0 15.625 0.466667 15.625 1.04167V3.125H9.375V1.04167C9.375 0.466667 8.90833 0 8.33333 0H7.29167C6.71667 0 6.25 0.466667 6.25 1.04167V3.125H4.16667C2.325 3.125 0.833333 4.61667 0.833333 6.45833V20.8333C0.833333 22.675 2.325 24.1667 4.16667 24.1667H20.8333C22.675 24.1667 24.1667 22.675 24.1667 20.8333V6.45833C24.1667 4.61667 22.675 3.125 20.8333 3.125ZM22.9167 20.8333C22.9167 21.6917 22.1917 22.4167 21.3333 22.4167H4.16667C3.30833 22.4167 2.58333 21.6917 2.58333 20.8333V10.4167H22.9167V20.8333ZM22.9167 8.33333H2.58333V6.45833C2.58333 5.6 3.30833 4.875 4.16667 4.875H6.25V6.45833C6.25 7.03333 6.71667 7.5 7.29167 7.5H8.33333C8.90833 7.5 9.375 7.03333 9.375 6.45833V4.875H15.625V6.45833C15.625 7.03333 16.0917 7.5 16.6667 7.5H17.7083C18.2833 7.5 18.75 7.03333 18.75 6.45833V4.875H20.8333C21.6917 4.875 22.4167 5.6 22.4167 6.45833V8.33333H22.9167Z", fill: "white" }) }));
8
+ const ClockIcon = () => (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12.5 0C5.6 0 0 5.6 0 12.5C0 19.4 5.6 25 12.5 25C19.4 25 25 19.4 25 12.5C25 5.6 19.4 0 12.5 0ZM12.5 22.9167C6.975 22.9167 2.08333 18.025 2.08333 12.5C2.08333 6.975 6.975 2.08333 12.5 2.08333C18.025 2.08333 22.9167 6.975 22.9167 12.5C22.9167 18.025 18.025 22.9167 12.5 22.9167ZM13.5417 6.25H11.4583V13.5417L17.7083 16.6667L18.75 14.7917L13.5417 12.5V6.25Z", fill: "white" }) }));
9
+ const LocationIcon = () => (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12.5 0C7.80833 0 4.16667 3.64167 4.16667 8.33333C4.16667 14.5833 12.5 25 12.5 25S20.8333 14.5833 20.8333 8.33333C20.8333 3.64167 17.1917 0 12.5 0ZM12.5 11.4583C11.1417 11.4583 10.0417 10.3583 10.0417 8.33333C10.0417 6.30833 11.1417 5.20833 12.5 5.20833C13.8583 5.20833 14.9583 6.30833 14.9583 8.33333C14.9583 10.3583 13.8583 11.4583 12.5 11.4583Z", fill: "white" }) }));
10
+ const CategoryBadge = ({ category }) => (_jsx("div", { className: "inline-flex items-center bg-primary-grey px-3 py-1 rounded-full", children: _jsx("span", { className: "text-white text-sm font-semibold", children: category }) }));
11
+ export const EventCardHorizontal = ({ imageUrl = "http://localhost:3845/assets/f60ef9ffaad11fe658d28ae57cd6e9548d7462de.png", imageAlt = "Event image", category, title, description, date, time, location, className, onClick, buttonText, onButtonClick, buttonClassName, }) => {
12
+ const containerClasses = buildClassesByJoining([
13
+ "flex flex-col md:flex-row bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-300 cursor-pointer overflow-hidden",
14
+ className
15
+ ]);
16
+ return (_jsxs("div", { className: containerClasses, onClick: onClick, "data-name": "Event Card Horizontal", children: [_jsx("div", { className: "relative w-full md:w-48 h-48 md:h-auto flex-shrink-0", children: _jsx(Image, { src: imageUrl, alt: imageAlt, fill: true, className: "object-cover", sizes: "(max-width: 768px) 100vw, 192px" }) }), _jsxs("div", { className: "flex-1 p-4 flex flex-col justify-between", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(CategoryBadge, { category: category }), _jsx("h3", { className: "text-lg font-semibold text-primary-black leading-tight", children: title }), _jsx("p", { className: "text-sm text-primary-grey leading-relaxed line-clamp-2", children: description }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "bg-primary-grey rounded-full p-1.5 flex items-center justify-center", children: _jsx(CalendarIcon, {}) }), _jsx("span", { className: "text-sm font-semibold text-primary-black", children: date })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "bg-primary-grey rounded-full p-1.5 flex items-center justify-center", children: _jsx(ClockIcon, {}) }), _jsx("span", { className: "text-sm font-semibold text-primary-black", children: time })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "bg-primary-grey rounded-full p-1.5 flex items-center justify-center", children: _jsx(LocationIcon, {}) }), _jsx("span", { className: "text-sm font-semibold text-primary-black", children: location })] })] })] }), buttonText && (_jsx("div", { className: "mt-4", children: _jsx(Button, { onClick: (e) => {
17
+ e.stopPropagation();
18
+ onButtonClick?.();
19
+ }, rounded: "none", className: buildClassesByJoining([
20
+ "w-full md:w-auto bg-primary-pink text-white px-6 py-2 text-sm font-semibold hover:bg-primary-pink/90 transition-colors",
21
+ buttonClassName
22
+ ]), children: buttonText }) }))] })] }));
23
+ };
24
+ export default EventCardHorizontal;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@q2devel/q2-storybook",
3
- "version": "1.0.188",
3
+ "version": "1.0.192",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",