Function FormExamples

docs/src/components/Examples/FormExamples.tsx:19–535

()

import { Textarea } from '../ui/Textarea'

export function FormExamples() {
  const [selectedPlan, setSelectedPlan] = useState<string>('')

  const [isDragOver, setIsDragOver] = useState(false)

  const plans = [
    { id: 'free', name: 'Free', price: '$0/month', popular: false },
    { id: 'pro', name: 'Pro', price: '$10/month', popular: true },
    { id: 'team', name: 'Team', price: '$25/month', popular: false },
    { id: 'enterprise', name: 'Enterprise', price: 'Custom', popular: false },
  ]

  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault()
    setIsDragOver(true)
  }

  const handleDragLeave = (e: React.DragEvent) => {
    e.preventDefault()
    setIsDragOver(false)
  }

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault()
    setIsDragOver(false)
    // Handle file drop logic here
  }

  return (
    <div className="card p-8 space-y-12">
      {/* Header Section - Improved hierarchy */}
      <div className="text-center space-y-3">
        <h4 className="heading-3 text-foreground">Form Elements</h4>
        <p className="text-text-secondary text-base leading-relaxed max-w-2xl mx-auto">
          Clean, accessible forms designed for great user experiences
        </p>
        <div className="w-16 h-0.5 bg-gradient-to-r from-accent/50 to-accent mx-auto rounded-full" />
      </div>

      <div className="space-y-12">
        {/* Basic Form Elements - Enhanced layout and spacing */}
        <m.div
          animate={{ opacity: 1, y: 0 }}
          className="space-y-6"
          initial={{ opacity: 0, y: 20 }}
          transition={softSpringPreset}
        >
          <div className="flex items-center gap-3">
            <h5 className="heading-4 text-foreground">Basic Elements</h5>
            <div className="flex-1 h-px bg-border" />
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
            {/* Left Column */}
            <div className="space-y-6">
              <div className="space-y-2">
                <Label className="flex items-center gap-2 ml-3" htmlFor="name">
                  Your Name