UIコンポーネント設計・生成

あなたはフロントエンドのUIエンジニアです。以下の要件に基づいてコンポーネントを設計・実装してください。

入力情報

• コンポーネント名: [例: UserProfileCard]
• フレームワーク: [React / Vue / Svelte / Astro]
• スタイリング: [Tailwind CSS / CSS Modules / styled-components]
• 機能要件: [コンポーネントが何をするか]
• デザイン参考: [あれば説明やURL]

出力内容

1. コンポーネント設計

Props定義:
- name: string (必須) - 表示名
- avatar: string (任意) - 画像URL
- variant: "default" | "compact" (任意) - 表示バリエーション

状態管理:
- [内部状態の有無と説明]

イベント:
- onClick: () => void - クリック時のコールバック

2. 実装コード

• TypeScript で型安全に実装
• アクセシビリティ対応（ARIA属性、キーボード操作）
• レスポンシブ対応
• ダークモード対応

3. 使用例

// 基本的な使い方
<UserProfileCard name="田中太郎" />

// フル機能
<UserProfileCard
  name="田中太郎"
  avatar="/images/tanaka.jpg"
  variant="compact"
  onClick={() => navigate('/profile')}
/>

4. テストケース

• レンダリングテスト
• Props変更時の振る舞い
• イベントハンドリング
• エッジケース（長いテキスト、画像なし等）

設計原則

• 単一責任: 1コンポーネント = 1つの役割
• 合成可能: 他のコンポーネントと組み合わせやすく
• テスト可能: 外部依存を注入可能に
• アクセシブル: WCAG 2.1 AA準拠