first commit

Author: EvanTechDev

.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

app/favicon.ico

@@ -0,0 +1,72 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 10% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

app/globals.css

@@ -0,0 +1,22 @@
+import "./globals.css"
+import { Inter } from "next/font/google"
+
+const inter = Inter({ subsets: ["latin"] })
+
+export const metadata = {
+  title: "My Note App",
+  description: "A simple note-taking app",
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+      <html lang="en">
+        <body className={inter.className}>{children}</body>
+      </html>
+  )
+}
+

app/layout.tsx

@@ -0,0 +1,68 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useMediaQuery } from "@/hooks/useMediaQuery"
+import DesktopLayout from "@/components/DesktopLayout"
+import MobileLayout from "@/components/MobileLayout"
+import type { Note } from "@/types"
+
+export default function Home() {
+  const [notes, setNotes] = useState<Note[]>([])
+  const [selectedNote, setSelectedNote] = useState<Note | null>(null)
+  const isDesktop = useMediaQuery("(min-width: 768px)")
+
+  useEffect(() => {
+    const savedNotes = localStorage.getItem("notes")
+    if (savedNotes) {
+      setNotes(JSON.parse(savedNotes))
+    }
+  }, [])
+
+  useEffect(() => {
+    localStorage.setItem("notes", JSON.stringify(notes))
+  }, [notes])
+
+  const addNote = () => {
+    const newNote: Note = {
+      id: Date.now(),
+      title: "New Note",
+      content: "",
+      tags: [],
+    }
+    setNotes([...notes, newNote])
+    setSelectedNote(newNote)
+  }
+
+  const updateNote = (updatedNote: Note) => {
+    const updatedNotes = notes.map((note) => (note.id === updatedNote.id ? updatedNote : note))
+    setNotes(updatedNotes)
+    setSelectedNote(updatedNote)
+  }
+
+  const deleteNote = (id: number) => {
+    const updatedNotes = notes.filter((note) => note.id !== id)
+    setNotes(updatedNotes)
+    setSelectedNote(null)
+  }
+
+  return isDesktop ? (
+    <DesktopLayout
+      notes={notes}
+      selectedNote={selectedNote}
+      setSelectedNote={setSelectedNote}
+      addNote={addNote}
+      updateNote={updateNote}
+      deleteNote={deleteNote}
+    />
+  ) : (
+    <MobileLayout
+      notes={notes}
+      selectedNote={selectedNote}
+      setSelectedNote={setSelectedNote}
+      addNote={addNote}
+      updateNote={updateNote}
+      deleteNote={deleteNote}
+    />
+  )
+}
+

app/page.tsx

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

components.json

@@ -0,0 +1,43 @@
+import type { Note } from "@/types"
+import NoteList from "./NoteList"
+import NoteEditor from "./NoteEditor"
+
+interface DesktopLayoutProps {
+  notes: Note[]
+  selectedNote: Note | null
+  setSelectedNote: (note: Note | null) => void
+  addNote: () => void
+  updateNote: (note: Note) => void
+  deleteNote: (id: number) => void
+}
+
+export default function DesktopLayout({
+  notes,
+  selectedNote,
+  setSelectedNote,
+  addNote,
+  updateNote,
+  deleteNote,
+}: DesktopLayoutProps) {
+  return (
+    <div className="flex h-screen bg-white">
+      <div className="w-64 border-r">
+        <NoteList
+          notes={notes}
+          selectedNote={selectedNote}
+          setSelectedNote={setSelectedNote}
+          addNote={addNote}
+          deleteNote={deleteNote}
+        />
+      </div>
+      <div className="flex-1">
+        {selectedNote ? (
+          <NoteEditor note={selectedNote} updateNote={updateNote} />
+        ) : (
+          <div className="h-full flex items-center justify-center text-gray-400">Select a note or create a new one</div>
+        )}
+      </div>
+    </div>
+  )
+}
+

components/DesktopLayout.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import { useState } from "react"
+import { uploadFile } from "../utils/blobStorageService"
+import { Button } from "./ui/button"
+
+export default function FileUpload({ userId }: { userId: string | null }) {
+  const [file, setFile] = useState<File | null>(null)
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) {
+      setFile(e.target.files[0])
+    }
+  }
+
+  const handleUpload = async () => {
+    if (file) {
+      const url = await uploadFile(userId, file)
+      console.log("File uploaded:", url)
+      // Here you can add the file URL to your note content
+    }
+  }
+
+  return (
+    <div className="mt-4">
+      <input type="file" onChange={handleFileChange} className="mb-2" />
+      <Button onClick={handleUpload} disabled={!file}>
+        Upload File
+      </Button>
+    </div>
+  )
+}
+

components/FileUpload.tsx

@@ -0,0 +1,38 @@
+import type { Note } from "@/types"
+import NoteList from "./NoteList"
+import NoteEditor from "./NoteEditor"
+
+interface MobileLayoutProps {
+  notes: Note[]
+  selectedNote: Note | null
+  setSelectedNote: (note: Note | null) => void
+  addNote: () => void
+  updateNote: (note: Note) => void
+  deleteNote: (id: number) => void
+}
+
+export default function MobileLayout({
+  notes,
+  selectedNote,
+  setSelectedNote,
+  addNote,
+  updateNote,
+  deleteNote,
+}: MobileLayoutProps) {
+  return (
+    <div className="h-screen bg-white">
+      {selectedNote ? (
+        <NoteEditor note={selectedNote} updateNote={updateNote} onBack={() => setSelectedNote(null)} />
+      ) : (
+        <NoteList
+          notes={notes}
+          selectedNote={selectedNote}
+          setSelectedNote={setSelectedNote}
+          addNote={addNote}
+          deleteNote={deleteNote}
+        />
+      )}
+    </div>
+  )
+}
+