@brainfish-ai/devdoc 0.1.21 → 0.1.23

package/renderer/components/docs/mdx/landing.tsx

@@ -0,0 +1,684 @@
+'use client'
+
+import React, { useState } from 'react'
+import { cn } from '@/lib/utils'
+import { 
+  Copy, 
+  Check, 
+  ArrowRight, 
+  GithubLogo, 
+  Terminal,
+  ArrowUpRight,
+  RocketLaunch,
+} from '@phosphor-icons/react'
+import { getPhosphorIcon, type PhosphorIconComponent } from '@/lib/utils/icons'
+
+// Direct icon map for commonly used icons (fallback if dynamic import fails)
+const iconMap: Record<string, PhosphorIconComponent> = {
+  'arrow-right': ArrowRight,
+  'github-logo': GithubLogo,
+  'terminal': Terminal,
+  'arrow-up-right': ArrowUpRight,
+  'rocket-launch': RocketLaunch,
+}
+
+/**
+ * Landing Page Components for MDX Documentation
+ * 
+ * These components enable creating custom landing pages similar to skills.sh
+ * with hero sections, command boxes, feature grids, and more.
+ */
+
+/**
+ * Hero Section Component
+ * 
+ * A full-width hero section for landing pages with optional
+ * logo/ASCII art, tagline, and description.
+ */
+interface HeroProps {
+  children?: React.ReactNode
+  className?: string
+  /** Background variant */
+  variant?: 'default' | 'gradient' | 'dark' | 'light' | 'pattern'
+  /** Vertical alignment */
+  align?: 'top' | 'center' | 'bottom'
+  /** Minimum height */
+  minHeight?: 'sm' | 'md' | 'lg' | 'full'
+}
+
+export function Hero({ 
+  children, 
+  className,
+  variant = 'default',
+  align = 'center',
+  minHeight = 'md'
+}: HeroProps) {
+  const variantStyles = {
+    default: 'bg-background text-foreground',
+    gradient: 'bg-gradient-to-b from-background via-background to-muted/30 text-foreground',
+    dark: 'bg-zinc-950 text-white [&_.landing-tagline]:text-zinc-400 [&_.landing-headline]:text-white [&_.landing-description]:text-zinc-300 [&_.landing-button]:border-zinc-600',
+    light: 'bg-white text-zinc-900 [&_.landing-tagline]:text-zinc-500 [&_.landing-headline]:text-zinc-900 [&_.landing-description]:text-zinc-600 [&_.landing-button]:border-zinc-300',
+    pattern: 'bg-background bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-primary/10 via-background to-background text-foreground',
+  }
+  
+  const alignStyles = {
+    top: 'items-start pt-12',
+    center: 'items-center',
+    bottom: 'items-end pb-12',
+  }
+  
+  const heightStyles = {
+    sm: 'min-h-[40vh]',
+    md: 'min-h-[60vh]',
+    lg: 'min-h-[80vh]',
+    full: 'min-h-screen',
+  }
+  
+  return (
+    <section 
+      className={cn(
+        'landing-hero w-full flex flex-col justify-center',
+        variantStyles[variant],
+        alignStyles[align],
+        heightStyles[minHeight],
+        className
+      )}
+    >
+      <div className="landing-hero-content w-full max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+        {children}
+      </div>
+    </section>
+  )
+}
+
+/**
+ * Pre Component
+ * 
+ * Pre-formatted text component for ASCII art, logos, and other
+ * monospace content that needs to preserve whitespace.
+ */
+interface PreProps {
+  children: React.ReactNode
+  className?: string
+  /** Font size preset */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  /** Text alignment */
+  align?: 'left' | 'center' | 'right'
+  /** Text color variant */
+  color?: 'default' | 'muted' | 'primary' | 'white'
+  /** Line height */
+  leading?: 'none' | 'tight' | 'normal' | 'relaxed'
+  /** Hide from screen readers (decorative content) */
+  decorative?: boolean
+}
+
+export function Pre({ 
+  children, 
+  className,
+  size = 'md',
+  align = 'center',
+  color = 'default',
+  leading = 'tight',
+  decorative = false,
+}: PreProps) {
+  const sizeStyles = {
+    xs: 'text-[0.5rem] sm:text-xs',
+    sm: 'text-xs sm:text-sm',
+    md: 'text-sm sm:text-base md:text-lg',
+    lg: 'text-base sm:text-lg md:text-xl lg:text-2xl',
+    xl: 'text-lg sm:text-xl md:text-2xl lg:text-3xl xl:text-4xl',
+  }
+  
+  const alignStyles = {
+    left: 'text-left',
+    center: 'text-center mx-auto',
+    right: 'text-right ml-auto',
+  }
+  
+  const colorStyles = {
+    default: 'text-foreground',
+    muted: 'text-muted-foreground',
+    primary: 'text-primary',
+    white: 'text-white',
+  }
+  
+  const leadingStyles = {
+    none: 'leading-none',
+    tight: 'leading-tight',
+    normal: 'leading-normal',
+    relaxed: 'leading-relaxed',
+  }
+  
+  return (
+    <pre 
+      className={cn(
+        'landing-pre font-mono whitespace-pre select-none overflow-x-auto',
+        sizeStyles[size],
+        alignStyles[align],
+        colorStyles[color],
+        leadingStyles[leading],
+        className
+      )}
+      aria-hidden={decorative}
+    >
+      {children}
+    </pre>
+  )
+}
+
+/**
+ * Tagline Component
+ * 
+ * Displays a prominent tagline or subtitle.
+ */
+interface TaglineProps {
+  children: React.ReactNode
+  className?: string
+  /** Visual style */
+  variant?: 'default' | 'muted' | 'accent'
+  /** Letter spacing */
+  tracking?: 'normal' | 'wide' | 'wider' | 'widest'
+}
+
+export function Tagline({ 
+  children, 
+  className,
+  variant = 'default',
+  tracking = 'wider'
+}: TaglineProps) {
+  const variantStyles = {
+    default: '', // Inherit from parent
+    muted: 'opacity-60',
+    accent: 'text-primary',
+  }
+  
+  const trackingStyles = {
+    normal: 'tracking-normal',
+    wide: 'tracking-wide',
+    wider: 'tracking-wider',
+    widest: 'tracking-widest',
+  }
+  
+  // Use div instead of p to avoid hydration errors when MDX wraps content in <p>
+  return (
+    <div 
+      className={cn(
+        'landing-tagline text-sm sm:text-base font-medium uppercase',
+        variantStyles[variant],
+        trackingStyles[tracking],
+        className
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+/**
+ * Headline Component
+ * 
+ * Large display text for hero headlines.
+ */
+interface HeadlineProps {
+  children: React.ReactNode
+  className?: string
+  /** Size preset */
+  size?: 'md' | 'lg' | 'xl' | '2xl'
+  /** Font weight */
+  weight?: 'normal' | 'medium' | 'semibold' | 'bold'
+}
+
+export function Headline({ 
+  children, 
+  className,
+  size = 'xl',
+  weight = 'normal'
+}: HeadlineProps) {
+  const sizeStyles = {
+    md: 'text-xl sm:text-2xl md:text-3xl',
+    lg: 'text-2xl sm:text-3xl md:text-4xl',
+    xl: 'text-3xl sm:text-4xl md:text-5xl',
+    '2xl': 'text-4xl sm:text-5xl md:text-6xl',
+  }
+  
+  const weightStyles = {
+    normal: 'font-normal',
+    medium: 'font-medium',
+    semibold: 'font-semibold',
+    bold: 'font-bold',
+  }
+  
+  return (
+    <h1 
+      className={cn(
+        'landing-headline leading-tight',
+        sizeStyles[size],
+        weightStyles[weight],
+        className
+      )}
+    >
+      {children}
+    </h1>
+  )
+}
+
+/**
+ * Description Component
+ * 
+ * Body text for hero descriptions.
+ */
+interface DescriptionProps {
+  children: React.ReactNode
+  className?: string
+  /** Size preset */
+  size?: 'sm' | 'md' | 'lg'
+  /** Max width */
+  maxWidth?: 'sm' | 'md' | 'lg' | 'full'
+}
+
+export function Description({ 
+  children, 
+  className,
+  size = 'lg',
+  maxWidth = 'lg'
+}: DescriptionProps) {
+  const sizeStyles = {
+    sm: 'text-sm sm:text-base',
+    md: 'text-base sm:text-lg',
+    lg: 'text-lg sm:text-xl',
+  }
+  
+  const maxWidthStyles = {
+    sm: 'max-w-md',
+    md: 'max-w-xl',
+    lg: 'max-w-2xl',
+    full: 'max-w-full',
+  }
+  
+  // Use div instead of p to avoid hydration errors when MDX wraps content in <p>
+  return (
+    <div 
+      className={cn(
+        'landing-description opacity-80 mx-auto',
+        sizeStyles[size],
+        maxWidthStyles[maxWidth],
+        className
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+/**
+ * Command Box Component
+ * 
+ * A copyable command display with a dark background,
+ * similar to the skills.sh installation command box.
+ */
+interface CommandBoxProps {
+  /** The command to display */
+  command: string
+  /** Optional prefix like $ or > */
+  prefix?: string
+  className?: string
+  /** Visual variant - 'default' is dark (terminal style), 'light' adapts to theme */
+  variant?: 'default' | 'minimal' | 'bordered' | 'light'
+}
+
+export function CommandBox({ 
+  command, 
+  prefix = '$',
+  className,
+  variant = 'default'
+}: CommandBoxProps) {
+  const [copied, setCopied] = useState(false)
+  
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(command)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch (err) {
+      console.error('Failed to copy:', err)
+    }
+  }
+  
+  const variantStyles = {
+    default: 'bg-zinc-950 border border-zinc-800 shadow-lg',
+    minimal: 'bg-zinc-900',
+    bordered: 'bg-zinc-950 border-2 border-zinc-700',
+    light: 'bg-muted border border-border shadow-sm',
+  }
+  
+  const textStyles = {
+    default: 'text-white',
+    minimal: 'text-white',
+    bordered: 'text-white',
+    light: 'text-foreground',
+  }
+  
+  const prefixStyles = {
+    default: 'text-zinc-400',
+    minimal: 'text-zinc-400',
+    bordered: 'text-zinc-400',
+    light: 'text-muted-foreground',
+  }
+  
+  const buttonStyles = {
+    default: 'text-zinc-300 hover:text-white hover:bg-zinc-700',
+    minimal: 'text-zinc-300 hover:text-white hover:bg-zinc-700',
+    bordered: 'text-zinc-300 hover:text-white hover:bg-zinc-700',
+    light: 'text-muted-foreground hover:text-foreground hover:bg-muted-foreground/10',
+  }
+  
+  return (
+    <div 
+      className={cn(
+        'landing-command-box inline-flex items-center gap-3 rounded-lg px-4 py-3',
+        variantStyles[variant],
+        className
+      )}
+    >
+      <code className={cn('flex items-center gap-2 font-mono text-sm sm:text-base', textStyles[variant])}>
+        {prefix && (
+          <span className={cn('select-none', prefixStyles[variant])}>{prefix}</span>
+        )}
+        <span>{command}</span>
+      </code>
+      <button
+        type="button"
+        onClick={handleCopy}
+        className={cn(
+          'p-1.5 rounded transition-colors',
+          'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
+          buttonStyles[variant]
+        )}
+        title="Copy command"
+      >
+        {copied ? (
+          <Check className="h-4 w-4 text-emerald-500" weight="bold" />
+        ) : (
+          <Copy className="h-4 w-4" />
+        )}
+      </button>
+    </div>
+  )
+}
+
+/**
+ * Section Component
+ * 
+ * A full-width section wrapper for landing page content.
+ */
+interface SectionProps {
+  children: React.ReactNode
+  className?: string
+  /** Section ID for anchor links */
+  id?: string
+  /** Background variant */
+  variant?: 'default' | 'muted' | 'dark' | 'light' | 'accent'
+  /** Padding preset */
+  padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl'
+}
+
+export function Section({ 
+  children, 
+  className,
+  id,
+  variant = 'default',
+  padding = 'lg'
+}: SectionProps) {
+  const variantStyles = {
+    default: 'bg-background text-foreground',
+    muted: 'bg-muted/30 text-foreground',
+    dark: 'bg-zinc-950 text-white [&_.landing-tagline]:text-zinc-400 [&_.landing-headline]:text-white [&_.landing-description]:text-zinc-300 [&_.landing-feature-title]:text-white [&_.landing-feature-description]:text-zinc-400 [&_.landing-button]:border-zinc-600',
+    light: 'bg-white text-zinc-900 [&_.landing-tagline]:text-zinc-500 [&_.landing-headline]:text-zinc-900 [&_.landing-description]:text-zinc-600 [&_.landing-feature-title]:text-zinc-900 [&_.landing-feature-description]:text-zinc-600 [&_.landing-button]:border-zinc-300',
+    accent: 'bg-primary/5 text-foreground',
+  }
+  
+  const paddingStyles = {
+    none: '',
+    sm: 'py-8 sm:py-12',
+    md: 'py-12 sm:py-16',
+    lg: 'py-16 sm:py-24',
+    xl: 'py-24 sm:py-32',
+  }
+  
+  return (
+    <section 
+      id={id}
+      className={cn(
+        'landing-section w-full',
+        variantStyles[variant],
+        paddingStyles[padding],
+        className
+      )}
+    >
+      <div className="landing-section-content max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+        {children}
+      </div>
+    </section>
+  )
+}
+
+/**
+ * Center Component
+ * 
+ * Centers content horizontally and optionally vertically.
+ */
+interface CenterProps {
+  children: React.ReactNode
+  className?: string
+  /** Stack children with gap */
+  gap?: 'none' | 'sm' | 'md' | 'lg'
+}
+
+export function Center({ children, className, gap = 'md' }: CenterProps) {
+  const gapStyles = {
+    none: '',
+    sm: 'space-y-2',
+    md: 'space-y-4',
+    lg: 'space-y-8',
+  }
+  
+  return (
+    <div 
+      className={cn(
+        'landing-center flex flex-col items-center text-center',
+        gapStyles[gap],
+        className
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+/**
+ * Feature Grid Component
+ * 
+ * A responsive grid for displaying feature cards.
+ */
+interface FeatureGridProps {
+  children: React.ReactNode
+  className?: string
+  /** Number of columns */
+  cols?: 2 | 3 | 4
+}
+
+export function FeatureGrid({ children, className, cols = 3 }: FeatureGridProps) {
+  const colStyles = {
+    2: 'grid-cols-1 md:grid-cols-2',
+    3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+    4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
+  }
+  
+  return (
+    <div 
+      className={cn(
+        'landing-feature-grid grid gap-6',
+        colStyles[cols],
+        className
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+/**
+ * Feature Item Component
+ * 
+ * Individual feature card with icon, title, and description.
+ */
+interface FeatureItemProps {
+  children?: React.ReactNode
+  title?: string
+  icon?: React.ReactNode
+  className?: string
+}
+
+export function FeatureItem({ children, title, icon, className }: FeatureItemProps) {
+  return (
+    <div 
+      className={cn(
+        'landing-feature-item p-6 rounded-xl border border-border/50 bg-card/50',
+        'hover:border-primary/30 hover:bg-card/80 transition-colors',
+        className
+      )}
+    >
+      {icon && (
+        <div className="landing-feature-icon mb-4 text-primary text-2xl">
+          {icon}
+        </div>
+      )}
+      {title && (
+        <h3 className="landing-feature-title text-lg font-semibold mb-2">
+          {title}
+        </h3>
+      )}
+      {children && (
+        <div className="landing-feature-description text-sm opacity-80">
+          {children}
+        </div>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Button Link Component
+ * 
+ * Styled button links for CTAs.
+ */
+interface ButtonLinkProps {
+  href: string
+  children: React.ReactNode
+  className?: string
+  /** Visual variant */
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost'
+  /** Size preset */
+  size?: 'sm' | 'md' | 'lg'
+  /** Phosphor icon name (e.g., "arrow-right", "github-logo") */
+  icon?: string
+  /** Icon position */
+  iconPosition?: 'left' | 'right'
+}
+
+
+export function ButtonLink({ 
+  href, 
+  children, 
+  className,
+  variant = 'primary',
+  size = 'md',
+  icon,
+  iconPosition = 'right'
+}: ButtonLinkProps) {
+  const variantStyles = {
+    primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
+    secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+    outline: 'border border-current/30 bg-transparent text-current hover:bg-current/10',
+    ghost: 'bg-transparent text-current hover:bg-current/10',
+  }
+  
+  const sizeStyles = {
+    sm: 'px-3 py-1.5 text-sm',
+    md: 'px-4 py-2 text-base',
+    lg: 'px-6 py-3 text-lg',
+  }
+  
+  const iconSizes = {
+    sm: 'h-4 w-4',
+    md: 'h-5 w-5',
+    lg: 'h-5 w-5',
+  }
+  
+  // Try direct map first, then dynamic lookup
+  const IconComponent = icon ? (iconMap[icon] || getPhosphorIcon(icon)) : null
+  
+  return (
+    <a 
+      href={href}
+      className={cn(
+        'landing-button inline-flex items-center justify-center gap-2 rounded-lg font-medium',
+        'transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
+        variantStyles[variant],
+        sizeStyles[size],
+        className
+      )}
+    >
+      {IconComponent && iconPosition === 'left' && (
+        <IconComponent className={iconSizes[size]} weight="bold" />
+      )}
+      {children}
+      {IconComponent && iconPosition === 'right' && (
+        <IconComponent className={iconSizes[size]} weight="bold" />
+      )}
+    </a>
+  )
+}
+
+/**
+ * Spacer Component
+ * 
+ * Adds vertical spacing.
+ */
+interface SpacerProps {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+  className?: string
+}
+
+export function Spacer({ size = 'md', className }: SpacerProps) {
+  const sizeStyles = {
+    xs: 'h-2',
+    sm: 'h-4',
+    md: 'h-8',
+    lg: 'h-12',
+    xl: 'h-16',
+    '2xl': 'h-24',
+  }
+  
+  return <div className={cn('landing-spacer', sizeStyles[size], className)} />
+}
+
+/**
+ * Divider Component
+ * 
+ * Horizontal divider line.
+ */
+interface DividerProps {
+  className?: string
+  variant?: 'solid' | 'dashed' | 'gradient'
+}
+
+export function Divider({ className, variant = 'solid' }: DividerProps) {
+  const variantStyles = {
+    solid: 'border-t border-border',
+    dashed: 'border-t border-dashed border-border',
+    gradient: 'h-px bg-gradient-to-r from-transparent via-border to-transparent border-none',
+  }
+  
+  return <hr className={cn('landing-divider w-full my-8', variantStyles[variant], className)} />
+}