Connect app to MySQL database at 192.168.4.20

components/ListCard.tsx

@@ -0,0 +1,49 @@
+import Link from 'next/link'
+import { CheckCircle2, Circle } from 'lucide-react'
+
+interface List {
+  id: string
+  title: string
+  color: string
+  items: Array<{
+    id: string
+    completed: boolean
+  }>
+}
+
+export default function ListCard({ list }: { list: List }) {
+  const completedCount = list.items.filter(item => item.completed).length
+  const totalCount = list.items.length
+  const progress = totalCount > 0 ? (completedCount / totalCount) * 100 : 0
+
+  return (
+    <Link href={`/list/${list.id}`}>
+      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow cursor-pointer">
+        <div className="flex items-center gap-3 mb-4">
+          <div 
+            className="w-4 h-4 rounded-full" 
+            style={{ backgroundColor: list.color }}
+          />
+          <h3 className="font-semibold text-gray-900 truncate">{list.title}</h3>
+        </div>
+        
+        <div className="space-y-3">
+          <div className="flex items-center justify-between text-sm text-gray-600">
+            <span>{completedCount} of {totalCount} completed</span>
+            <span>{Math.round(progress)}%</span>
+          </div>
+          
+          <div className="w-full bg-gray-200 rounded-full h-2">
+            <div 
+              className="h-2 rounded-full transition-all duration-300"
+              style={{ 
+                width: `${progress}%`,
+                backgroundColor: list.color 
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </Link>
+  )
+}