@qite/tide-booking-component 1.4.123 → 1.4.124

package/src/content/components/gallery.tsx

@@ -1,153 +1,153 @@
-import React, { useEffect, useState } from 'react';
-import Icon from '../../shared/components/icon';
-
-export interface GalleryImage {
-  src: string;
-  alt?: string;
-  caption?: string;
-}
-
-export interface GalleryProps {
-  title?: string;
-  intro?: string;
-  images: GalleryImage[];
-}
-
-const PhotoGallery: React.FC<GalleryProps> = ({ images, title, intro }) => {
-  const [activeIndex, setActiveIndex] = useState<number | null>(null);
-
-  const isOpen = activeIndex !== null;
-  const activeImage = activeIndex !== null ? images[activeIndex] : null;
-
-  const close = () => setActiveIndex(null);
-
-  const next = () => {
-    if (activeIndex === null) return;
-    setActiveIndex((activeIndex + 1) % images.length);
-  };
-
-  const prev = () => {
-    if (activeIndex === null) return;
-    setActiveIndex((activeIndex - 1 + images.length) % images.length);
-  };
-
-  useEffect(() => {
-    if (!isOpen) return;
-
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') close();
-      if (e.key === 'ArrowRight') next();
-      if (e.key === 'ArrowLeft') prev();
-    };
-
-    document.addEventListener('keydown', onKeyDown);
-    document.body.style.overflow = 'hidden';
-
-    return () => {
-      document.removeEventListener('keydown', onKeyDown);
-      document.body.style.overflow = '';
-    };
-  }, [isOpen, activeIndex, images.length]);
-
-  if (!images.length) {
-    return (
-      <section className="gallery">
-        <p className="gallery__empty">No photos available.</p>
-      </section>
-    );
-  }
-
-  const big = images[0];
-  const thumbs = images.slice(1, 6);
-  const extraCount = Math.max(0, images.length - 6);
-
-  const openAt = (index: number) => {
-    if (!images[index]) return;
-    setActiveIndex(index);
-  };
-
-  return (
-    <div className="content">
-      <div className="content__container">
-        <div className="content__colums content__colums--2-1">
-          <section className="gallery">
-            <div className="gallery__layout">
-              <button type="button" className="gallery__big" onClick={() => openAt(0)} aria-label="Open image 1">
-                <img className="gallery__big__img" src={big.src} alt={big.alt ?? ''} loading="eager" />
-              </button>
-
-              <div className="gallery__thumbs" aria-label="Gallery thumbnails">
-                {thumbs.map((img, i) => {
-                  const realIndex = i + 1;
-                  const isLastThumbSlot = i === 4;
-                  const shouldShowMoreOverlay = isLastThumbSlot && extraCount > 0;
-
-                  return (
-                    <button
-                      key={`${img.src}-${realIndex}`}
-                      type="button"
-                      className={`gallery__thumb ${shouldShowMoreOverlay ? 'gallery__thumb--more' : ''}`}
-                      onClick={() => openAt(realIndex)}
-                      aria-label={`Open image ${realIndex + 1}`}>
-                      <img className="gallery__thumb__img" src={img.src} alt={img.alt ?? ''} loading="lazy" />
-
-                      {shouldShowMoreOverlay && (
-                        <span className="gallery__thumb__overlay" aria-label={`${extraCount} more photos`}>
-                          +{extraCount}
-                        </span>
-                      )}
-                    </button>
-                  );
-                })}
-              </div>
-            </div>
-
-            {isOpen && activeImage && (
-              <div
-                className="gallery__lightbox"
-                role="dialog"
-                aria-modal="true"
-                onMouseDown={(e) => {
-                  if (e.target === e.currentTarget) close();
-                }}>
-                <div className="gallery__lightbox__panel">
-                  <button type="button" className="gallery__btn__icon gallery__btn__icon--close" aria-label="Close" onClick={close}>
-                    <Icon name="ui-close" width={16} height={16} />
-                  </button>
-
-                  <div className="gallery__lightbox__media">
-                    <img className="gallery__lightbox__img" src={activeImage.src} alt={activeImage.alt ?? ''} />
-                  </div>
-
-                  <div className="gallery__lightbox__footer">
-                    <div className="gallery__lightbox__info">
-                      <span className="gallery__lightbox__index">
-                        {activeIndex + 1} / {images.length}
-                      </span>
-                      {(activeImage.caption || activeImage.alt) && <span className="gallery__lightbox__caption">{activeImage.caption ?? activeImage.alt}</span>}
-                    </div>
-
-                    <div className="gallery__lightbox__controls">
-                      <button type="button" className="gallery__btn" onClick={prev}>
-                        ←
-                      </button>
-                      <button type="button" className="gallery__btn" onClick={next}>
-                        →
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            )}
-          </section>
-          <div>
-            <h2 className="gallery__title">{title}</h2>
-            <p className="gallery__text">{intro}</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default PhotoGallery;
+import React, { useEffect, useState } from 'react';
+import Icon from '../../shared/components/icon';
+
+export interface GalleryImage {
+  src: string;
+  alt?: string;
+  caption?: string;
+}
+
+export interface GalleryProps {
+  title?: string;
+  intro?: string;
+  images: GalleryImage[];
+}
+
+const PhotoGallery: React.FC<GalleryProps> = ({ images, title, intro }) => {
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+
+  const isOpen = activeIndex !== null;
+  const activeImage = activeIndex !== null ? images[activeIndex] : null;
+
+  const close = () => setActiveIndex(null);
+
+  const next = () => {
+    if (activeIndex === null) return;
+    setActiveIndex((activeIndex + 1) % images.length);
+  };
+
+  const prev = () => {
+    if (activeIndex === null) return;
+    setActiveIndex((activeIndex - 1 + images.length) % images.length);
+  };
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') close();
+      if (e.key === 'ArrowRight') next();
+      if (e.key === 'ArrowLeft') prev();
+    };
+
+    document.addEventListener('keydown', onKeyDown);
+    document.body.style.overflow = 'hidden';
+
+    return () => {
+      document.removeEventListener('keydown', onKeyDown);
+      document.body.style.overflow = '';
+    };
+  }, [isOpen, activeIndex, images.length]);
+
+  if (!images.length) {
+    return (
+      <section className="gallery">
+        <p className="gallery__empty">No photos available.</p>
+      </section>
+    );
+  }
+
+  const big = images[0];
+  const thumbs = images.slice(1, 6);
+  const extraCount = Math.max(0, images.length - 6);
+
+  const openAt = (index: number) => {
+    if (!images[index]) return;
+    setActiveIndex(index);
+  };
+
+  return (
+    <div className="content">
+      <div className="content__container">
+        <div className="content__colums content__colums--2-1">
+          <section className="gallery">
+            <div className="gallery__layout">
+              <button type="button" className="gallery__big" onClick={() => openAt(0)} aria-label="Open image 1">
+                <img className="gallery__big__img" src={big.src} alt={big.alt ?? ''} loading="eager" />
+              </button>
+
+              <div className="gallery__thumbs" aria-label="Gallery thumbnails">
+                {thumbs.map((img, i) => {
+                  const realIndex = i + 1;
+                  const isLastThumbSlot = i === 4;
+                  const shouldShowMoreOverlay = isLastThumbSlot && extraCount > 0;
+
+                  return (
+                    <button
+                      key={`${img.src}-${realIndex}`}
+                      type="button"
+                      className={`gallery__thumb ${shouldShowMoreOverlay ? 'gallery__thumb--more' : ''}`}
+                      onClick={() => openAt(realIndex)}
+                      aria-label={`Open image ${realIndex + 1}`}>
+                      <img className="gallery__thumb__img" src={img.src} alt={img.alt ?? ''} loading="lazy" />
+
+                      {shouldShowMoreOverlay && (
+                        <span className="gallery__thumb__overlay" aria-label={`${extraCount} more photos`}>
+                          +{extraCount}
+                        </span>
+                      )}
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+
+            {isOpen && activeImage && (
+              <div
+                className="gallery__lightbox"
+                role="dialog"
+                aria-modal="true"
+                onMouseDown={(e) => {
+                  if (e.target === e.currentTarget) close();
+                }}>
+                <div className="gallery__lightbox__panel">
+                  <button type="button" className="gallery__btn__icon gallery__btn__icon--close" aria-label="Close" onClick={close}>
+                    <Icon name="ui-close" width={16} height={16} />
+                  </button>
+
+                  <div className="gallery__lightbox__media">
+                    <img className="gallery__lightbox__img" src={activeImage.src} alt={activeImage.alt ?? ''} />
+                  </div>
+
+                  <div className="gallery__lightbox__footer">
+                    <div className="gallery__lightbox__info">
+                      <span className="gallery__lightbox__index">
+                        {activeIndex + 1} / {images.length}
+                      </span>
+                      {(activeImage.caption || activeImage.alt) && <span className="gallery__lightbox__caption">{activeImage.caption ?? activeImage.alt}</span>}
+                    </div>
+
+                    <div className="gallery__lightbox__controls">
+                      <button type="button" className="gallery__btn" onClick={prev}>
+                        ←
+                      </button>
+                      <button type="button" className="gallery__btn" onClick={next}>
+                        →
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+          </section>
+          <div>
+            <h2 className="gallery__title">{title}</h2>
+            <p className="gallery__text">{intro}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PhotoGallery;

package/src/content/components/image-with-text.tsx

@@ -1,119 +1,119 @@
-import React from 'react';
-
-type Variant = 'image-with-text__card--no-card' | 'image-with-text__card--full-img';
-
-interface ImageWithTextCardProps {
-  variant?: Variant;
-  reverse?: boolean;
-  imageSrc: string;
-  imageAlt: string;
-  title: string;
-  activityTitle: string;
-  activityText: string;
-  detailsTitle: string;
-  detailsText: string;
-  buttonText: string;
-  onButtonClick?: () => void;
-}
-
-const ImageWithTextCard: React.FC<ImageWithTextCardProps> = ({
-  variant,
-  reverse,
-  imageSrc,
-  imageAlt,
-  title,
-  activityTitle,
-  activityText,
-  detailsTitle,
-  detailsText,
-  buttonText,
-  onButtonClick
-}) => (
-  <div className={`image-with-text__card ${reverse ? 'image-with-text__card--reverse' : ''} ${variant ? variant.toString() : ''}`}>
-    <div className="image-with-text__card__image__wrapper">
-      <img src={imageSrc} alt={imageAlt} className="image-with-text__card__image" />
-    </div>
-
-    <div className="image-with-text__card__content">
-      <h3 className="image-with-text__card__title">{title}</h3>
-
-      <div className="image-with-text__card__description">
-        <h5 className="image-with-text__card__description__title">{activityTitle}</h5>
-        <p className="image-with-text__card__description__text">{activityText}</p>
-      </div>
-
-      <div className="image-with-text__card__description">
-        <h5 className="image-with-text__card__description__title">{detailsTitle}</h5>
-        <p className="image-with-text__card__description__text">{detailsText}</p>
-      </div>
-
-      <div className="image-with-text__card__btn">
-        <button type="button" className="cta cta--select" onClick={onButtonClick}>
-          {buttonText}
-        </button>
-      </div>
-    </div>
-  </div>
-);
-
-interface ImageWithTextSectionProps {
-  variant?: Variant;
-  sectionTitle: string;
-  hasBackground?: boolean;
-  cards: [Omit<ImageWithTextCardProps, 'reverse'>, Omit<ImageWithTextCardProps, 'reverse'>];
-}
-
-export const ImageWithTextSection: React.FC<ImageWithTextSectionProps> = ({ variant, sectionTitle, hasBackground = true, cards }) => {
-  const className = ['image-with-text', hasBackground && 'image-with-text--background'].filter(Boolean).join(' ');
-  return (
-    <div className={className}>
-      <div className="image-with-text__container">
-        <div className="image-with-text__title__row">
-          <h2 className="image-with-text__title">{sectionTitle}</h2>
-        </div>
-
-        <div className="image-with-text__card__wrapper">
-          <ImageWithTextCard {...cards[0]} variant={variant} />
-          <ImageWithTextCard {...cards[1]} reverse variant={variant} />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-interface ImageWithTextProps {
-  sectionTitle?: string;
-  variants?: Variant[];
-  hasBackground?: boolean;
-}
-
-const DEFAULT_IMAGE = 'https://images.pexels.com/photos/3264723/pexels-photo-3264723.jpeg?cs=srgb&dl=pexels-alexazabache-3264723.jpg&fm=jpg';
-
-export const ImageWithText: React.FC<ImageWithTextProps> = ({ sectionTitle = 'Activities', variants, hasBackground = true }) => {
-  const baseCard = {
-    imageSrc: DEFAULT_IMAGE,
-    imageAlt: 'eiland',
-    title: 'Ontdek het zonnige Santorini',
-    activityTitle: 'Your activity',
-    activityText:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non sollicitudin risus. Donec euismod metus et purus ultricies condimentum. Vestibulum vel sodales massa. Pellentesque bibendum nisl at hendrerit sagittis. Pellentesque eget dui scelerisque, dictum diam non, ultrices velit. Duis et sem est. Suspendisse potenti.',
-    detailsTitle: 'Details',
-    detailsText:
-      'Etiam ipsum elit, volutpat sed semper at, eleifend vitae erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In at lectus rutrum elit egestas consectetur. Suspendisse sit amet erat dapibus, tincidunt arcu fringilla, auctor justo.',
-    buttonText: 'Book now'
-  } as const;
-
-  if (!variants || variants.length === 0) {
-    return <ImageWithTextSection sectionTitle={sectionTitle} cards={[baseCard, baseCard]} />;
-  }
-
-  return (
-    <>
-      {variants.map((variant) => (
-        <ImageWithTextSection key={variant} variant={variant} sectionTitle={sectionTitle} hasBackground={hasBackground} cards={[baseCard, baseCard]} />
-      ))}
-    </>
-  );
-};
-
-export default ImageWithText;
+import React from 'react';
+
+type Variant = 'image-with-text__card--no-card' | 'image-with-text__card--full-img';
+
+interface ImageWithTextCardProps {
+  variant?: Variant;
+  reverse?: boolean;
+  imageSrc: string;
+  imageAlt: string;
+  title: string;
+  activityTitle: string;
+  activityText: string;
+  detailsTitle: string;
+  detailsText: string;
+  buttonText: string;
+  onButtonClick?: () => void;
+}
+
+const ImageWithTextCard: React.FC<ImageWithTextCardProps> = ({
+  variant,
+  reverse,
+  imageSrc,
+  imageAlt,
+  title,
+  activityTitle,
+  activityText,
+  detailsTitle,
+  detailsText,
+  buttonText,
+  onButtonClick
+}) => (
+  <div className={`image-with-text__card ${reverse ? 'image-with-text__card--reverse' : ''} ${variant ? variant.toString() : ''}`}>
+    <div className="image-with-text__card__image__wrapper">
+      <img src={imageSrc} alt={imageAlt} className="image-with-text__card__image" />
+    </div>
+
+    <div className="image-with-text__card__content">
+      <h3 className="image-with-text__card__title">{title}</h3>
+
+      <div className="image-with-text__card__description">
+        <h5 className="image-with-text__card__description__title">{activityTitle}</h5>
+        <p className="image-with-text__card__description__text">{activityText}</p>
+      </div>
+
+      <div className="image-with-text__card__description">
+        <h5 className="image-with-text__card__description__title">{detailsTitle}</h5>
+        <p className="image-with-text__card__description__text">{detailsText}</p>
+      </div>
+
+      <div className="image-with-text__card__btn">
+        <button type="button" className="cta cta--select" onClick={onButtonClick}>
+          {buttonText}
+        </button>
+      </div>
+    </div>
+  </div>
+);
+
+interface ImageWithTextSectionProps {
+  variant?: Variant;
+  sectionTitle: string;
+  hasBackground?: boolean;
+  cards: [Omit<ImageWithTextCardProps, 'reverse'>, Omit<ImageWithTextCardProps, 'reverse'>];
+}
+
+export const ImageWithTextSection: React.FC<ImageWithTextSectionProps> = ({ variant, sectionTitle, hasBackground = true, cards }) => {
+  const className = ['image-with-text', hasBackground && 'image-with-text--background'].filter(Boolean).join(' ');
+  return (
+    <div className={className}>
+      <div className="image-with-text__container">
+        <div className="image-with-text__title__row">
+          <h2 className="image-with-text__title">{sectionTitle}</h2>
+        </div>
+
+        <div className="image-with-text__card__wrapper">
+          <ImageWithTextCard {...cards[0]} variant={variant} />
+          <ImageWithTextCard {...cards[1]} reverse variant={variant} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface ImageWithTextProps {
+  sectionTitle?: string;
+  variants?: Variant[];
+  hasBackground?: boolean;
+}
+
+const DEFAULT_IMAGE = 'https://images.pexels.com/photos/3264723/pexels-photo-3264723.jpeg?cs=srgb&dl=pexels-alexazabache-3264723.jpg&fm=jpg';
+
+export const ImageWithText: React.FC<ImageWithTextProps> = ({ sectionTitle = 'Activities', variants, hasBackground = true }) => {
+  const baseCard = {
+    imageSrc: DEFAULT_IMAGE,
+    imageAlt: 'eiland',
+    title: 'Ontdek het zonnige Santorini',
+    activityTitle: 'Your activity',
+    activityText:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non sollicitudin risus. Donec euismod metus et purus ultricies condimentum. Vestibulum vel sodales massa. Pellentesque bibendum nisl at hendrerit sagittis. Pellentesque eget dui scelerisque, dictum diam non, ultrices velit. Duis et sem est. Suspendisse potenti.',
+    detailsTitle: 'Details',
+    detailsText:
+      'Etiam ipsum elit, volutpat sed semper at, eleifend vitae erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In at lectus rutrum elit egestas consectetur. Suspendisse sit amet erat dapibus, tincidunt arcu fringilla, auctor justo.',
+    buttonText: 'Book now'
+  } as const;
+
+  if (!variants || variants.length === 0) {
+    return <ImageWithTextSection sectionTitle={sectionTitle} cards={[baseCard, baseCard]} />;
+  }
+
+  return (
+    <>
+      {variants.map((variant) => (
+        <ImageWithTextSection key={variant} variant={variant} sectionTitle={sectionTitle} hasBackground={hasBackground} cards={[baseCard, baseCard]} />
+      ))}
+    </>
+  );
+};
+
+export default ImageWithText;