@q2devel/q2-storybook 1.0.164 → 1.0.166

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.
Files changed (11) hide show
  1. package/dist/components/Ecommerce/product-detail/ProductDetail.js +5 -5
  2. package/dist/components/MIKS/movie-detail/MovieDetail.d.ts +5 -4
  3. package/dist/components/MIKS/movie-detail/MovieDetail.js +3 -13
  4. package/dist/components/Web/ScheduleDetail/ScheduleDetail.d.ts +28 -0
  5. package/dist/components/Web/ScheduleDetail/ScheduleDetail.js +18 -0
  6. package/dist/components/Web/dynamic-grid/DynamicLayout.js +4 -4
  7. package/dist/components/Web/event-card/EventCard.d.ts +30 -0
  8. package/dist/components/Web/event-card/EventCard.js +18 -0
  9. package/dist/components/Web/event-card-horizontal/EventCardHorizontal.d.ts +30 -0
  10. package/dist/components/Web/event-card-horizontal/EventCardHorizontal.js +24 -0
  11. package/package.json +84 -84
package/dist/components/Ecommerce/product-detail/ProductDetail.js CHANGED
@@ -184,11 +184,11 @@ mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions,
184
184
  variation.id && (_jsx("div", { className: buildClassesByJoining('absolute inset-0 pointer-events-none', classNames
185
185
  ?.variations
186
186
  ?.variationActiveButton), style: {
187
- background: `
188
- radial-gradient(circle at top left, var(--primary) 0%, transparent 20%),
189
- radial-gradient(circle at top right, var(--primary) 0%, transparent 20%),
190
- radial-gradient(circle at bottom left, var(--primary) 0%, transparent 20%),
191
- radial-gradient(circle at bottom right, var(--primary) 0%, transparent 20%)
187
+ background: `
188
+ radial-gradient(circle at top left, var(--primary) 0%, transparent 20%),
189
+ radial-gradient(circle at top right, var(--primary) 0%, transparent 20%),
190
+ radial-gradient(circle at bottom left, var(--primary) 0%, transparent 20%),
191
+ radial-gradient(circle at bottom right, var(--primary) 0%, transparent 20%)
192
192
  `,
193
193
  opacity: 0.2,
194
194
  } })), _jsxs("div", { className: buildClassesByJoining('flex flex-col justify-between gap-1 relative z-10 flex-1 min-w-0 pr-2', classNames?.variations
package/dist/components/MIKS/movie-detail/MovieDetail.d.ts CHANGED
@@ -38,9 +38,10 @@ export interface MovieDetailProps {
38
38
  /** ČSFD rating (optional) */
39
39
  csfdRating?: string;
40
40
  /** ČSFD URL */
41
- csfdUrl?: string;
42
- /** IMDB URL */
43
- imdbUrl?: string;
41
+ linksToMovieDatabase: Array<{
42
+ field_link_to_movie_database: string;
43
+ title: string;
44
+ }>;
44
45
  /** Special event tag (e.g., "Duna maraton") */
45
46
  specialTag?: string;
46
47
  /** Array of showtimes */
@@ -58,4 +59,4 @@ export interface MovieDetailProps {
58
59
  * Displays detailed movie information with showtimes and ticket purchasing.
59
60
  * Fully responsive with different layouts for desktop and mobile.
60
61
  */
61
- export default function MovieDetail({ title, originalTitle, year, duration, language, ageRating, posterUrl, trailerUrl, description, director, cast, csfdRating, csfdUrl, imdbUrl, specialTag, showtimes, className, onTicketClick, onTrailerClick, }: MovieDetailProps): import("react/jsx-runtime").JSX.Element;
62
+ export default function MovieDetail({ title, originalTitle, year, duration, language, ageRating, posterUrl, trailerUrl, description, director, cast, csfdRating, linksToMovieDatabase, specialTag, showtimes, className, onTicketClick, onTrailerClick, }: MovieDetailProps): import("react/jsx-runtime").JSX.Element;
package/dist/components/MIKS/movie-detail/MovieDetail.js CHANGED
@@ -1,15 +1,15 @@
1
1
  'use client';
2
2
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
- import { useState } from 'react';
4
3
  import { Button } from '@q2devel/q2-storybook';
5
4
  import parse from 'html-react-parser';
5
+ import { useState } from 'react';
6
6
  /**
7
7
  * MovieDetail Component
8
8
  *
9
9
  * Displays detailed movie information with showtimes and ticket purchasing.
10
10
  * Fully responsive with different layouts for desktop and mobile.
11
11
  */
12
- export default function MovieDetail({ title, originalTitle, year, duration, language, ageRating, posterUrl, trailerUrl, description, director, cast, csfdRating, csfdUrl, imdbUrl, specialTag, showtimes, className = '', onTicketClick, onTrailerClick, }) {
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
14
  const castString = Array.isArray(cast) ? cast.join(', ') : cast;
15
15
  const handleTicket = (showtime) => {
@@ -25,15 +25,5 @@ export default function MovieDetail({ title, originalTitle, year, duration, lang
25
25
  window.open(trailerUrl, '_blank', 'noopener,noreferrer');
26
26
  }
27
27
  };
28
- const handleCSFD = () => {
29
- if (csfdUrl) {
30
- window.open(csfdUrl, '_blank', 'noopener,noreferrer');
31
- }
32
- };
33
- const handleIMDB = () => {
34
- if (imdbUrl) {
35
- window.open(imdbUrl, '_blank', 'noopener,noreferrer');
36
- }
37
- };
38
- 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)] })), _jsxs("div", { className: "flex gap-[10px] items-start mt-2", children: [csfdUrl && (_jsx(Button, { onClick: handleCSFD, 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: "\u010CSFD" })), imdbUrl && (_jsx(Button, { onClick: handleIMDB, 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: "IMDB" }))] })] })] }), _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: _jsxs("div", { className: "flex flex-col gap-[10px] w-full", children: [csfdUrl && (_jsx(Button, { onClick: handleCSFD, 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: "\u010CSFD" })), imdbUrl && (_jsx(Button, { onClick: handleIMDB, 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" }))] }) }))] }), 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)))] })] }));
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)))] })] }));
39
29
  }
package/dist/components/Web/ScheduleDetail/ScheduleDetail.d.ts ADDED
@@ -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;
package/dist/components/Web/ScheduleDetail/ScheduleDetail.js ADDED
@@ -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 }));
package/dist/components/Web/dynamic-grid/DynamicLayout.js CHANGED
@@ -142,10 +142,10 @@ export const DynamicLayout = ({ x, y, gap = 4, }) => {
142
142
  if (isDragging && !isExistingBlock) {
143
143
  setEnd(i);
144
144
  }
145
- }, onContextMenu: (e) => handleRightClick(e, i), className: `
146
- border border-dashed rounded cursor-pointer relative
147
- transition-colors duration-300
148
- ${color ?? 'bg-gray-800 border-gray-600'}
145
+ }, onContextMenu: (e) => handleRightClick(e, i), className: `
146
+ border border-dashed rounded cursor-pointer relative
147
+ transition-colors duration-300
148
+ ${color ?? 'bg-gray-800 border-gray-600'}
149
149
  `, children: block && i === block.start && (_jsx("div", { className: "absolute top-0 left-0 px-1 py-0.5", children: editingBlockId === block.id ? (_jsx("input", { autoFocus: true, className: "text-xs font-semibold bg-white text-gray-800 px-1 py-0.5 rounded outline-none w-24", value: block.title, onChange: (e) => handleRename(block.id, e.target.value), onBlur: () => setEditingBlockId(null), onKeyDown: (e) => {
150
150
  if (e.key === 'Enter')
151
151
  setEditingBlockId(null);
package/dist/components/Web/event-card/EventCard.d.ts ADDED
@@ -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;
package/dist/components/Web/event-card/EventCard.js ADDED
@@ -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;
package/dist/components/Web/event-card-horizontal/EventCardHorizontal.d.ts ADDED
@@ -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;
package/dist/components/Web/event-card-horizontal/EventCardHorizontal.js ADDED
@@ -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,84 +1,84 @@
1
- {
2
- "name": "@q2devel/q2-storybook",
3
- "version": "1.0.164",
4
- "main": "dist/index.js",
5
- "module": "dist/index.js",
6
- "types": "dist/index.d.ts",
7
- "exports": {
8
- ".": {
9
- "types": "./dist/index.d.ts",
10
- "default": "./dist/index.js"
11
- },
12
- "./styles": "./dist/style.css"
13
- },
14
- "files": [
15
- "dist"
16
- ],
17
- "scripts": {
18
- "test": "echo \"Error: no test specified\" && exit 1",
19
- "storybook": "storybook dev -p 6006",
20
- "build-storybook": "storybook build",
21
- "build": "tsc && npm run build:css",
22
- "build:css": "postcss src/global.css -o dist/style.css",
23
- "prepublishOnly": "npm version patch && npm run build",
24
- "publish:patch": "npm publish && npm run build",
25
- "publish:minor": "npm version minor && npm run build && npm publish",
26
- "publish:major": "npm version major && npm run build && npm publish",
27
- "chromatic": "chromatic --project-token=chpt_371d8e65041a19e "
28
- },
29
- "keywords": [],
30
- "author": "Q2",
31
- "license": "ISC",
32
- "description": "Komponenty nebo konfigurace pro storybook",
33
- "devDependencies": {
34
- "@storybook/addon-actions": "^8.6.14",
35
- "@storybook/addon-essentials": "^8.6.14",
36
- "@storybook/addon-interactions": "^8.6.14",
37
- "@storybook/addon-links": "^8.6.14",
38
- "@storybook/addon-onboarding": "^8.6.14",
39
- "@storybook/addon-viewport": "^8.6.14",
40
- "@storybook/blocks": "^8.6.14",
41
- "@storybook/nextjs": "^8.6.14",
42
- "@storybook/react": "^8.6.14",
43
- "@storybook/test": "^8.6.14",
44
- "@tailwindcss/postcss": "^4.1.8",
45
- "@types/body-parser": "^1.19.6",
46
- "@types/classnames": "^2.3.0",
47
- "@types/express": "^5.0.3",
48
- "@types/node": "^22.14.1",
49
- "@types/react": "^19.1.2",
50
- "@types/react-dom": "^19.1.2",
51
- "autoprefixer": "^10.4.21",
52
- "chromatic": "^12.0.0",
53
- "cssnano": "^7.0.7",
54
- "postcss": "^8.5.4",
55
- "postcss-cli": "^11.0.1",
56
- "react": "^19.0.0",
57
- "react-dom": "^19.0.0",
58
- "rollup-plugin-postcss": "^4.0.2",
59
- "storybook": "^8.6.14",
60
- "tailwindcss": "^4.1.8",
61
- "typescript": "^5.8.3"
62
- },
63
- "peerDependencies": {
64
- "react": "^19.0.0",
65
- "react-dom": "^19.0.0"
66
- },
67
- "dependencies": {
68
- "@headlessui/react": "^2.2.2",
69
- "@heroicons/react": "^2.2.0",
70
- "@q2devel/q2-core": "^1.0.51",
71
- "@tanstack/react-query": "^5.76.1",
72
- "axios": "^1.9.0",
73
- "body-parser": "^2.2.0",
74
- "classnames": "^2.5.1",
75
- "express": "^5.1.0",
76
- "html-react-parser": "^5.2.3",
77
- "react-select": "^5.10.1",
78
- "tailwind-merge": "^3.2.0",
79
- "zod": "^4.0.14"
80
- },
81
- "overrides": {
82
- "storybook": "$storybook"
83
- }
84
- }
1
+ {
2
+ "name": "@q2devel/q2-storybook",
3
+ "version": "1.0.166",
4
+ "main": "dist/index.js",
5
+ "module": "dist/index.js",
6
+ "types": "dist/index.d.ts",
7
+ "exports": {
8
+ ".": {
9
+ "types": "./dist/index.d.ts",
10
+ "default": "./dist/index.js"
11
+ },
12
+ "./styles": "./dist/style.css"
13
+ },
14
+ "files": [
15
+ "dist"
16
+ ],
17
+ "scripts": {
18
+ "test": "echo \"Error: no test specified\" && exit 1",
19
+ "storybook": "storybook dev -p 6006",
20
+ "build-storybook": "storybook build",
21
+ "build": "tsc && npm run build:css",
22
+ "build:css": "postcss src/global.css -o dist/style.css",
23
+ "prepublishOnly": "npm version patch && npm run build",
24
+ "publish:patch": "npm publish && npm run build",
25
+ "publish:minor": "npm version minor && npm run build && npm publish",
26
+ "publish:major": "npm version major && npm run build && npm publish",
27
+ "chromatic": "chromatic --project-token=chpt_371d8e65041a19e "
28
+ },
29
+ "keywords": [],
30
+ "author": "Q2",
31
+ "license": "ISC",
32
+ "description": "Komponenty nebo konfigurace pro storybook",
33
+ "devDependencies": {
34
+ "@storybook/addon-actions": "^8.6.14",
35
+ "@storybook/addon-essentials": "^8.6.14",
36
+ "@storybook/addon-interactions": "^8.6.14",
37
+ "@storybook/addon-links": "^8.6.14",
38
+ "@storybook/addon-onboarding": "^8.6.14",
39
+ "@storybook/addon-viewport": "^8.6.14",
40
+ "@storybook/blocks": "^8.6.14",
41
+ "@storybook/nextjs": "^8.6.14",
42
+ "@storybook/react": "^8.6.14",
43
+ "@storybook/test": "^8.6.14",
44
+ "@tailwindcss/postcss": "^4.1.8",
45
+ "@types/body-parser": "^1.19.6",
46
+ "@types/classnames": "^2.3.0",
47
+ "@types/express": "^5.0.3",
48
+ "@types/node": "^22.14.1",
49
+ "@types/react": "^19.1.2",
50
+ "@types/react-dom": "^19.1.2",
51
+ "autoprefixer": "^10.4.21",
52
+ "chromatic": "^12.0.0",
53
+ "cssnano": "^7.0.7",
54
+ "postcss": "^8.5.4",
55
+ "postcss-cli": "^11.0.1",
56
+ "react": "^19.0.0",
57
+ "react-dom": "^19.0.0",
58
+ "rollup-plugin-postcss": "^4.0.2",
59
+ "storybook": "^8.6.14",
60
+ "tailwindcss": "^4.1.8",
61
+ "typescript": "^5.8.3"
62
+ },
63
+ "peerDependencies": {
64
+ "react": "^19.0.0",
65
+ "react-dom": "^19.0.0"
66
+ },
67
+ "dependencies": {
68
+ "@headlessui/react": "^2.2.2",
69
+ "@heroicons/react": "^2.2.0",
70
+ "@q2devel/q2-core": "^1.0.51",
71
+ "@tanstack/react-query": "^5.76.1",
72
+ "axios": "^1.9.0",
73
+ "body-parser": "^2.2.0",
74
+ "classnames": "^2.5.1",
75
+ "express": "^5.1.0",
76
+ "html-react-parser": "^5.2.3",
77
+ "react-select": "^5.10.1",
78
+ "tailwind-merge": "^3.2.0",
79
+ "zod": "^4.0.14"
80
+ },
81
+ "overrides": {
82
+ "storybook": "$storybook"
83
+ }
84
+ }