Add initial styling

src/App.tsx

@@ -1,5 +1,5 @@
 import QuoteList from "./QuoteList";
 
 export default function App() {
-  return <QuoteList></QuoteList>
+  return <QuoteList />
 }

src/QuoteInfo.tsx

@@ -1,11 +1,25 @@
 import { useState } from "react"
+import { Quote } from "./pocketbase-types"
 
-
-
-export default function QuoteInfo() {
+interface QuoteInfoProps {
+  quote: Quote;
+}
+export default function QuoteInfo({ quote }: QuoteInfoProps) {
 
   return (
-    <p>Hello World!</p>
+    //TODO: Bettes Colors
+    <div className="dark:bg-slate-800 shadow-(--box) m-1 p-2">
+      <p className="border-4 border-black bg-slate-300 text-black p-1 my-1">{quote.quote}</p>
+      {quote.context && <p className="border-4 border-black bg-slate-300 text-black p-1 my-1">{quote.context}</p>}
+      <div className="flex flex-row">
+        <p className="bg-lime-400 text-zinc-800 p-1 border-4 border-r-2 border-black w-20">Author:</p>
+        <p className="bg-slate-300 border-4 border-l-2 border-black text-black p-1 grow">{quote.author}</p>
+      </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">Date:</p>
+        <p className="bg-slate-300 border-4 border-l-2 border-black text-black p-1 grow">{quote.date}</p>
+      </div>
+    </div>
   )
 }
 

src/QuoteList.tsx

@@ -14,7 +14,7 @@ export default function QuoteList() {
   const [quotes, setQuotes] = useState<Quote[] | null>(null)
   const [loading, setLoading] = useState<boolean>(true)
   const [error, setError] = useState<Error | null>(null)
-  const [collection, setCollection] = useState<Collections | null>(Collections.QtKfk)
+  const [collection, setCollection] = useState<Collections | null>(Collections.QtBit)
 
   useEffect(() => {
     pb.realtime.subscribe(`${collection}`, function (e) {
@@ -39,17 +39,27 @@ export default function QuoteList() {
   }
   useEffect(() => {
     getQuotes()
-  }, [])
+  }, [collection])
 
   return (
     //TODO: Add Quote source selection
-    <div>
-
+    <div className='p-3 pt-0'>
+      <div className='border-2 bg-slate-800 ml-2 mb-5 p-2 border-lime-500 shadow-(--box)'>
+        <select
+          className='border-r-2 pr-10 border-lime-500'
+          value={collection as string}
+          onChange={e => setCollection(e.target.value as Collections)}>
+          <option value="qt_bit">Arcus Notsus</option>
+          <option value="qt_kfk">Kaffeeklatsch</option>
+          <option value="qt_theshegays">TheSheGays</option>
+        </select>
+      </div>
       {loading ? (<p> Loading...</p >) : (
         //TODO: Replace div with styled QuoteInfo component
-        <div>
+        <div className="grid grid-cols-4 gap-4">
 
-          {quotes != null ? (quotes.map((quote) => (<div key={quote.id}>{quote.quote}</div>))) : (<p>No Quotes</p>)}
+          {/* {quotes != null ? (quotes.map((quote) => (<div key={quote.id}>{quote.quote}</div>))) : (<p>No Quotes</p>)} */}
+          {quotes != null ? (quotes.map((quote) => (<QuoteInfo key={quote.id} quote={quote} />))) : (<p>No Quotes</p>)}
         </div>
       )
       }

src/index.css

@@ -1 +1,6 @@
-@import "tailwindcss"
+@import "tailwindcss";
+
+:root,#root {
+  @apply bg-zinc-100 dark:bg-slate-700 text-black dark:text-white min-h-screen font-mono;
+  --box: -20px 20px 0px 0px #000000;
+}

src/pocketbase-types.ts

@@ -37,6 +37,7 @@ export type Quote = {
   author: string
   context?: string
   created?: IsoDateString
+  date: IsoDateString
   id: string
   quote: string
   updated?: IsoDateString