React Component Generator

Create a React component named $ARGUMENTS following this project's conventions.

Project Patterns

This is a Next.js 16 App Router project with:

• •React 19 with TypeScript
• •Tailwind CSS 4 for styling
• •Components organized in src/components/ by feature

Component Structure

Components in this project follow these patterns:

• •src/components/ui/ - Reusable UI components (Button, Input, Panel)
• •src/components/home/ - Home page components
• •src/components/fight/ - Fight display components
• •src/components/admin/ - Admin components

Steps

1. •Determine placement: Based on the component purpose, place it in the appropriate subdirectory
2. •Check existing patterns: Look at similar components in src/components/ for styling and structure patterns
3. •Create component: Use TypeScript with inline props interface
4. •Apply Tailwind: Use Tailwind CSS classes consistent with existing components
5. •Add client directive: Add 'use client' if the component uses hooks, event handlers, or browser APIs

Template

'use client'

interface ComponentNameProps {
  // props here
}

export function ComponentName({ ...props }: ComponentNameProps) {
  return (
    <div className="...">
      {/* component content */}
    </div>
  )
}

Guidelines

• •Use functional components with explicit return types when needed
• •Define props interface in the same file
• •Use Tailwind CSS classes (check globals.css for custom utilities)
• •Export named functions, not default exports
• •Add 'use client' only when needed (hooks, events, browser APIs)
• •Keep components focused and composable