WIP comment box

web/components/comment-box.tsx

@@ -0,0 +1,31 @@
+import { useState } from 'react'
+import { createComment } from '../lib/firebase/comments'
+import { User } from '../lib/firebase/users'
+
+export function CommentBox(props: {
+  className?: string
+  contractId: string
+  betId: string
+  user: User | null | undefined
+}) {
+  const { className, contractId, betId, user } = props
+  const [comment, setComment] = useState('')
+  async function submitComment() {
+    if (!user || !comment) return
+    await createComment(contractId, betId, comment, user)
+  }
+
+  return (
+    <div className="mt-2">
+      <textarea
+        value={comment}
+        onChange={(e) => setComment(e.target.value)}
+        className="textarea textarea-bordered w-full"
+        placeholder="Add a comment..."
+      />
+      <button className="btn btn-outline btn-sm mt-1" onClick={submitComment}>
+        Comment
+      </button>
+    </div>
+  )
+}

web/components/slide-over.tsx

@@ -0,0 +1,65 @@
+import { Fragment, useState } from 'react'
+import { Dialog, Transition } from '@headlessui/react'
+import { XIcon } from '@heroicons/react/outline'
+
+export default function SlideOver() {
+  const [open, setOpen] = useState(true)
+
+  return (
+    <Transition.Root show={open} as={Fragment}>
+      <Dialog
+        as="div"
+        className="fixed inset-0 overflow-hidden"
+        onClose={setOpen}
+      >
+        <div className="absolute inset-0 overflow-hidden">
+          <Dialog.Overlay className="absolute inset-0" />
+
+          <div className="fixed inset-y-0 right-0 pl-10 max-w-full flex">
+            <Transition.Child
+              as={Fragment}
+              enter="transform transition ease-in-out duration-500 sm:duration-700"
+              enterFrom="translate-x-full"
+              enterTo="translate-x-0"
+              leave="transform transition ease-in-out duration-500 sm:duration-700"
+              leaveFrom="translate-x-0"
+              leaveTo="translate-x-full"
+            >
+              <div className="w-screen max-w-md">
+                <div className="h-full flex flex-col py-6 bg-white shadow-xl overflow-y-scroll">
+                  <div className="px-4 sm:px-6">
+                    <div className="flex items-start justify-between">
+                      <Dialog.Title className="text-lg font-medium text-gray-900">
+                        Panel title
+                      </Dialog.Title>
+                      <div className="ml-3 h-7 flex items-center">
+                        <button
+                          type="button"
+                          className="bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                          onClick={() => setOpen(false)}
+                        >
+                          <span className="sr-only">Close panel</span>
+                          <XIcon className="h-6 w-6" aria-hidden="true" />
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="mt-6 relative flex-1 px-4 sm:px-6">
+                    {/* Replace with your content */}
+                    <div className="absolute inset-0 px-4 sm:px-6">
+                      <div
+                        className="h-full border-2 border-dashed border-gray-200"
+                        aria-hidden="true"
+                      />
+                    </div>
+                    {/* /End replace */}
+                  </div>
+                </div>
+              </div>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  )
+}