UIのレビュー

[washogo]

一覧画面

• 作成ボタンを押して表示するという実装になっていますが、以下のようなtodoの配列を表示するイメージでした！
• 開発の現場で割と用いる方法なのでご参考までに！

  
  // ・TODO詳細遷移
  // ・フィルター
  // ・ソート
  "use client";
  import {
  Box,
  Button,
  Card,
  CardBody,
  FormControl,
  FormLabel,
  HStack,
  } from "@chakra-ui/react";

// todoの配列（仮のデータ） const MOCK_TODOS = [ { id: 1, title: "サンプルTodoタイトル", content: "サンプルTodo内容", status: "未完了", }, { id: 2, title: "サンプルTodoタイトル", content: "サンプルTodo内容", status: "未完了", }, { id: 3, title: "サンプルTodoタイトル", content: "サンプルTodo内容", status: "未完了", }, ];

const TodoList = () => { return ( <>

Todo作成

  {MOCK_TODOS.map((todo, id) => (
    <Card key={id} w={700} mx={370} mt={5} shadow="lg">
      <CardBody>
        <FormControl>
          <HStack>
            <FormLabel>Todo番号：{todo.id}</FormLabel>
          </HStack>
          <br />
          <HStack>
            <FormLabel>Todoタイトル：{todo.title}</FormLabel>
          </HStack>
          <br />
          <HStack>
            <FormLabel>Todo内容：{todo.content}</FormLabel>
          </HStack>
          <br />
          <HStack>
            <FormLabel>Todoステータス：{todo.status}</FormLabel>
          </HStack>
        </FormControl>
      </CardBody>
    </Card>
  ))}
</>

); };

export default TodoList;

## 詳細画面
- 入力できないように工夫されていて良いですね！
- `FormControl`と`FormLabel`は本来の使い方と異なるので、`FormControl`は`Box`に変更し、`FormLabel`は`Text`に変更すると良さそうです！（しっかりとスタイリングしているので、表示はそのまま綺麗にされると思います！）
→一覧画面も同様ですね！