■P219

src/data/dummyTaskList.js
────────────────
export const dummyTaskList = [
  {
    id: 1,
    title: "Reactを勉強する",
    status: "notStarted",
  },
  {
    id: 2,
    title: "夕食を作る",
    status: "completed",
  },
  {
    id: 3,
    title: "部屋を掃除する",
    status: "trashed",
  },
];
────────────────


■P220

src/components/TaskItem.jsx
────────────────
import { cva } from "class-variance-authority";

// 入力フィールドのスタイルを定義
const inputVariants = cva("flex-1 border px-2 py-1 border-gray-300 bg-white", {
  variants: {
    completed: {
      true: "text-gray-400 line-through disabled:cursor-not-allowed", // 完了したタスクのスタイル
    },
  },
});

export function TaskItem({ task }) {
  return (
    <div className="flex items-center gap-3 rounded bg-white px-4 py-2">
      {/* タスクのタイトルを編集可能な入力フィールド */}
      <input
        type="text"
        className={inputVariants({ completed: task.status === "completed" })} // タスクが完了している場合のスタイルを適用
        defaultValue={task.title} // タスクの現在のタイトルを表示
        disabled={task.status === "completed"} // 完了したタスクの場合、編集を無効化
      />
    </div>
  );
}
────────────────


■P221

src/components/TaskList.jsx
────────────────
import { dummyTaskList } from "../data/dummyTaskList";
import { TaskItem } from "./TaskItem";

export function TaskList() {
  return (
    <div className="relative">
      <div className="space-y-3 px-10 pb-10">
        {dummyTaskList.length === 0 ? (
          // タスクが0件の場合はフォールバックを表示
          <p className="text-center text-sm">タスクがありません</p>
        ) : (
          dummyTaskList.map((task) => (
            <TaskItem key={task.id} task={task} /> // 各タスクアイテムを表示
         ))
        )}
      </div>
    </div>
  );
}
────────────────


■P222

src/App.jsx
────────────────
import { createBrowserRouter, Outlet, RouterProvider } from "react-router-dom";
import { AppLayout } from "./components/AppLayout";
import { TaskList } from "./components/TaskList";

const router = createBrowserRouter([
  {
    element: (
      <AppLayout>
        <Outlet />
      </AppLayout>
    ),
    children: [
      {
        path: "/",
        element: <TaskList />,
      },
      {
        path: "/trash",
        element: <div>ゴミ箱</div>,
      },
    ],
  },
]);

const App = () => {
  return <RouterProvider router={router} />;
};

export default App;
────────────────

