lovableを使って爆速でWebアプリをAIに開発してもらう方法

## 概要
TODOリストアプリ
## 技術
- React
- Supabase
## 機能
- タスクを追加することができる
- タスクを削除することができる
- BackLogのようにドラックアンドドロップでタスクのステータスを変更することができる
- supabaseで非同期のステータス更新
- TODOリストのステータス
  - 未着手
  - 処置中
  - 完了
## デザイン
- モダンでかっこいいデザイン
- 白黒基調のシンプルな配色

taskory-dash
├── node_modules
├── public
└── src
    ├── components
    │   ├── ui
    │   │   └── // 細かいUIが入っている
    │   ├── Column.tsx
    │   └── Task.tsx
    ├── hooks
    │   ├── use-mobile.tsx
    │   └── use-toast.ts
    ├── lib
    │   ├── supabase.ts
    │   └── utils.ts
    ├── types
    │   └──task.ts
    └── pages
        ├── Index.tsx
        ├── App.css
        ├── App.tsx
        ├── index.css
        ├── main.tsx
        └── vite-env.d.ts

import { Card } from "@/components/ui/card";
import { Draggable } from "@hello-pangea/dnd";

interface TaskProps {
  id: string;
  content: string;
  index: number;
  onDelete: (id: string) => void;
}

export const Task = ({ id, content, index, onDelete }: TaskProps) => {
  return (
    <Draggable draggableId={id} index={index}>
      {(provided) => (
        <div
          ref={provided.innerRef}
          {...provided.draggableProps}
          {...provided.dragHandleProps}
          className="mb-2"
        >
          <Card className="p-4 hover:shadow-md transition-shadow bg-white">
            <div className="flex justify-between items-center">
              <p className="text-sm text-gray-800">{content}</p>
              <button
                onClick={() => onDelete(id)}
                className="text-red-500 hover:text-red-700 transition-colors"
              >
                ×
              </button>
            </div>
          </Card>
        </div>
      )}
    </Draggable>
  );
};