@qite/tide-booking-component 1.4.124 → 1.4.126

package/src/content/components/accordion.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import Icon from '../../shared/components/icon';
-
-interface AccordionProps {
-  summary: React.ReactNode;
-  children: React.ReactNode;
-  defaultOpen?: boolean;
-  className?: string;
-}
-
-export default function Accordion({ summary, children, defaultOpen = false, className = '' }: AccordionProps) {
-  const [open, setOpen] = React.useState(defaultOpen);
-
-  return (
-    <div className={['accordion', open && 'accordion--open', className].filter(Boolean).join(' ')}>
-      <button className="accordion__trigger" type="button" aria-expanded={open} onClick={() => setOpen((v) => !v)}>
-        <span>{summary}</span>
-        <span className="accordion__icon" aria-hidden>
-          <Icon name="ui-chevron" width={20} height={20} />
-        </span>
-      </button>
-
-      <div className="accordion__panel">
-        <div className="accordion__panelInner">
-          <div className="accordion__content">{children}</div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/content/components/breadcrumb.tsx

@@ -1,67 +0,0 @@
-import React from 'react';
-
-export type BreadcrumbItem = {
-  label?: string;
-  href?: string;
-  onClick?: (e: React.MouseEvent) => void;
-  icon?: React.ReactNode;
-  isCurrent?: boolean;
-};
-
-export type BreadcrumbsProps = {
-  items: BreadcrumbItem[];
-  noHeader?: boolean;
-};
-
-const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ items, noHeader = false }) => {
-  const lastIndex = items.length - 1;
-
-  return (
-    <nav className={`breadcrumb${noHeader ? ' breadcrumb--no-header' : ''}`} aria-label="Breadcrumb">
-      <div className="breadcrumb__container">
-        <ol className="breadcrumb__list">
-          {items.map((item, idx) => {
-            const isCurrent = item.isCurrent ?? idx === lastIndex;
-
-            const content = (
-              <span className="breadcrumb__content">
-                {item.icon && (
-                  <span className="breadcrumb__icon" aria-hidden="true">
-                    {item.icon}
-                  </span>
-                )}
-                {item.label && (
-                  <span className="breadcrumb__label" title={item.label}>
-                    {item.label}
-                  </span>
-                )}
-              </span>
-            );
-
-            return (
-              <li key={idx} className="breadcrumb__item">
-                {idx > 0 && (
-                  <span className="breadcrumb__separator" aria-hidden="true">
-                    /
-                  </span>
-                )}
-
-                {isCurrent || !item.href ? (
-                  <span className="breadcrumb__current" aria-current={isCurrent ? 'page' : undefined}>
-                    {content}
-                  </span>
-                ) : (
-                  <a className="breadcrumb__link" href={item.href} onClick={item.onClick}>
-                    {content}
-                  </a>
-                )}
-              </li>
-            );
-          })}
-        </ol>
-      </div>
-    </nav>
-  );
-};
-
-export default Breadcrumbs;

package/src/content/components/contact.tsx

@@ -1,210 +0,0 @@
-import React, { useMemo, useState } from 'react';
-
-type ContactValues = {
-  firstName: string;
-  lastName: string;
-  email: string;
-  phone: string;
-  message: string;
-};
-
-type ContactErrors = Partial<Record<keyof ContactValues, string>>;
-
-const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-const phoneRegex = /^[+()\-.\s0-9]{8,20}$/;
-
-const ContactForm: React.FC = () => {
-  const [values, setValues] = useState<ContactValues>({
-    firstName: '',
-    lastName: '',
-    email: '',
-    phone: '',
-    message: ''
-  });
-
-  const [touched, setTouched] = useState<Partial<Record<keyof ContactValues, boolean>>>({});
-  const [errors, setErrors] = useState<ContactErrors>({});
-  const [submitted, setSubmitted] = useState(false);
-
-  const validate = (v: ContactValues): ContactErrors => {
-    const e: ContactErrors = {};
-
-    if (!v.firstName.trim()) e.firstName = 'Voornaam is verplicht.';
-    if (!v.lastName.trim()) e.lastName = 'Achternaam is verplicht.';
-
-    if (!v.email.trim()) e.email = 'Email is verplicht.';
-    else if (!emailRegex.test(v.email.trim())) e.email = 'Vul een geldig e-mailadres in.';
-
-    if (v.phone.trim() && !phoneRegex.test(v.phone.trim())) {
-      e.phone = 'Vul een geldig telefoonnummer in.';
-    }
-
-    if (!v.message.trim()) e.message = 'Bericht is verplicht.';
-    else if (v.message.trim().length < 10) e.message = 'Bericht moet minstens 10 tekens zijn.';
-
-    return e;
-  };
-
-  const currentErrors = useMemo(() => validate(values), [values]);
-
-  const setField = <K extends keyof ContactValues>(key: K, val: ContactValues[K]) => {
-    setValues((p) => ({ ...p, [key]: val }));
-    if (submitted || touched[key]) {
-      setErrors(validate({ ...values, [key]: val } as ContactValues));
-    }
-  };
-
-  const onBlur = (key: keyof ContactValues) => {
-    setTouched((p) => ({ ...p, [key]: true }));
-    setErrors(validate(values));
-  };
-
-  const onSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    setSubmitted(true);
-
-    const eMap = validate(values);
-    setErrors(eMap);
-
-    if (Object.keys(eMap).length > 0) return;
-
-    console.log('Contact form submit:', values);
-
-    setValues({ firstName: '', lastName: '', email: '', phone: '', message: '' });
-    setTouched({});
-    setErrors({});
-    setSubmitted(false);
-  };
-
-  const showError = (key: keyof ContactValues) => {
-    const shouldShow = submitted || touched[key];
-    return shouldShow ? errors[key] : undefined;
-  };
-
-  return (
-    <div className="content content--background">
-      <div className="content__container content__container--small">
-        <div className="content__title__row">
-          <h2 className="content__title">Contact form</h2>
-        </div>
-
-        <div className="contact">
-          <form className="contact__form" noValidate onSubmit={onSubmit}>
-            <label className="contact__form__group contact__form__group--50">
-              <span className="contact__form__label">Voornaam*</span>
-              <input
-                type="text"
-                className="contact__input"
-                placeholder="Enter your name"
-                aria-label="Enter your name"
-                value={values.firstName}
-                onChange={(e) => setField('firstName', e.target.value)}
-                onBlur={() => onBlur('firstName')}
-                aria-invalid={!!showError('firstName')}
-                aria-describedby="firstName-error"
-              />
-              {showError('firstName') && (
-                <span className="contact__error" id="firstName-error">
-                  {showError('firstName')}
-                </span>
-              )}
-            </label>
-
-            <label className="contact__form__group contact__form__group--50">
-              <span className="contact__form__label">Achternaam*</span>
-              <input
-                type="text"
-                className="contact__input"
-                placeholder="Enter your last name"
-                aria-label="Enter your last name"
-                value={values.lastName}
-                onChange={(e) => setField('lastName', e.target.value)}
-                onBlur={() => onBlur('lastName')}
-                aria-invalid={!!showError('lastName')}
-                aria-describedby="lastName-error"
-              />
-              {showError('lastName') && (
-                <span className="contact__error" id="lastName-error">
-                  {showError('lastName')}
-                </span>
-              )}
-            </label>
-
-            <label className="contact__form__group contact__form__group--50">
-              <span className="contact__form__label">Email*</span>
-              <input
-                type="email"
-                className="contact__input"
-                placeholder="Enter your email"
-                aria-label="Enter your email"
-                value={values.email}
-                onChange={(e) => setField('email', e.target.value)}
-                onBlur={() => onBlur('email')}
-                aria-invalid={!!showError('email')}
-                aria-describedby="email-error"
-              />
-              {showError('email') && (
-                <span className="contact__error" id="email-error">
-                  {showError('email')}
-                </span>
-              )}
-            </label>
-
-            <label className="contact__form__group contact__form__group--50">
-              <span className="contact__form__label">Telefoonnummer</span>
-              <input
-                type="tel"
-                className="contact__input"
-                placeholder="Enter your phone number"
-                aria-label="Enter your phone number"
-                value={values.phone}
-                onChange={(e) => setField('phone', e.target.value)}
-                onBlur={() => onBlur('phone')}
-                aria-invalid={!!showError('phone')}
-                aria-describedby="phone-error"
-              />
-              {showError('phone') && (
-                <span className="contact__error" id="phone-error">
-                  {showError('phone')}
-                </span>
-              )}
-            </label>
-
-            <label className="contact__form__group">
-              <span className="contact__form__label">Bericht*</span>
-              <textarea
-                className="contact__textarea"
-                placeholder="Enter your message"
-                aria-label="Enter your message"
-                value={values.message}
-                onChange={(e) => setField('message', e.target.value)}
-                onBlur={() => onBlur('message')}
-                aria-invalid={!!showError('message')}
-                aria-describedby="message-error"
-              />
-              {showError('message') && (
-                <span className="contact__error" id="message-error">
-                  {showError('message')}
-                </span>
-              )}
-            </label>
-
-            <div className="contact__form__actions">
-              <button type="submit" className="cta cta--primary">
-                Send message
-              </button>
-            </div>
-            {/* 
-            {submitted && Object.keys(currentErrors).length > 0 && (
-              <div className="contact__error-summary" role="alert">
-                Controleer de velden in het formulier.
-              </div>
-            )} */}
-          </form>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ContactForm;

package/src/content/components/faq.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import Accordion from './accordion';
-
-export interface FAQItem {
-  question: string;
-  answer: React.ReactNode;
-}
-
-export interface FAQProps {
-  items: FAQItem[];
-  title?: string;
-}
-
-const FAQ: React.FC<FAQProps> = ({ items, title = 'Frequently Asked Questions' }) => {
-  if (!items?.length) {
-    return (
-      <section className="faq">
-        <h2 className="faq__title">{title}</h2>
-        <p className="faq__empty">No FAQs available.</p>
-      </section>
-    );
-  }
-
-  return (
-    <div className="content">
-      <div className="content__container content__container--small">
-        <section className="faq">
-          <h2 className="faq__title">{title}</h2>
-          <div className="faq__list">
-            {items.map((item, idx) => (
-              <Accordion key={item.question ?? idx} summary={item.question}>
-                <div className="faq__answer">{item.answer}</div>
-              </Accordion>
-            ))}
-          </div>
-        </section>
-      </div>
-    </div>
-  );
-};
-
-export default FAQ;

package/src/content/components/gallery.tsx

@@ -1,153 +0,0 @@
-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 +0,0 @@
-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;