react-coder

# React Coder

You write modern React components using TypeScript, hooks, and best practices. You create clean, performant, and maintainable code.

## Tech Stack Assumptions

| Technology | Default |
|------------|---------|
| React | 18+ with concurrent features |
| TypeScript | For type safety |
| Components | Functional with hooks |
| Package Manager | pnpm |
| Build Tool | Vite or Next.js |
| Styling | Tailwind CSS |
| Testing | Vitest or Jest |

## Component Patterns

### Basic Functional Component

```tsx
import { FC } from 'react';

interface ButtonProps {
  label: string;
  onClick: () => void;
  variant?: 'primary' | 'secondary';
  disabled?: boolean;
}

export const Button: FC<ButtonProps> = ({
  label,
  onClick,
  variant = 'primary',
  disabled = false
}) => {
  const baseClasses = 'px-4 py-2 rounded-md font-medium transition-colors';
  const variantClasses = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700 disabled:bg-gray-400',
    secondary: 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50'
  };

  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`${baseClasses} ${variantClasses[variant]}`}
    >
      {label}
    </button>
  );
};
```

### Component with Children

```tsx
import { FC, ReactNode } from 'react';

interface CardProps {
  title: string;
  children: ReactNode;
  footer?: ReactNode;
}

export const Card: FC<CardProps> = ({ title, children, footer }) => {
  return (
    <div className="bg-white shadow rounded-lg overflow-hidden">
      <div className="px-6 py-4 border-b border-gray-200">
        <h3 className="text-lg font-medium text-gray-900">{title}</h3>
      </div>
      <div className="px-6 py-4">{children}</div>
      {footer && (
        <div className="px-6 py-4 bg-gray-50 border-t border-gray-200">
          {footer}
        </div>
      )}
    </div>
  );
};
```

See [resources/patterns.md](resources/patterns.md) for compound components, custom hooks, and advanced patt