import { Button, Card, Input } from 'reacui';

function MyComponent() {
  return (
    <div>
      <Card className="p-4">
        <h2 className="text-xl font-bold">Hello World</h2>
        <p className="mt-2">This is a simple card component with custom content.</p>
        <div className="mt-4">
          <Button variant="primary">Click Me</Button>
        </div>
      </Card>
    </div>
  );
}

// Default button
<Button variant="primary">Default Button</Button>

// Customized button with Tailwind classes
<Button 
  variant="primary"
  className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 border-none shadow-lg"
>
  Customized Button
</Button>

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          /* ... */
          600: '#0284c7',  // Your primary brand color
          /* ... */
          900: '#0c4a6e',
        },
        secondary: {
          /* Your secondary colors */
        },
      },
    },
  },
}

import { useState } from 'react';
import { Button, Card, Input, Checkbox, Select } from 'reacui';

function SignupForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    password: '',
    role: '',
    agreeToTerms: false
  });
  
  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: type === 'checkbox' ? checked : value
    }));
  };
  
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form submitted:', formData);
    // Submit to your API
  };
  
  return (
    <Card className="p-6 max-w-md mx-auto">
      <h2 className="text-xl font-bold mb-4">Create Account</h2>
      
      <form onSubmit={handleSubmit}>
        <div className="space-y-4">
          <Input
            label="Full Name"
            name="name"
            value={formData.name}
            onChange={handleChange}
            required
          />
          
          <Input
            label="Email Address"
            name="email"
            type="email"
            value={formData.email}
            onChange={handleChange}
            required
          />
          
          <Input
            label="Password"
            name="password"
            type="password"
            value={formData.password}
            onChange={handleChange}
            required
          />
          
          <Select
            label="Role"
            name="role"
            value={formData.role}
            onChange={handleChange}
            required
          >
            <option value="">Select a role</option>
            <option value="developer">Developer</option>
            <option value="designer">Designer</option>
            <option value="manager">Manager</option>
          </Select>
          
          <Checkbox
            name="agreeToTerms"
            checked={formData.agreeToTerms}
            onChange={handleChange}
            label="I agree to the terms and conditions"
            required
          />
          
          <Button type="submit" variant="primary" className="w-full">
            Create Account
          </Button>
        </div>
      </form>
    </Card>
  );
}

import { useForm } from 'react-hook-form';
import { Button, Input, Checkbox } from 'reacui';

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  
  const onSubmit = (data) => {
    console.log('Form submitted:', data);
    // Submit to your API
  };
  
  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      <Input
        label="Email"
        error={errors.email?.message}
        {...register('email', { 
          required: 'Email is required',
          pattern: {
            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,}$/i,
            message: 'Invalid email address'
          }
        })}
      />
      
      <Input
        type="password"
        label="Password"
        error={errors.password?.message}
        {...register('password', { 
          required: 'Password is required',
          minLength: {
            value: 8,
            message: 'Password must be at least 8 characters'
          }
        })}
      />
      
      <Checkbox
        label="Remember me"
        {...register('remember')}
      />
      
      <Button type="submit" variant="primary">
        Sign In
      </Button>
    </form>
  );
}

// Component Composition
function Layout({ children }) {
  return (
    <div className="layout">
      {children}
    </div>
  );
}

function Sidebar({ children }) {
  return (
    <aside className="sidebar">
      {children}
    </aside>
  );
}

function Content({ children }) {
  return (
    <main className="content">
      {children}
    </main>
  );
}

function Dashboard() {
  return (
    <Layout>
      <Sidebar>
        <NavLinks />
        <ThemeToggle />
      </Sidebar>
      <Content>
        <Header />
        <DataGrid />
        <Footer />
      </Content>
    </Layout>
  );
}