@bailierich/booking-components 2.0.0

package/components/Sections/ServicesPreview.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+// Local interface (not exported to avoid conflicts)
+interface ServicePreview {
+  id: number;
+  name: string;
+  description: string;
+  price: number;
+  duration: number;
+}
+
+export interface ServicesPreviewProps {
+  title?: string;
+  services?: ServicePreview[];
+  layout?: 'grid' | 'list' | 'carousel';
+  columns?: 2 | 3 | 4;
+  showPrices?: boolean;
+  showDuration?: boolean;
+  colors: {
+    primary: string;
+    text: string;
+  };
+  typography: {
+    headingFont?: string;
+  };
+  enableInlineEditing?: boolean;
+  sectionId?: string;
+}
+
+export function ServicesPreview({
+  title,
+  services = [],
+  layout = 'grid',
+  columns = 3,
+  showPrices = true,
+  showDuration = true,
+  colors,
+  typography,
+  enableInlineEditing = false,
+  sectionId = ''
+}: ServicesPreviewProps) {
+  const gridColsMap = {
+    2: 'grid-cols-1 md:grid-cols-2',
+    3: 'grid-cols-1 md:grid-cols-3',
+    4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4'
+  };
+
+  const mockServices = services.length > 0 ? services : [
+    { id: 1, name: 'Haircut & Style', description: 'Professional cut and styling', price: 75, duration: 60 },
+    { id: 2, name: 'Color Treatment', description: 'Full color or highlights', price: 150, duration: 120 },
+    { id: 3, name: 'Deep Conditioning', description: 'Restorative treatment', price: 50, duration: 45 }
+  ];
+
+  const getLayoutClasses = () => {
+    switch (layout) {
+      case 'grid':
+        return `grid ${gridColsMap[columns]} gap-8`;
+      case 'list':
+        return 'flex flex-col gap-4 max-w-3xl mx-auto';
+      case 'carousel':
+        return 'flex overflow-x-auto snap-x gap-6 pb-4';
+      default:
+        return `grid ${gridColsMap[columns]} gap-8`;
+    }
+  };
+
+  return (
+    <section className="py-16 px-6">
+      <div className="max-w-7xl mx-auto">
+        <h2
+          className="text-3xl md:text-4xl font-bold text-center mb-12"
+          style={{ fontFamily: typography.headingFont, color: colors.text }}
+          {...(enableInlineEditing && {
+            'data-editable': true,
+            'data-section-id': sectionId,
+            'data-field-path': 'settings.title'
+          })}
+        >
+          {title || 'Our Services'}
+        </h2>
+        <div className={getLayoutClasses()}>
+          {mockServices.map((service) => (
+            <div
+              key={service.id}
+              className={`p-6 rounded-lg border hover:scale-105 transition-transform shadow-lg ${
+                layout === 'carousel' ? 'snap-center flex-shrink-0 w-80' : ''
+              } ${
+                layout === 'list' ? 'flex items-center gap-6' : ''
+              }`}
+              style={{
+                backgroundColor: 'rgba(255, 255, 255, 0.95)',
+                borderColor: `${colors.primary}20`
+              }}
+            >
+              {layout === 'list' && (
+                <div className="flex-shrink-0 w-24 h-24 rounded-lg" style={{ backgroundColor: colors.primary, opacity: 0.2 }} />
+              )}
+              <div className="flex-1">
+                <h3
+                  className="text-xl font-semibold mb-3"
+                  style={{ color: '#1a1a1a' }}
+                >
+                  {service.name}
+                </h3>
+                <p className="text-sm opacity-80 mb-4" style={{ color: '#333333' }}>
+                  {service.description}
+                </p>
+                <div className={`flex ${layout === 'list' ? 'gap-4' : 'justify-between'} items-center`}>
+                  {showPrices && (
+                    <p className="font-bold text-lg" style={{ color: colors.primary }}>
+                      ${service.price}
+                    </p>
+                  )}
+                  {showDuration && (
+                    <p className="text-sm opacity-70" style={{ color: '#666666' }}>
+                      {service.duration} min
+                    </p>
+                  )}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default ServicesPreview;

package/components/Sections/SocialBar.tsx

@@ -0,0 +1,177 @@
+'use client';
+
+import { Instagram, Facebook, Music, Twitter, Youtube, PinIcon as Pinterest } from 'lucide-react';
+
+export interface SocialBarProps {
+  platforms: string[];
+  socialLinks?: Record<string, string>;
+  style?: 'filled' | 'outline' | 'ghost';
+  size?: 'small' | 'medium' | 'large';
+  position?: 'center' | 'left-vertical' | 'right-vertical';
+  invertIcons?: boolean;
+  colors: {
+    primary: string;
+  };
+  enableInlineEditing?: boolean;
+  sectionId?: string;
+}
+
+export function SocialBar({
+  platforms,
+  socialLinks = {},
+  style = 'filled',
+  size = 'large',
+  position = 'center',
+  invertIcons = false,
+  colors,
+  enableInlineEditing = false,
+  sectionId = ''
+}: SocialBarProps) {
+  const getContrastColor = (hexColor: string) => {
+    const hex = hexColor.replace('#', '');
+    const r = parseInt(hex.substr(0, 2), 16);
+    const g = parseInt(hex.substr(2, 2), 16);
+    const b = parseInt(hex.substr(4, 2), 16);
+    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+    return luminance > 0.5 ? '#000000' : '#FFFFFF';
+  };
+
+  const getSocialIcon = (platform: string) => {
+    const iconSize = size === 'small' ? 20 : size === 'medium' ? 24 : 28;
+
+    switch (platform) {
+      case 'instagram':
+        return <Instagram size={iconSize} />;
+      case 'facebook':
+        return <Facebook size={iconSize} />;
+      case 'tiktok':
+        return <Music size={iconSize} />;
+      case 'twitter':
+        return <Twitter size={iconSize} />;
+      case 'youtube':
+        return <Youtube size={iconSize} />;
+      case 'pinterest':
+        return <Pinterest size={iconSize} />;
+      default:
+        return <Instagram size={iconSize} />;
+    }
+  };
+
+  const getSocialClassName = () => {
+    let sizeClasses = '';
+    switch (size) {
+      case 'small':
+        sizeClasses = 'w-10 h-10 text-lg';
+        break;
+      case 'medium':
+        sizeClasses = 'w-12 h-12 text-xl';
+        break;
+      case 'large':
+        sizeClasses = 'w-14 h-14 text-2xl';
+        break;
+      default:
+        sizeClasses = 'w-14 h-14 text-2xl';
+    }
+
+    let styleClasses = '';
+    switch (style) {
+      case 'filled':
+        styleClasses = 'rounded-full';
+        break;
+      case 'outline':
+        styleClasses = 'rounded-full border-2';
+        break;
+      case 'ghost':
+        styleClasses = 'rounded-full';
+        break;
+      default:
+        styleClasses = 'rounded-full';
+    }
+
+    return `${sizeClasses} ${styleClasses} flex items-center justify-center hover:scale-110 transition-transform`;
+  };
+
+  const getSocialStyle = () => {
+    switch (style) {
+      case 'filled':
+        return {
+          backgroundColor: colors.primary,
+          color: getContrastColor(colors.primary || '#BCB4FF')
+        };
+      case 'outline':
+        return {
+          backgroundColor: 'transparent',
+          borderColor: colors.primary,
+          color: colors.primary
+        };
+      case 'ghost':
+        return {
+          backgroundColor: 'rgba(0,0,0,0.05)',
+          color: colors.primary
+        };
+      default:
+        return {
+          backgroundColor: colors.primary,
+          color: getContrastColor(colors.primary || '#BCB4FF')
+        };
+    }
+  };
+
+  if (position === 'left-vertical' || position === 'right-vertical') {
+    return (
+      <div
+        className={`fixed top-6 z-40 flex flex-col gap-3 ${
+          position === 'left-vertical' ? 'left-4' : 'right-4'
+        }`}
+      >
+        {platforms.map((platform) => {
+          const socialUrl = socialLinks[platform] || `https://${platform}.com/`;
+          return (
+            <a
+              key={platform}
+              href={socialUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className={getSocialClassName()}
+              style={{
+                ...getSocialStyle(),
+                filter: invertIcons ? 'invert(1)' : 'none'
+              }}
+              title={platform.charAt(0).toUpperCase() + platform.slice(1)}
+            >
+              {getSocialIcon(platform)}
+            </a>
+          );
+        })}
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-8 text-center">
+      <div className="flex items-center justify-center gap-4">
+        {platforms.map((platform) => {
+          const socialUrl = socialLinks[platform] || `https://${platform}.com/`;
+          return (
+            <a
+              key={platform}
+              href={socialUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className={getSocialClassName()}
+              style={{
+                ...getSocialStyle(),
+                filter: invertIcons ? 'invert(1)' : 'none'
+              }}
+              title={platform.charAt(0).toUpperCase() + platform.slice(1)}
+            >
+              {getSocialIcon(platform)}
+            </a>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export default SocialBar;

package/components/Sections/Team.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+export interface TeamMember {
+  id: string | number;
+  name: string;
+  role: string;
+  bio: string;
+  image?: string;
+}
+
+export interface TeamProps {
+  title?: string;
+  members?: TeamMember[];
+  colors: {
+    primary: string;
+    text: string;
+  };
+  typography: {
+    headingFont?: string;
+  };
+  enableInlineEditing?: boolean;
+  sectionId?: string;
+}
+
+export function Team({
+  title,
+  members = [],
+  colors,
+  typography,
+  enableInlineEditing = false,
+  sectionId = ''
+}: TeamProps) {
+  const mockTeam = members.length > 0 ? members : [
+    { id: 1, name: 'Sarah Johnson', role: 'Master Stylist', bio: 'Expert in color and styling with 10+ years experience' },
+    { id: 2, name: 'Michael Chen', role: 'Senior Stylist', bio: 'Specializing in precision cuts and modern styles' },
+    { id: 3, name: 'Emma Davis', role: 'Stylist', bio: 'Passionate about creating beautiful transformations' }
+  ];
+
+  return (
+    <section className="py-16 px-6">
+      <div className="max-w-7xl mx-auto">
+        <h2
+          className="text-3xl md:text-4xl font-bold text-center mb-12"
+          style={{ fontFamily: typography.headingFont, color: colors.text }}
+          {...(enableInlineEditing && {
+            'data-editable': true,
+            'data-section-id': sectionId,
+            'data-field-path': 'settings.title'
+          })}
+        >
+          {title || 'Meet Our Team'}
+        </h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {mockTeam.map((member) => (
+            <div key={member.id} className="text-center">
+              <div
+                className="w-32 h-32 rounded-full mx-auto mb-4"
+                style={{ backgroundColor: colors.primary, opacity: 0.2 }}
+              />
+              <h3
+                className="text-xl font-semibold mb-2"
+                style={{ color: colors.text }}
+              >
+                {member.name}
+              </h3>
+              <p className="text-sm mb-3" style={{ color: colors.primary }}>
+                {member.role}
+              </p>
+              <p className="text-sm opacity-80" style={{ color: colors.text }}>
+                {member.bio}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default Team;

package/components/Sections/Testimonials.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+export interface Testimonial {
+  id: string | number;
+  text: string;
+  author: string;
+  rating: number;
+}
+
+export interface TestimonialsProps {
+  title?: string;
+  testimonials?: Testimonial[];
+  layout?: 'grid' | 'carousel';
+  colors: {
+    primary: string;
+    text: string;
+  };
+  typography: {
+    headingFont?: string;
+  };
+  enableInlineEditing?: boolean;
+  sectionId?: string;
+}
+
+export function Testimonials({
+  title,
+  testimonials = [],
+  layout = 'grid',
+  colors,
+  typography,
+  enableInlineEditing = false,
+  sectionId = ''
+}: TestimonialsProps) {
+  const layoutClass = layout === 'carousel'
+    ? 'flex overflow-x-auto snap-x gap-6 pb-4'
+    : 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6';
+
+  const mockTestimonials = testimonials.length > 0 ? testimonials : [
+    { id: 1, text: 'Amazing service! I love my new look.', author: 'Sarah M.', rating: 5 },
+    { id: 2, text: 'Professional and friendly staff.', author: 'Jessica L.', rating: 5 },
+    { id: 3, text: 'Best salon in town!', author: 'Emily R.', rating: 5 }
+  ];
+
+  return (
+    <section className="py-16 px-6">
+      <div className="max-w-7xl mx-auto">
+        <h2
+          className="text-3xl md:text-4xl font-bold text-center mb-12"
+          style={{ fontFamily: typography.headingFont, color: colors.text }}
+          {...(enableInlineEditing && {
+            'data-editable': true,
+            'data-section-id': sectionId,
+            'data-field-path': 'settings.title'
+          })}
+        >
+          {title || 'What Our Clients Say'}
+        </h2>
+        <div className={layoutClass}>
+          {mockTestimonials.map((testimonial) => (
+            <div
+              key={testimonial.id}
+              className={`p-6 rounded-lg bg-white/10 backdrop-blur-sm ${
+                layout === 'carousel' ? 'snap-center flex-shrink-0 w-80' : ''
+              }`}
+            >
+              <div className="flex gap-1 mb-4">
+                {[...Array(5)].map((_, i) => (
+                  <svg
+                    key={i}
+                    className="w-5 h-5"
+                    fill={i < testimonial.rating ? (colors.primary || '#8B5CF6') : '#E5E7EB'}
+                    viewBox="0 0 20 20"
+                  >
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+                  </svg>
+                ))}
+              </div>
+              <p className="mb-4 italic" style={{ color: colors.text }}>
+                "{testimonial.text}"
+              </p>
+              <p className="font-semibold" style={{ color: colors.text }}>
+                {testimonial.author}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default Testimonials;

package/components/Sections/TextSection.tsx

@@ -0,0 +1,116 @@
+'use client';
+
+export interface TextSectionProps {
+  title?: string;
+  content: string;
+  alignment?: 'left' | 'center' | 'right';
+  maxWidth?: 'full' | 'large' | 'medium' | 'small';
+  textSize?: 'small' | 'medium' | 'large';
+  backgroundColor?: string;
+  textColor?: string;
+  paddingY?: 'none' | 'small' | 'medium' | 'large';
+  colors: {
+    primary: string;
+    text: string;
+  };
+  typography?: {
+    headingFont?: string;
+    bodyFont?: string;
+  };
+  enableInlineEditing?: boolean;
+  sectionId?: string;
+}
+
+export function TextSection({
+  title,
+  content,
+  alignment = 'left',
+  maxWidth = 'medium',
+  textSize = 'medium',
+  backgroundColor,
+  textColor,
+  paddingY = 'medium',
+  colors,
+  typography,
+  enableInlineEditing = false,
+  sectionId = ''
+}: TextSectionProps) {
+  // Max width classes
+  const maxWidthMap = {
+    full: 'max-w-full',
+    large: 'max-w-6xl',
+    medium: 'max-w-4xl',
+    small: 'max-w-2xl'
+  };
+
+  // Text alignment
+  const alignmentMap = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right'
+  };
+
+  // Text sizes
+  const textSizeMap = {
+    small: 'text-sm',
+    medium: 'text-base',
+    large: 'text-lg'
+  };
+
+  // Padding
+  const paddingMap = {
+    none: 'py-0',
+    small: 'py-8',
+    medium: 'py-16',
+    large: 'py-24'
+  };
+
+  return (
+    <div
+      className={paddingMap[paddingY]}
+      style={{
+        backgroundColor: backgroundColor || 'transparent'
+      }}
+    >
+      <div className="container mx-auto px-4">
+        <div className={`${maxWidthMap[maxWidth]} mx-auto ${alignmentMap[alignment]}`}>
+          {/* Title */}
+          {title && (
+            <h2
+              className="text-3xl md:text-4xl font-bold mb-6"
+              style={{
+                color: textColor || colors.text,
+                fontFamily: typography?.headingFont || 'inherit'
+              }}
+              {...(enableInlineEditing && {
+                'data-editable': true,
+                'data-section-id': sectionId,
+                'data-field-path': 'settings.title'
+              })}
+            >
+              {title}
+            </h2>
+          )}
+
+          {/* Content */}
+          <div
+            className={`${textSizeMap[textSize]} leading-relaxed whitespace-pre-wrap`}
+            style={{
+              color: textColor || colors.text,
+              fontFamily: typography?.bodyFont || 'inherit'
+            }}
+            {...(enableInlineEditing && {
+              'data-editable': true,
+              'data-section-id': sectionId,
+              'data-field-path': 'settings.content'
+            })}
+          >
+            {content || 'Add your text content here...'}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default TextSection;