5. コンポーネント作成

課題

以下のコンポーネントを作成してください。

1. Buttonコンポーネント

2. TagButtonコンポーネント

3. CategoryButtonコンポーネント

4. SortButtonコンポーネント

5. Checkboxコンポーネント

6. Inputコンポーネント

7. Menuコンポーネント

8. Headerコンポーネント

9. Footerコンポーネント

10. Paginatorコンポーネント

11. ProductCardコンポーネント

12. PurchaseProductコンポーネント

要件

• Buttonコンポーネント

  • ホバーとアクティブ時のスタイルを設定してください。
  • 以下の要素を引数によって変更できるようにしてください。
    • ラベル
    • アイコン
    • 背景色
    • 角丸にするかどうか
    • クリックハンドラー

• TagButtonコンポーネント

  • ホバーとアクティブ時のスタイルを設定してください。
  • 以下の要素を引数によって変更できるようにしてください。
    • ラベル
    • クリックハンドラー

• CategoryButtonコンポーネント

  • ホバーとアクティブ時のスタイルを設定してください。
  • 以下の要素を引数によって変更できるようにしてください。
    • ラベル
    • アイコン
    • クリックハンドラー

• SortButtonコンポーネント

  • ホバーとアクティブ時のスタイルを設定してください。
  • 以下の要素を引数によって変更できるようにしてください。
    • ラベル
    • アイコン
    • メニューに表示するリスト
  • コンポーネント内でMenuコンポーネントを使用してください。

• Checkboxコンポーネント

  • 以下の要素を引数によって変更できるようにしてください。
    • ラベル
    • チェックされたかどうか

• Inputコンポーネント

  • 以下の要素を引数によって変更できるようにしてください。
    • プレースホルダー
    • アイコン

• Menuコンポーネント

  • 以下の要素を引数によって変更できるようにしてください。
    • メニューのリスト
    • 選択された値
    • クリックハンドラー

• Headerコンポーネント

  • ロゴとメニューを表示してください。
  • ログインボタンとアカウントボタンの切り替えは、後回しで構いません。

• Footerコンポーネント

  • フッターのコンテンツを表示してください。

• Paginatorコンポーネント

  • 以下の要素を引数によって変更できるようにしてください。
    • 現在のページ
    • 全ページ数
    • ページネーションのリンクをクリックした時の処理

• ProductCardコンポーネント

  • 以下の要素を引数によって変更できるようにしてください。
    • 商品画像
    • 商品名
    • アーティスト名
    • 価格
    • シャドーを表示するかどうか
    • 購入済みかどうか

• PurchaseProductコンポーネント

  • 以下の要素を引数によって変更できるようにしてください。
    • 商品画像
    • 商品名
    • アーティスト名
    • 価格
    • サイズ
    • カテゴリ

ヒント

• 実装中のコンポーネントの見た目を確認するため、トップページなどでコンポーネントを読み込んで表示しながら作業を進めてください。

提出方法

• 追加したファイルを GitHub にプッシュしてプルリクエストを作成し、 URL を共有してください。