@bailierich/booking-components 2.0.0

package/components/Sections/ImageSection.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+export interface ImageSectionProps {
+  imageUrl: string;
+  altText?: string;
+  caption?: string;
+  maxWidth?: 'full' | 'large' | 'medium' | 'small';
+  alignment?: 'left' | 'center' | 'right';
+  aspectRatio?: 'auto' | '16:9' | '4:3' | '1:1' | '3:2';
+  borderRadius?: number;
+  linkUrl?: string;
+  openInNewTab?: boolean;
+  colors: {
+    primary: string;
+    text: string;
+  };
+  typography?: {
+    bodyFont?: string;
+  };
+  enableInlineEditing?: boolean;
+  sectionId?: string;
+}
+
+export function ImageSection({
+  imageUrl,
+  altText = '',
+  caption,
+  maxWidth = 'large',
+  alignment = 'center',
+  aspectRatio = 'auto',
+  borderRadius = 12,
+  linkUrl,
+  openInNewTab = true,
+  colors,
+  typography,
+  enableInlineEditing = false,
+  sectionId = ''
+}: ImageSectionProps) {
+  // Max width classes
+  const maxWidthMap = {
+    full: 'max-w-full',
+    large: 'max-w-6xl',
+    medium: 'max-w-4xl',
+    small: 'max-w-2xl'
+  };
+
+  // Aspect ratio padding hack
+  const aspectRatioMap = {
+    auto: null,
+    '16:9': '56.25%',
+    '4:3': '75%',
+    '1:1': '100%',
+    '3:2': '66.67%'
+  };
+
+  const alignmentClass = alignment === 'center' ? 'mx-auto' : alignment === 'right' ? 'ml-auto' : 'mr-auto';
+
+  const imageContent = (
+    <div className={`${maxWidthMap[maxWidth]} ${alignmentClass}`}>
+      <div
+        className="relative w-full overflow-hidden"
+        style={{
+          borderRadius: `${borderRadius}px`,
+          ...(aspectRatioMap[aspectRatio] && { paddingBottom: aspectRatioMap[aspectRatio] })
+        }}
+      >
+        {imageUrl ? (
+          <img
+            src={imageUrl}
+            alt={altText || 'Image'}
+            className={aspectRatio === 'auto' ? 'w-full h-auto' : 'absolute top-0 left-0 w-full h-full object-cover'}
+            style={{
+              borderRadius: `${borderRadius}px`
+            }}
+          />
+        ) : (
+          // Placeholder when no image
+          <div
+            className="flex items-center justify-center bg-gray-100"
+            style={{
+              backgroundColor: `${colors.primary}10`,
+              borderRadius: `${borderRadius}px`,
+              minHeight: aspectRatio === 'auto' ? '300px' : undefined
+            }}
+          >
+            <div className="text-center px-4">
+              <svg
+                className="w-16 h-16 mx-auto mb-4"
+                fill="none"
+                stroke={colors.primary}
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+                />
+              </svg>
+              <p style={{ color: colors.text, opacity: 0.6 }}>
+                Add an image URL to display
+              </p>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Caption */}
+      {caption && imageUrl && (
+        <p
+          className="mt-3 text-sm text-center"
+          style={{
+            color: colors.text,
+            opacity: 0.7,
+            fontFamily: typography?.bodyFont || 'inherit'
+          }}
+          {...(enableInlineEditing && {
+            'data-editable': true,
+            'data-section-id': sectionId,
+            'data-field-path': 'settings.caption'
+          })}
+        >
+          {caption}
+        </p>
+      )}
+    </div>
+  );
+
+  return (
+    <div className={maxWidth === 'full' ? 'w-full' : 'container mx-auto px-4'}>
+      {linkUrl && imageUrl ? (
+        <a
+          href={linkUrl}
+          target={openInNewTab ? '_blank' : '_self'}
+          rel={openInNewTab ? 'noopener noreferrer' : undefined}
+          className="block"
+        >
+          {imageContent}
+        </a>
+      ) : (
+        imageContent
+      )}
+    </div>
+  );
+}
+
+export default ImageSection;

package/components/Sections/InstagramFeed.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+export interface InstagramFeedProps {
+  username?: string;
+  colors: {
+    primary: string;
+  };
+  enableInlineEditing?: boolean;
+  sectionId?: string;
+}
+
+export function InstagramFeed({
+  username,
+  colors,
+  enableInlineEditing = false,
+  sectionId = ''
+}: InstagramFeedProps) {
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <div className="max-w-4xl mx-auto">
+        <p className="text-center text-sm opacity-60 mb-4">
+          Instagram Feed: {username || '@handle'}
+        </p>
+        <div className="grid grid-cols-3 gap-1">
+          {[1, 2, 3, 4, 5, 6].map((i) => (
+            <div
+              key={i}
+              className="aspect-square rounded"
+              style={{ backgroundColor: colors.primary, opacity: 0.2 }}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default InstagramFeed;

package/components/Sections/LinkList.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+export interface Link {
+  id: string;
+  label: string;
+  url: string;
+}
+
+export interface LinkListProps {
+  links: Link[];
+  style?: 'pill' | 'square' | 'outline';
+  colors: {
+    primary: string;
+    linkBackground?: string;
+    linkText?: string;
+  };
+  enableInlineEditing?: boolean;
+  sectionId?: string;
+}
+
+export function LinkList({ links, style = 'pill', colors, enableInlineEditing = false, sectionId = '' }: LinkListProps) {
+  const getLinkClassName = () => {
+    const baseClasses = "block w-full p-4 text-center font-medium transition-all hover:scale-105";
+
+    switch (style) {
+      case 'pill':
+        return `${baseClasses} rounded-full`;
+      case 'square':
+        return `${baseClasses} rounded-md`;
+      case 'outline':
+        return `${baseClasses} rounded-full border-2`;
+      default:
+        return `${baseClasses} rounded-lg`;
+    }
+  };
+
+  const getLinkStyle = (isOutline: boolean) => {
+    if (isOutline) {
+      return {
+        backgroundColor: 'transparent',
+        borderColor: colors.primary,
+        color: colors.primary
+      };
+    }
+    return {
+      backgroundColor: colors.linkBackground || colors.primary,
+      color: colors.linkText || '#FFFFFF'
+    };
+  };
+
+  return (
+    <div className="container mx-auto px-4">
+      <div className="max-w-2xl mx-auto space-y-3">
+        {links.map((link, index) => (
+          <a
+            key={link.id}
+            href={link.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={getLinkClassName()}
+            style={getLinkStyle(style === 'outline')}
+            {...(enableInlineEditing && {
+              'data-editable': true,
+              'data-section-id': sectionId,
+              'data-field-path': `settings.links.${index}.label`
+            })}
+          >
+            {link.label}
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default LinkList;

package/components/Sections/LocationMap.tsx

@@ -0,0 +1,202 @@
+'use client';
+
+export interface LocationMapProps {
+  address: string;
+  displayType?: 'map-only' | 'address-only' | 'both';
+  mapHeight?: 'small' | 'medium' | 'large';
+  mapStyle?: 'roadmap' | 'satellite';
+  zoom?: number;
+  showMarker?: boolean;
+  borderRadius?: number;
+  directionsButtonText?: string;
+  colors: {
+    primary: string;
+    text: string;
+  };
+  typography?: {
+    headingFont?: string;
+    bodyFont?: string;
+  };
+  enableInlineEditing?: boolean;
+  sectionId?: string;
+}
+
+export function LocationMap({
+  address,
+  displayType = 'both',
+  mapHeight = 'medium',
+  mapStyle = 'roadmap',
+  zoom = 15,
+  showMarker = true,
+  borderRadius = 12,
+  directionsButtonText = 'Get Directions',
+  colors,
+  typography,
+  enableInlineEditing = false,
+  sectionId = ''
+}: LocationMapProps) {
+  // Map height mapping
+  const heightMap = {
+    small: 300,
+    medium: 400,
+    large: 500
+  };
+
+  const height = heightMap[mapHeight];
+
+  // Encode address for Google Maps
+  const encodedAddress = encodeURIComponent(address);
+  const directionsUrl = `https://www.google.com/maps/dir/?api=1&destination=${encodedAddress}`;
+
+  // Google Maps embed URL
+  // Support both Next.js (process.env.NEXT_PUBLIC_*) and Vite (import.meta.env.VITE_*)
+  const apiKey = (import.meta as any).env?.VITE_GOOGLE_MAPS_API_KEY ||
+                 (typeof globalThis !== 'undefined' && (globalThis as any).process?.env?.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY) ||
+                 '';
+  const mapEmbedUrl = `https://www.google.com/maps/embed/v1/place?key=${apiKey}&q=${encodedAddress}&zoom=${zoom}&maptype=${mapStyle}`;
+
+  return (
+    <div className="container mx-auto px-4">
+      <div className="max-w-4xl mx-auto">
+        {/* Map */}
+        {(displayType === 'map-only' || displayType === 'both') && address && (
+          <div
+            className="w-full overflow-hidden mb-6"
+            style={{
+              height: `${height}px`,
+              borderRadius: `${borderRadius}px`
+            }}
+          >
+            <iframe
+              src={mapEmbedUrl}
+              className="w-full h-full"
+              style={{ border: 0 }}
+              allowFullScreen
+              loading="lazy"
+              referrerPolicy="no-referrer-when-downgrade"
+              title="Location Map"
+            />
+          </div>
+        )}
+
+        {/* Address & Directions */}
+        {(displayType === 'address-only' || displayType === 'both') && (
+          <div
+            className="p-6 rounded-lg border"
+            style={{
+              backgroundColor: `${colors.primary}10`,
+              borderColor: `${colors.primary}30`,
+              borderRadius: `${borderRadius}px`
+            }}
+          >
+            <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+              {/* Address */}
+              <div className="flex-1">
+                <div className="flex items-start gap-3">
+                  <svg
+                    className="w-5 h-5 mt-0.5 flex-shrink-0"
+                    fill="none"
+                    stroke={colors.primary}
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+                    />
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
+                    />
+                  </svg>
+                  <div>
+                    <p
+                      className="font-medium mb-1"
+                      style={{
+                        color: colors.text,
+                        fontFamily: typography?.bodyFont || 'inherit'
+                      }}
+                      {...(enableInlineEditing && {
+                        'data-editable': true,
+                        'data-section-id': sectionId,
+                        'data-field-path': 'settings.address'
+                      })}
+                    >
+                      {address || 'Add your address'}
+                    </p>
+                    {address && (
+                      <a
+                        href={directionsUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-sm underline hover:no-underline"
+                        style={{ color: colors.primary }}
+                      >
+                        View in Google Maps �
+                      </a>
+                    )}
+                  </div>
+                </div>
+              </div>
+
+              {/* Get Directions Button */}
+              {address && (
+                <a
+                  href={directionsUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="px-6 py-3 rounded-lg font-semibold transition-all hover:opacity-90 text-center"
+                  style={{
+                    backgroundColor: colors.primary,
+                    color: '#FFFFFF'
+                  }}
+                >
+                  {directionsButtonText}
+                </a>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Fallback when no address */}
+        {!address && (
+          <div
+            className="p-12 rounded-lg border-2 border-dashed text-center"
+            style={{
+              borderColor: `${colors.primary}30`,
+              borderRadius: `${borderRadius}px`
+            }}
+          >
+            <svg
+              className="w-12 h-12 mx-auto mb-4"
+              fill="none"
+              stroke={colors.primary}
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+              />
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
+              />
+            </svg>
+            <p style={{ color: colors.text, opacity: 0.6 }}>
+              Add your business address to display a map
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default LocationMap;

package/components/Sections/Logo.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+export interface LogoProps {
+  logoUrl?: string;
+  fallbackText?: string;
+  size?: 'small' | 'medium' | 'large';
+  alignment?: 'left' | 'center' | 'right';
+  colors: {
+    primary: string;
+  };
+  enableInlineEditing?: boolean;
+  sectionId?: string;
+}
+
+export function Logo({ logoUrl, fallbackText, size = 'medium', alignment = 'center', colors, enableInlineEditing = false, sectionId = '' }: LogoProps) {
+  const logoSizeMap = {
+    small: 80,
+    medium: 120,
+    large: 160
+  };
+  const logoSize = logoSizeMap[size];
+  const alignmentClass = alignment === 'center' ? 'justify-center' : alignment === 'right' ? 'justify-end' : 'justify-start';
+
+  return (
+    <div className={`container mx-auto px-4 flex ${alignmentClass}`}>
+      {logoUrl ? (
+        <img
+          src={logoUrl}
+          alt={fallbackText || 'Logo'}
+          className="object-contain"
+          style={{ height: `${logoSize}px`, width: 'auto' }}
+        />
+      ) : fallbackText ? (
+        <div
+          className="flex items-center justify-center rounded-full font-bold"
+          style={{
+            width: `${logoSize}px`,
+            height: `${logoSize}px`,
+            backgroundColor: colors.primary,
+            color: '#FFFFFF',
+            fontSize: `${logoSize * 0.4}px`
+          }}
+        >
+          {fallbackText.slice(0, 2).toUpperCase()}
+        </div>
+      ) : (
+        <div
+          className="rounded-full"
+          style={{
+            width: `${logoSize}px`,
+            height: `${logoSize}px`,
+            backgroundColor: colors.primary,
+            opacity: 0.2
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+export default Logo;

package/components/Sections/MinimalFooter.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+export interface MinimalFooterProps {
+  footerText?: string;
+  alignment?: 'left' | 'center' | 'right';
+  showSocial?: boolean;
+  showContact?: boolean;
+  showLinks?: boolean;
+  colors: {
+    primary: string;
+    text: string;
+  };
+  enableInlineEditing?: boolean;
+  sectionId?: string;
+}
+
+export function MinimalFooter({
+  footerText,
+  alignment = 'center',
+  showSocial = true,
+  showContact = true,
+  showLinks = true,
+  colors,
+  enableInlineEditing = false,
+  sectionId = ''
+}: MinimalFooterProps) {
+  const alignClass = alignment === 'center' ? 'text-center' : alignment === 'right' ? 'text-right' : 'text-left';
+
+  return (
+    <footer
+      className={`border-t py-8`}
+      style={{ borderColor: colors.primary }}
+    >
+      <div className={`container mx-auto px-4 ${alignClass}`}>
+        <div className="space-y-4">
+          {showSocial && (
+            <div className={`flex gap-4 ${alignment === 'center' ? 'justify-center' : alignment === 'right' ? 'justify-end' : 'justify-start'}`}>
+              {['instagram', 'facebook', 'twitter'].map((platform) => (
+                <a
+                  key={platform}
+                  href={`https://${platform}.com/`}
+                  className="w-8 h-8 rounded-full flex items-center justify-center transition-transform hover:scale-110"
+                  style={{ backgroundColor: colors.primary, color: '#FFFFFF' }}
+                >
+                  {platform[0].toUpperCase()}
+                </a>
+              ))}
+            </div>
+          )}
+          {showContact && (
+            <div className="text-sm opacity-70" style={{ color: colors.text }}>
+              <p>contact@example.com | (555) 123-4567</p>
+            </div>
+          )}
+          {showLinks && (
+            <div className={`flex gap-4 text-sm ${alignment === 'center' ? 'justify-center' : alignment === 'right' ? 'justify-end' : 'justify-start'}`}>
+              <a href="/privacy" className="hover:opacity-70" style={{ color: colors.text }}>Privacy</a>
+              <a href="/terms" className="hover:opacity-70" style={{ color: colors.text }}>Terms</a>
+            </div>
+          )}
+          <p
+            className="text-sm opacity-60"
+            style={{ color: colors.text }}
+            {...(enableInlineEditing && {
+              'data-editable': true,
+              'data-section-id': sectionId,
+              'data-field-path': 'settings.footerText'
+            })}
+          >
+            {footerText || '© 2025 Your Business'}
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+export default MinimalFooter;

package/components/Sections/MinimalHeader.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+export interface MinimalHeaderProps {
+  brandName?: string;
+  logoUrl?: string;
+  style?: 'logo' | 'text' | 'both';
+  alignment?: 'left' | 'center' | 'right';
+  sticky?: boolean;
+  colors: {
+    primary: string;
+    text: string;
+  };
+  typography: {
+    headingFont?: string;
+  };
+  enableInlineEditing?: boolean;
+  sectionId?: string;
+}
+
+export function MinimalHeader({
+  brandName,
+  logoUrl,
+  style = 'both',
+  alignment = 'left',
+  sticky = true,
+  colors,
+  typography,
+  enableInlineEditing = false,
+  sectionId = ''
+}: MinimalHeaderProps) {
+  const alignmentClass = alignment === 'center' ? 'justify-center' : alignment === 'right' ? 'justify-end' : 'justify-start';
+
+  return (
+    <header
+      className={`${sticky ? 'sticky top-0 z-50 backdrop-blur-sm' : ''} border-b`}
+      style={{
+        backgroundColor: sticky ? 'rgba(255, 255, 255, 0.8)' : 'transparent',
+        borderColor: colors.primary
+      }}
+    >
+      <div className={`container mx-auto px-4 py-4 flex items-center ${alignmentClass}`}>
+        <div className="flex items-center gap-3">
+          {(style === 'logo' || style === 'both') && (
+            <>
+              {logoUrl ? (
+                <img
+                  src={logoUrl}
+                  alt={brandName || 'Logo'}
+                  className="h-10 w-auto object-contain"
+                />
+              ) : (
+                <div
+                  className="w-10 h-10 rounded-full"
+                  style={{ backgroundColor: colors.primary, opacity: 0.2 }}
+                />
+              )}
+            </>
+          )}
+          {(style === 'text' || style === 'both' || !style) && (
+            <h1
+              className="text-2xl font-bold"
+              style={{
+                fontFamily: typography.headingFont,
+                color: colors.text
+              }}
+              {...(enableInlineEditing && {
+                'data-editable': true,
+                'data-section-id': sectionId,
+                'data-field-path': 'settings.brandName'
+              })}
+            >
+              {brandName || 'Your Brand'}
+            </h1>
+          )}
+        </div>
+      </div>
+    </header>
+  );
+}
+
+export default MinimalHeader;