Setup initial quote adding flow

See #3

src/QuoteAdd.tsx

@@ -1,4 +1,68 @@
+import { useEffect, useState } from "react";
+import { Collections, IsoDateString, TypedPocketBase } from "./pocketbase-types";
+import PocketBase from 'pocketbase'
+import { useNavigate } from "react-router";
+
+interface QuoteAddProps {
+  quote: string;
+  context?: string;
+  collection: Collections
+  author: string;
+  date: IsoDateString;
 
-export default function QuoteAdd() {
-  return <p>Add Quote</p>
+}
+export default function QuoteAdd() {
+
+  const pb = new PocketBase("https://api.m3.fyi") as TypedPocketBase
+  const [date, setDate] = useState("")
+  useEffect(() => {
+    const d = new Date();
+    const formattedDate = d.toISOString().slice(0, 16)
+    setDate(formattedDate)
+  }, []);
+
+  async function submit(formData: FormData) {
+    console.log(formData)
+    const quote = {
+      "quote": formData.get("quote"),
+      "context": formData.get("context"),
+      "author": formData.get("author"),
+      "date": formData.get("date")
+    }
+    console.log(formData.get("collection"))
+    await pb.collection(formData.get("collection") as string).create(quote)
+    let navigate = useNavigate();
+    navigate("/")
+
+  }
+
+  return (
+    <form className='border-2 bg-slate-800 ml-2 mb-5 p-2 border-lime-500 shadow-(--box) flex flex-col' action={submit}>
+      <textarea name="quote" className="grow border-4 border-black bg-slate-300 text-black p-1 my-1 cursor-text" placeholder="Quote" />
+      <textarea name="context" className="border-4 border-black bg-slate-300 text-slate-600 p-1 my-1 cursor-text" placeholder="Context" />
+      <div className="flex flex-row">
+        <p className="bg-lime-400 text-zinc-800 p-1 border-4 border-r-2 border-black w-20 cursor-text">Author:</p>
+        <input name="author" className="bg-slate-300 border-4 border-l-2 border-black text-black p-1 grow cursor-text" type="text" placeholder="Author" />
+      </div>
+      <div className="flex flex-row">
+        <p className="bg-lime-400 text-zinc-800 p-1 border-4 border-r-2 border-black w-20 cursor-text">Source:</p>
+        <select
+          name="collection"
+          title='Select quote collection'
+          className='bg-slate-300 border-4 border-l-2 border-black text-black p-1 grow cursor-pointer'
+        >
+          <option value="qt_bit">Arcus Notsus</option>
+          <option value="qt_kfk">Kaffeeklatsch</option>
+          <option value="qt_theshegays">TheSheGays</option>
+        </select>
+      </div>
+      <div className="flex flex-row">
+        <p className="bg-lime-400 text-zinc-800 p-1 border-4 border-r-2 border-black w-20 cursor-text">Date:</p>
+        <input value={date} onChange={(e) => setDate(e.target.value)} name="date" className="bg-slate-300 border-4 border-l-2 border-black text-black p-1 grow cursor-text" placeholder="Date" type="datetime-local" />
+      </div>
+      <div className="flex flex-row justify-center">
+        <button type="submit" className="bg-slate-300 active:bg-lime-400 text-zinc-800 p-1 border-4 border-r-2 border-black w-40 cursor-pointer">Add Quote</button>
+      </div>
+    </form>
+  )
 }

src/QuoteList.tsx

@@ -3,6 +3,7 @@ import { ChangeEvent, useEffect, useState } from 'react'
 import QuoteInfo from './QuoteInfo.tsx'
 import { Collections, Quote, TypedPocketBase } from './pocketbase-types.ts'
 import AddIcon from "pixelarticons/svg/note-plus.svg?react"
+import { NavLink } from 'react-router'
 //TODO: Add Comments
 
 export default function QuoteList() {
@@ -99,7 +100,9 @@ export default function QuoteList() {
         </div>
         <p className='text-lime-500'>|</p>
         <button type='button' className='cursor-pointer ml-auto' title='Add new quote'>
+          <NavLink to="/add">
             <AddIcon className="w-5 mx-1 active:text-lime-500" />
+          </NavLink>
         </button>
         <p className='text-lime-500'>|</p>
       </div>