forked from semi-23e/nextjs-todo-tutorial
75 lines
2.4 KiB
TypeScript
75 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
|
|
// Todo型の定義
|
|
type Todo = {
|
|
id: number;
|
|
text: string;
|
|
completed: boolean;
|
|
};
|
|
|
|
export default function Home() {
|
|
// 状態管理の準備（サンプルデータ付き）
|
|
const [todos, setTodos] = useState<Todo[]>([
|
|
{ id: 1, text: "TypeScriptを学ぶ", completed: false },
|
|
{ id: 2, text: "Reactの基礎を理解する", completed: true },
|
|
{ id: 3, text: "TODOアプリを作る", completed: false },
|
|
]);
|
|
|
|
return (
|
|
<main className="min-h-screen p-8 bg-gray-50 dark:bg-gray-900">
|
|
<div className="max-w-4xl mx-auto">
|
|
<h1 className="text-4xl font-bold text-center text-gray-800 dark:text-gray-100 mb-8">
|
|
私のTODOアプリ
|
|
</h1>
|
|
|
|
{/* TODO入力フォーム */}
|
|
<div className="mb-8">
|
|
<form className="flex gap-2">
|
|
<input
|
|
type="text"
|
|
placeholder="新しいTODOを入力..."
|
|
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
className="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
|
|
>
|
|
追加
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
{/* TODOリスト表示エリア */}
|
|
<div className="space-y-2">
|
|
{todos.map((todo) => (
|
|
<div
|
|
key={todo.id}
|
|
className="flex items-center gap-3 p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
checked={todo.completed}
|
|
className="w-5 h-5 text-blue-500 rounded focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
<span
|
|
className={`flex-1 ${
|
|
todo.completed
|
|
? "line-through text-gray-500 dark:text-gray-400"
|
|
: "text-gray-800 dark:text-gray-100"
|
|
}`}
|
|
>
|
|
{todo.text}
|
|
</span>
|
|
<button className="px-3 py-1 text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded transition-colors">
|
|
削除
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|