Claude x Figma によるコンポーネント開発のはじめ方

./
├── README.md
├── app
│   ├── page.tsx … 更新
│   ├── contact
│   │   └── page.tsx … 新規作成
│   └── profile
│       └── page.tsx … 新規作成
├── components
│   ├── navigation
│   │   └── Tabs.tsx … 新規作成
│   ├── pagination
│   │   └── Pagination.tsx … 新規作成
│   └── table
│       └── UserTable.tsx … 新規作成
└── data
    └── users.ts … 新規作成

'use client';

import React, { useState } from 'react';
import { Container, Card } from 'react-bootstrap';
import Tabs from '../components/navigation/Tabs';
import UserTable from '../components/table/UserTable';
import Pagination from '../components/pagination/Pagination';
import { users } from '../data/users';

export default function Home() {
  const [activeTab, setActiveTab] = useState('home');
  const [currentPage, setCurrentPage] = useState(1);
  const totalPages = 3; // For demonstration purposes

  const handleTabSelect = (key: string | null) => {
    if (key) {
      setActiveTab(key);
      if (key !== 'home') {
        // Navigate to the selected tab
        window.location.href = `/${key}`;
      }
    }
  };

  const handlePageChange = (page: number) => {
    setCurrentPage(page);
  };

  return (
    <Container className="py-4">
      <Card>
        <Card.Header>
          <h4>Home</h4>
        </Card.Header>
        <Card.Body>
          <Tabs activeKey={activeTab} onSelect={handleTabSelect} />
          <UserTable users={users} />
          <Pagination 
            currentPage={currentPage} 
            totalPages={totalPages} 
            onPageChange={handlePageChange} 
          />
        </Card.Body>
      </Card>
    </Container>
  );
}

import React from 'react';
import { Nav } from 'react-bootstrap';

interface TabsProps {
  activeKey: string;
  onSelect?: (key: string | null) => void;
}

const Tabs: React.FC<TabsProps> = ({ activeKey, onSelect }) => {
  return (
    <Nav variant="tabs" activeKey={activeKey} onSelect={onSelect} className="mb-3">
      <Nav.Item>
        <Nav.Link eventKey="home">Home</Nav.Link>
      </Nav.Item>
      <Nav.Item>
        <Nav.Link eventKey="profile">Profile</Nav.Link>
      </Nav.Item>
      <Nav.Item>
        <Nav.Link eventKey="contact">Contact</Nav.Link>
      </Nav.Item>
    </Nav>
  );
};

export default Tabs;

import React from 'react';
import { Table } from 'react-bootstrap';

interface User {
  id: number;
  firstName: string;
  lastName: string;
  handle: string;
}

interface UserTableProps {
  users: User[];
}

const UserTable: React.FC<UserTableProps> = ({ users }) => {
  return (
    <Table hover>
      <thead>
        <tr>
          <th>#</th>
          <th>First</th>
          <th>Last</th>
          <th>Handle</th>
        </tr>
      </thead>
      <tbody>
        {users.map((user) => (
          <tr key={user.id}>
            <td>{user.id}</td>
            <td>{user.firstName}</td>
            <td>{user.lastName}</td>
            <td>{user.handle}</td>
          </tr>
        ))}
      </tbody>
    </Table>
  );
};

export default UserTable;

export interface User {
  id: number;
  firstName: string;
  lastName: string;
  handle: string;
}

export const users: User[] = [
  {
    id: 1,
    firstName: 'Mark',
    lastName: 'Otto',
    handle: '@mdo'
  },
  {
    id: 2,
    firstName: 'Jacob',
    lastName: 'Thornton',
    handle: '@fat'
  },
  {
    id: 3,
    firstName: 'Larry',
    lastName: 'the Bird',
    handle: '@twitter'
  }
];

'use client';

import React, { useState } from 'react';
import { Container, Card, Form, Button } from 'react-bootstrap';
import Tabs from '../../components/navigation/Tabs';

export default function Contact() {
  const [activeTab, setActiveTab] = useState('contact');

  const handleTabSelect = (key: string | null) => {
    if (key) {
      setActiveTab(key);
      if (key !== 'contact') {
        // Navigate to the selected tab
        window.location.href = key === 'home' ? '/' : `/${key}`;
      }
    }
  };

  return (
    <Container className="py-4">
      <Card>
        <Card.Header>
          <h4>Contact</h4>
        </Card.Header>
        <Card.Body>
          <Tabs activeKey={activeTab} onSelect={handleTabSelect} />
          <div className="mt-4">
            <h5>Contact Us</h5>
            <Form>
              <Form.Group className="mb-3" controlId="formName">
                <Form.Label>Name</Form.Label>
                <Form.Control type="text" placeholder="Enter your name" />
              </Form.Group>

              <Form.Group className="mb-3" controlId="formEmail">
                <Form.Label>Email address</Form.Label>
                <Form.Control type="email" placeholder="Enter your email" />
                <Form.Text className="text-muted">
                  We'll never share your email with anyone else.
                </Form.Text>
              </Form.Group>

              <Form.Group className="mb-3" controlId="formMessage">
                <Form.Label>Message</Form.Label>
                <Form.Control as="textarea" rows={3} placeholder="Enter your message" />
              </Form.Group>

              <Button variant="primary" type="submit">
                Submit
              </Button>
            </Form>
          </div>
        </Card.Body>
      </Card>
    </Container>
  );
}