@qite/tide-booking-component 1.4.123 → 1.4.124

package/src/content/components/breadcrumb.tsx

@@ -1,67 +1,67 @@
-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;
+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 +1,210 @@
-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--2">
-              <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--2">
-              <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--2">
-              <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--2">
-              <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;
+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 +1,42 @@
-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;
+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;