@bailierich/booking-components 2.0.0

package/components/SectionRenderer.tsx

@@ -0,0 +1,558 @@
+'use client';
+
+import React from 'react';
+import {
+  Logo,
+  Header,
+  FeaturedLink,
+  LinkList,
+  SocialBar,
+  Hero,
+  About,
+  ServicesPreview,
+  Gallery,
+  Testimonials,
+  Team,
+  Contact,
+  MinimalHeader,
+  MinimalNavigation,
+  MinimalFooter,
+  FeatureContent,
+  BeforeAfter,
+  PricingTable,
+  InstagramFeed,
+  FixedInfoCard,
+  BookingSection,
+  VideoSection,
+  ScrollingTextDivider,
+  LocationMap,
+  ImageSection,
+  FAQSection,
+  Navbar,
+  TextSection
+} from './Sections';
+
+export interface SectionRendererProps {
+  section: {
+    id: string;
+    type: string;
+    settings: any;
+    enabled?: boolean;
+    position?: number;
+  };
+  theme: {
+    colors: {
+      primary: string;
+      secondary: string;
+      text: string;
+      bookingText?: string;
+      linkBackground?: string;
+      linkText?: string;
+      buttonText?: string;
+    };
+    typography: {
+      headingFont?: string;
+      bodyFont?: string;
+      bodySize?: string;
+    };
+  };
+  // Optional: Pass custom BookingFlow component for booking sections
+  BookingFlowComponent?: React.ComponentType<any>;
+  // Optional: Pass full config for booking sections
+  config?: any;
+  // Optional: Enable inline editing (for Studio preview mode)
+  enableInlineEditing?: boolean;
+}
+
+/**
+ * SectionRenderer - Universal renderer for all section types
+ *
+ * Maps section configuration objects to the appropriate component
+ * and passes through theme/styling props.
+ *
+ * @example
+ * ```tsx
+ * <SectionRenderer
+ *   section={{
+ *     id: 'hero-1',
+ *     type: 'hero',
+ *     settings: {
+ *       headline: 'Welcome',
+ *       subheadline: 'Transform your look',
+ *       heroImage: '/hero.jpg',
+ *       layout: 'split'
+ *     }
+ *   }}
+ *   theme={{
+ *     colors: { primary: '#BCB4FF', secondary: '#CAC426', text: '#000000' },
+ *     typography: { headingFont: 'Geist Sans' }
+ *   }}
+ * />
+ * ```
+ */
+export function SectionRenderer({
+  section,
+  theme,
+  BookingFlowComponent,
+  config,
+  enableInlineEditing = false
+}: SectionRendererProps) {
+  const { type, settings } = section;
+  const sectionId = section.id;
+
+  // Debug log
+  if (type === 'video_section') {
+    console.log('🎬 Rendering video_section:', { type, settings, sectionId });
+  }
+  const colors = theme?.colors || {
+    primary: '#BCB4FF',
+    secondary: '#CAC426',
+    text: '#000000'
+  };
+  const typography = theme?.typography || {
+    headingFont: 'Geist Sans',
+    bodyFont: 'Inter',
+    bodySize: '16px'
+  };
+
+  // Map section type to component
+  switch (type) {
+    case 'logo':
+      return (
+        <Logo
+          logoUrl={settings.logoUrl}
+          fallbackText={settings.fallbackText}
+          size={settings.size}
+          alignment={settings.alignment}
+          colors={colors}
+          enableInlineEditing={enableInlineEditing}
+          sectionId={sectionId}
+        />
+      );
+
+    case 'header':
+      return (
+        <Header
+          name={settings.name}
+          title={settings.title}
+          bio={settings.bio}
+          showName={settings.showName}
+          showTitle={settings.showTitle}
+          showBio={settings.showBio}
+          colors={colors}
+          typography={typography}
+          enableInlineEditing={enableInlineEditing}
+          sectionId={sectionId}
+        />
+      );
+
+    case 'featured_link':
+      return (
+        <FeaturedLink
+          text={settings.text}
+          url={settings.url}
+          style={settings.style}
+          size={settings.size}
+          colors={colors}
+          enableInlineEditing={enableInlineEditing}
+          sectionId={sectionId}
+        />
+      );
+
+    case 'link_list':
+      return (
+        <LinkList
+          links={settings.links || []}
+          style={settings.style}
+          colors={colors}
+          enableInlineEditing={enableInlineEditing}
+          sectionId={sectionId}
+        />
+      );
+
+    case 'social_bar':
+      return (
+        <SocialBar
+          platforms={settings.platforms || []}
+          socialLinks={settings.socialLinks}
+          style={settings.style}
+          size={settings.size}
+          position={settings.position}
+          invertIcons={settings.invertIcons}
+          colors={colors}
+          enableInlineEditing={enableInlineEditing}
+          sectionId={sectionId}
+        />
+      );
+
+    case 'instagram_feed':
+      return (
+        <InstagramFeed
+          username={settings.username}
+          colors={colors}
+          enableInlineEditing={enableInlineEditing}
+          sectionId={sectionId}
+        />
+      );
+
+    case 'minimal_header':
+      return (
+        <MinimalHeader
+          brandName={settings.brandName}
+          logoUrl={settings.logoUrl}
+          style={settings.style}
+          alignment={settings.alignment}
+          sticky={settings.sticky}
+          colors={colors}
+          typography={typography}
+          enableInlineEditing={enableInlineEditing}
+          sectionId={sectionId}
+        />
+      );
+
+    case 'minimal_navigation':
+      return (
+        <MinimalNavigation
+          links={settings.links || []}
+          style={settings.style}
+          colors={colors}
+          enableInlineEditing={enableInlineEditing}
+          sectionId={sectionId}
+        />
+      );
+
+    case 'feature_content':
+      return (
+        <FeatureContent
+          headline={settings.headline}
+          description={settings.description}
+          image={settings.image}
+          buttonText={settings.buttonText}
+          buttonUrl={settings.buttonUrl}
+          showButton={settings.showButton}
+          layout={settings.layout}
+          colors={colors}
+          typography={typography}
+          enableInlineEditing={enableInlineEditing}
+          sectionId={sectionId}
+        />
+      );
+
+    case 'minimal_footer':
+      return (
+        <MinimalFooter
+          alignment={settings.alignment}
+          showSocial={settings.showSocial}
+          showContact={settings.showContact}
+          showLinks={settings.showLinks}
+          footerText={settings.footerText}
+          colors={colors}
+          enableInlineEditing={enableInlineEditing}
+          sectionId={sectionId}
+        />
+      );
+
+    case 'hero':
+      return (
+        <Hero
+          headline={settings.headline}
+          subheadline={settings.subheadline}
+          heroImage={settings.heroImage}
+          ctaButton={settings.ctaButton}
+          layout={settings.layout}
+          imagePosition={settings.imagePosition}
+          contentDisplay={settings.contentDisplay}
+          colors={colors}
+          typography={typography}
+          enableInlineEditing={enableInlineEditing}
+          sectionId={sectionId}
+        />
+      );
+
+    case 'about':
+      return (
+        <About
+          title={settings.title}
+          content={settings.content}
+          image={settings.image}
+          layout={settings.layout}
+          colors={colors}
+          typography={typography}
+          enableInlineEditing={enableInlineEditing}
+          sectionId={sectionId}
+        />
+      );
+
+    case 'services_preview':
+      return (
+        <ServicesPreview
+          title={settings.title}
+          services={settings.services}
+          layout={settings.layout}
+          columns={settings.columns}
+          showPrices={settings.showPrices}
+          showDuration={settings.showDuration}
+          colors={colors}
+          typography={typography}
+          enableInlineEditing={enableInlineEditing}
+          sectionId={sectionId}
+        />
+      );
+
+    case 'gallery':
+      return (
+        <Gallery
+          title={settings.title}
+          images={settings.images || []}
+          columns={settings.columns}
+          colors={colors}
+          typography={typography}
+          enableInlineEditing={enableInlineEditing}
+          sectionId={sectionId}
+        />
+      );
+
+    case 'testimonials':
+      return (
+        <Testimonials
+          title={settings.title}
+          testimonials={settings.testimonials}
+          layout={settings.layout}
+          colors={colors}
+          typography={typography}
+          enableInlineEditing={enableInlineEditing}
+          sectionId={sectionId}
+        />
+      );
+
+    case 'team':
+      return (
+        <Team
+          title={settings.title}
+          members={settings.members}
+          colors={colors}
+          typography={typography}
+          enableInlineEditing={enableInlineEditing}
+          sectionId={sectionId}
+        />
+      );
+
+    case 'contact':
+      return (
+        <Contact
+          title={settings.title}
+          showForm={settings.showForm}
+          email={settings.email}
+          phone={settings.phone}
+          address={settings.address}
+          colors={colors}
+          typography={typography}
+          enableInlineEditing={enableInlineEditing}
+          sectionId={sectionId}
+        />
+      );
+
+    case 'before_after':
+      return (
+        <BeforeAfter
+          title={settings.title}
+          comparisons={settings.comparisons}
+          colors={colors}
+          typography={typography}
+          enableInlineEditing={enableInlineEditing}
+          sectionId={sectionId}
+        />
+      );
+
+    case 'pricing_table':
+      return (
+        <PricingTable
+          title={settings.title}
+          plans={settings.plans}
+          colors={colors}
+          typography={typography}
+          enableInlineEditing={enableInlineEditing}
+          sectionId={sectionId}
+        />
+      );
+
+    case 'booking':
+      return (
+        <BookingSection
+          config={config || {}}
+          colors={colors}
+          BookingFlowComponent={BookingFlowComponent}
+          enableInlineEditing={enableInlineEditing}
+          sectionId={sectionId}
+        />
+      );
+
+    case 'fixed_info_card':
+      return (
+        <FixedInfoCard
+          name={settings.name}
+          subheading={settings.subheading}
+          bio={settings.bio}
+          links={settings.links || []}
+          bookingButtonText={settings.bookingButtonText}
+          bookingButtonUrl={settings.bookingButtonUrl}
+          showBookingButton={settings.showBookingButton}
+          position={settings.position}
+          cardWidth={settings.cardWidth}
+          cardColor={settings.cardColor}
+          colors={colors}
+          typography={typography}
+          enableInlineEditing={enableInlineEditing}
+          sectionId={sectionId}
+        />
+      );
+
+    case 'video_section':
+      return (
+        <VideoSection
+          videoUrl={settings.videoUrl}
+          aspectRatio={settings.aspectRatio}
+          autoplay={settings.autoplay}
+          loop={settings.loop}
+          muted={settings.muted}
+          controls={settings.controls}
+          allowFullScreen={settings.allowFullScreen}
+          coverImage={settings.coverImage}
+          maxWidth={settings.maxWidth}
+          alignment={settings.alignment}
+          borderRadius={settings.borderRadius}
+          colors={colors}
+          typography={typography}
+          enableInlineEditing={enableInlineEditing}
+          sectionId={sectionId}
+        />
+      );
+
+    case 'scrolling_text_divider':
+      return (
+        <ScrollingTextDivider
+          text={settings.text}
+          scrollDirection={settings.scrollDirection}
+          scrollSpeed={settings.scrollSpeed}
+          orientation={settings.orientation}
+          dividerIcon={settings.dividerIcon}
+          customIcon={settings.customIcon}
+          textSize={settings.textSize}
+          textColor={settings.textColor}
+          fontWeight={settings.fontWeight}
+          backgroundColor={settings.backgroundColor}
+          backgroundGradient={settings.backgroundGradient}
+          pauseOnHover={settings.pauseOnHover}
+          colors={colors}
+          typography={typography}
+          enableInlineEditing={enableInlineEditing}
+          sectionId={sectionId}
+        />
+      );
+
+    case 'location_map':
+      return (
+        <LocationMap
+          address={settings.address}
+          displayType={settings.displayType}
+          mapHeight={settings.mapHeight}
+          mapStyle={settings.mapStyle}
+          zoom={settings.zoom}
+          showMarker={settings.showMarker}
+          borderRadius={settings.borderRadius}
+          directionsButtonText={settings.directionsButtonText}
+          colors={colors}
+          typography={typography}
+          enableInlineEditing={enableInlineEditing}
+          sectionId={sectionId}
+        />
+      );
+
+    case 'image_section':
+      return (
+        <ImageSection
+          imageUrl={settings.imageUrl}
+          altText={settings.altText}
+          caption={settings.caption}
+          maxWidth={settings.maxWidth}
+          alignment={settings.alignment}
+          aspectRatio={settings.aspectRatio}
+          borderRadius={settings.borderRadius}
+          linkUrl={settings.linkUrl}
+          openInNewTab={settings.openInNewTab}
+          colors={colors}
+          typography={typography}
+          enableInlineEditing={enableInlineEditing}
+          sectionId={sectionId}
+        />
+      );
+
+    case 'faq_section':
+      return (
+        <FAQSection
+          title={settings.title}
+          faqs={settings.faqs}
+          layout={settings.layout}
+          maxWidth={settings.maxWidth}
+          colors={colors}
+          typography={typography}
+          enableInlineEditing={enableInlineEditing}
+          sectionId={sectionId}
+        />
+      );
+
+    case 'navbar':
+      return (
+        <Navbar
+          brandName={settings.brandName}
+          logoUrl={settings.logoUrl}
+          showLogo={settings.showLogo}
+          showBrandName={settings.showBrandName}
+          links={settings.links}
+          ctaText={settings.ctaText}
+          ctaUrl={settings.ctaUrl}
+          sticky={settings.sticky}
+          transparentOnTop={settings.transparentOnTop}
+          colors={colors}
+          typography={typography}
+          enableInlineEditing={enableInlineEditing}
+          sectionId={sectionId}
+        />
+      );
+
+    case 'text_section':
+      return (
+        <TextSection
+          title={settings.title}
+          content={settings.content}
+          alignment={settings.alignment}
+          maxWidth={settings.maxWidth}
+          textSize={settings.textSize}
+          backgroundColor={settings.backgroundColor}
+          textColor={settings.textColor}
+          paddingY={settings.paddingY}
+          colors={colors}
+          typography={typography}
+          enableInlineEditing={enableInlineEditing}
+          sectionId={sectionId}
+        />
+      );
+
+    default:
+      // Unknown section type - render placeholder
+      return (
+        <div className="container mx-auto px-4 py-16">
+          <div
+            className="max-w-4xl mx-auto p-8 rounded-lg border-2 border-dashed text-center"
+            style={{ borderColor: colors.primary, opacity: 0.5 }}
+          >
+            <p className="text-lg" style={{ color: colors.text }}>
+              Unknown section type: {type}
+            </p>
+          </div>
+        </div>
+      );
+  }
+}
+
+export default SectionRenderer;

package/components/Sections/About.tsx

@@ -0,0 +1,145 @@
+'use client';
+
+export interface AboutProps {
+  title?: string;
+  content?: string;
+  image?: string;
+  layout?: 'centered' | 'split' | 'wide';
+  colors: {
+    primary: string;
+    text: string;
+  };
+  typography: {
+    headingFont?: string;
+  };
+  enableInlineEditing?: boolean;
+  sectionId?: string;
+}
+
+export function About({
+  title,
+  content,
+  image,
+  layout = 'centered',
+  colors,
+  typography,
+  enableInlineEditing = false,
+  sectionId = ''
+}: AboutProps) {
+  if (layout === 'centered') {
+    return (
+      <div className="container mx-auto px-4 py-16">
+        <div className="max-w-3xl mx-auto text-center">
+          <h2
+            className="text-3xl font-bold mb-6"
+            style={{
+              fontFamily: typography.headingFont,
+              color: colors.text
+            }}
+            {...(enableInlineEditing && {
+              'data-editable': true,
+              'data-section-id': sectionId,
+              'data-field-path': 'settings.title'
+            })}
+          >
+            {title || 'About Us'}
+          </h2>
+          <p
+            className="text-lg opacity-80"
+            {...(enableInlineEditing && {
+              'data-editable': true,
+              'data-section-id': sectionId,
+              'data-field-path': 'settings.content'
+            })}
+          >
+            {content || 'Tell your story here...'}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (layout === 'split') {
+    return (
+      <div className="container mx-auto px-4 py-16">
+        <div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center">
+          <div className="aspect-square rounded-2xl overflow-hidden">
+            {image ? (
+              <img
+                src={image}
+                alt={title || 'About'}
+                className="w-full h-full object-cover"
+              />
+            ) : (
+              <div
+                className="w-full h-full flex items-center justify-center"
+                style={{ backgroundColor: colors.primary, opacity: 0.2 }}
+              >
+                <span className="text-sm opacity-50">Add image</span>
+              </div>
+            )}
+          </div>
+          <div>
+            <h2
+              className="text-3xl font-bold mb-6"
+              style={{
+                fontFamily: typography.headingFont,
+                color: colors.text
+              }}
+              {...(enableInlineEditing && {
+                'data-editable': true,
+                'data-section-id': sectionId,
+                'data-field-path': 'settings.title'
+              })}
+            >
+              {title || 'About Us'}
+            </h2>
+            <p
+              className="text-lg opacity-80 leading-relaxed"
+              {...(enableInlineEditing && {
+                'data-editable': true,
+                'data-section-id': sectionId,
+                'data-field-path': 'settings.content'
+              })}
+            >
+              {content || 'Tell your story here...'}
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-16">
+      <div className="max-w-7xl mx-auto">
+        <h2
+          className="text-4xl font-bold mb-8 text-left"
+          style={{
+            fontFamily: typography.headingFont,
+            color: colors.text
+          }}
+          {...(enableInlineEditing && {
+            'data-editable': true,
+            'data-section-id': sectionId,
+            'data-field-path': 'settings.title'
+          })}
+        >
+          {title || 'About Us'}
+        </h2>
+        <p
+          className="text-xl opacity-80 leading-relaxed columns-2 gap-12"
+          {...(enableInlineEditing && {
+            'data-editable': true,
+            'data-section-id': sectionId,
+            'data-field-path': 'settings.content'
+          })}
+        >
+          {content || 'Tell your story here...'}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default About;