first commit

Astitwa2424 · Nov 27, 2024 · 99ad80e · 99ad80e
1 parent b0f30fc
commit 99ad80e
Show file tree

Hide file tree

Showing 13 changed files with 254 additions and 124 deletions.
diff --git a/.gitignore b/.gitignore
@@ -30,11 +30,14 @@ yarn-debug.log*
 yarn-error.log*
 
 # env files (can opt-in for committing if needed)
-.env*
-
+.env
 # vercel
 .vercel
 
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+
+dev.dv*
+
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,18 +9,20 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@prisma/client": "^5.22.0",
+    "next": "15.0.3",
     "react": "19.0.0-rc-66855b96-20241106",
-    "react-dom": "19.0.0-rc-66855b96-20241106",
-    "next": "15.0.3"
+    "react-dom": "19.0.0-rc-66855b96-20241106"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "15.0.3",
     "postcss": "^8",
+    "prisma": "^5.22.0",
     "tailwindcss": "^3.4.1",
-    "eslint": "^8",
-    "eslint-config-next": "15.0.3"
+    "typescript": "^5"
   }
 }
diff --git a/prisma/dev.db b/prisma/dev.db
diff --git a/prisma/migrations/20241126145351_init/migration.sql b/prisma/migrations/20241126145351_init/migration.sql
@@ -0,0 +1,8 @@
+-- CreateTable
+CREATE TABLE "Todo" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "title" TEXT NOT NULL,
+    "complete" BOOLEAN NOT NULL,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL
+);
diff --git a/prisma/migrations/migration_lock.toml b/prisma/migrations/migration_lock.toml
@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "sqlite"
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
@@ -0,0 +1,20 @@
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "sqlite"
+  url      = env("DATABASE_URL")
+}
+
+model Todo {
+  id String @id @default(uuid())
+  title String
+  complete Boolean
+  createdAt DateTime  @default(now())
+  updatedAt DateTime @updatedAt
+
+}
diff --git a/src/app/components/TodoItem.tsx b/src/app/components/TodoItem.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+type TodoItemProps = {
+  id: string
+  title: string
+  complete: boolean
+  toggleTodo: (id: string, complete: boolean) => void
+}
+
+export function TodoItem({ id, title, complete, toggleTodo }: TodoItemProps) {
+  return (
+    <li className="flex gap-1 items-center">
+      <input
+        id={id}
+        type="checkbox"
+        className="cursor-pointer peer"
+        defaultChecked={complete}
+        onChange={e => toggleTodo(id, e.target.checked)}
+      />
+      <label
+        htmlFor={id}
+        className="cursor-pointer peer-checked:line-through peer-checked:text-slate-500"
+      >
+        {title}
+      </label>
+    </li>
+  )
+}
diff --git a/src/app/db.ts b/src/app/db.ts
@@ -0,0 +1,10 @@
+import { PrismaClient } from '@prisma/client'
+
+
+const globalForPrisma = globalThis as unknown as {
+  prisma: PrismaClient | undefined
+}
+
+export const prisma = globalForPrisma.prisma ?? new PrismaClient()
+
+if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -2,20 +2,4 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
-}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -14,8 +14,8 @@ const geistMono = localFont({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "to do list",
+
 };
 
 export default function RootLayout({
@@ -26,7 +26,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${geistSans.variable} ${geistMono.variable} bg-slate-800 text-slate-100 container mx-auto p-2`}
       >
         {children}
       </body>

diff --git a/src/app/new/page.tsx b/src/app/new/page.tsx
@@ -0,0 +1,47 @@
+
+import { redirect } from "next/navigation"
+import Link from "next/link"
+import { prisma } from "../db"
+
+async function createTodo(data: FormData) {
+  "use server"
+
+  const title = data.get("title")?.valueOf()
+  if (typeof title !== "string" || title.length === 0) {
+    throw new Error("Invalid Title")
+  }
+
+  await prisma.todo.create({ data: { title, complete: false } })
+  redirect("/")
+}
+
+export default function Page() {
+  return (
+    <>
+      <header className="flex justify-between items-center mb-4">
+        <h1 className="text-2xl">New</h1>
+      </header>
+      <form action={createTodo} className="flex gap-2 flex-col">
+        <input
+          type="text"
+          name="title"
+          className="border border-slate-300 bg-transparent rounded px-2 py-1 outline-none focus-within:border-slate-100"
+        />
+        <div className="flex gap-1 justify-end">
+          <Link
+            href=".."
+            className="border border-slate-300 text-slate-300 px-2 py-1 rounded hover:bg-slate-700 focus-within:bg-slate-700 outline-none"
+          >
+            Cancel
+          </Link>
+          <button
+            type="submit"
+            className="border border-slate-300 text-slate-300 px-2 py-1 rounded hover:bg-slate-700 focus-within:bg-slate-700 outline-none"
+          >
+            Create
+          </button>
+        </div>
+      </form>
+    </>
+  )
+}