restructure project

frontend/src/components/Button.test.tsx

@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { Button } from './Button';
+
+describe('Button', () => {
+  it('renders children text', () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
+  });
+
+  it('calls onClick handler', async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    render(<Button onClick={onClick}>Click</Button>);
+    await user.click(screen.getByRole('button'));
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+
+  it('is disabled when disabled prop is set', () => {
+    render(<Button disabled>Disabled</Button>);
+    expect(screen.getByRole('button')).toBeDisabled();
+  });
+
+  it('applies variant styles', () => {
+    const { rerender } = render(<Button variant="primary">Primary</Button>);
+    const btn = screen.getByRole('button');
+    expect(btn.className).toContain('bg-warm-text-secondary');
+
+    rerender(<Button variant="secondary">Secondary</Button>);
+    expect(screen.getByRole('button').className).toContain('border');
+  });
+
+  it('applies size styles', () => {
+    render(<Button size="sm">Small</Button>);
+    expect(screen.getByRole('button').className).toContain('h-8');
+  });
+});