migration wip

2025-12-29 18:18:48 +01:00
parent 292975299d
commit f86785bfb0
182 changed files with 30131 additions and 9321 deletions
--- a/components/content/Section.tsx
+++ b/components/content/Section.tsx
@@ -0,0 +1,170 @@
+import React from 'react';
+import { cn } from '../../lib/utils';
+import { Container } from '../ui/Container';
+
+// Section background options
+type SectionBackground = 'default' | 'light' | 'dark' | 'primary' | 'secondary' | 'gradient';
+
+// Section padding options
+type SectionPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+interface SectionProps {
+  children: React.ReactNode;
+  background?: SectionBackground;
+  padding?: SectionPadding;
+  fullWidth?: boolean;
+  className?: string;
+  id?: string;
+  as?: React.ElementType;
+}
+
+// Helper function to get background styles
+const getBackgroundStyles = (background: SectionBackground) => {
+  switch (background) {
+    case 'light':
+      return 'bg-gray-50';
+    case 'dark':
+      return 'bg-gray-900 text-white';
+    case 'primary':
+      return 'bg-primary text-white';
+    case 'secondary':
+      return 'bg-secondary text-white';
+    case 'gradient':
+      return 'bg-gradient-to-br from-primary to-secondary text-white';
+    default:
+      return 'bg-white';
+  }
+};
+
+// Helper function to get padding styles
+const getPaddingStyles = (padding: SectionPadding) => {
+  switch (padding) {
+    case 'none':
+      return 'py-0';
+    case 'sm':
+      return 'py-4 sm:py-6';
+    case 'md':
+      return 'py-8 sm:py-12';
+    case 'lg':
+      return 'py-12 sm:py-16';
+    case 'xl':
+      return 'py-16 sm:py-20 md:py-24';
+    case '2xl':
+      return 'py-20 sm:py-24 md:py-32';
+    default:
+      return 'py-12 sm:py-16';
+  }
+};
+
+export const Section: React.FC<SectionProps> = ({
+  children,
+  background = 'default',
+  padding = 'md',
+  fullWidth = false,
+  className = '',
+  id,
+  as: Component = 'section',
+}) => {
+  const sectionClasses = cn(
+    'w-full',
+    getBackgroundStyles(background),
+    getPaddingStyles(padding),
+    className
+  );
+
+  const content = fullWidth ? (
+    <div className={sectionClasses} id={id}>
+      {children}
+    </div>
+  ) : (
+    <section className={sectionClasses} id={id}>
+      <Container maxWidth="6xl" padding="md">
+        {children}
+      </Container>
+    </section>
+  );
+
+  if (Component !== 'section' && !fullWidth) {
+    return (
+      <Component className={sectionClasses} id={id}>
+        <Container maxWidth="6xl" padding="md">
+          {children}
+        </Container>
+      </Component>
+    );
+  }
+
+  return content;
+};
+
+// Sub-components for common section patterns
+export const SectionHeader: React.FC<{
+  title: string;
+  subtitle?: string;
+  align?: 'left' | 'center' | 'right';
+  className?: string;
+}> = ({ title, subtitle, align = 'center', className = '' }) => {
+  const alignment = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right',
+  }[align];
+
+  return (
+    <div className={cn('mb-8 md:mb-12', alignment, className)}>
+      <h2 className={cn(
+        'text-3xl md:text-4xl font-bold mb-3',
+        'leading-tight tracking-tight'
+      )}>
+        {title}
+      </h2>
+      {subtitle && (
+        <p className={cn(
+          'text-lg md:text-xl',
+          'max-w-3xl mx-auto',
+          'opacity-90'
+        )}>
+          {subtitle}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export const SectionContent: React.FC<{
+  children: React.ReactNode;
+  className?: string;
+}> = ({ children, className = '' }) => (
+  <div className={cn('space-y-6 md:space-y-8', className)}>
+    {children}
+  </div>
+);
+
+export const SectionGrid: React.FC<{
+  children: React.ReactNode;
+  cols?: 1 | 2 | 3 | 4;
+  gap?: 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+}> = ({ children, cols = 3, gap = 'md', className = '' }) => {
+  const gapClasses = {
+    sm: 'gap-4 md:gap-6',
+    md: 'gap-6 md:gap-8',
+    lg: 'gap-8 md:gap-12',
+    xl: 'gap-10 md:gap-16',
+  }[gap];
+
+  const colClasses = {
+    1: 'grid-cols-1',
+    2: 'grid-cols-1 md:grid-cols-2',
+    3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+    4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
+  }[cols];
+
+  return (
+    <div className={cn('grid', colClasses, gapClasses, className)}>
+      {children}
+    </div>
+  );
+};
+
+export default Section;