@brainfish-ai/devdoc 0.1.42 → 0.1.44

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

@@ -1,684 +0,0 @@
-'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)} />
-}