From f57f8e26c2e781e39ce919594b93c2f69bd329da Mon Sep 17 00:00:00 2001
From: Stevan Freeborn <65925598+StevanFreeborn@users.noreply.github.com>
Date: Sat, 9 Sep 2023 23:53:20 -0500
Subject: [PATCH] feat: begin working on editor

---
 convex/schema.ts           | 11 +++++++++++
 src/app/layout.tsx         |  7 +++++--
 src/app/posts/add/page.tsx |  9 +++++++++
 src/components/Editor.tsx  | 37 +++++++++++++++++++++++++++++++++++++
 src/components/Navbar.tsx  | 26 ++++++++++++++++++++++++++
 5 files changed, 88 insertions(+), 2 deletions(-)
 create mode 100644 src/app/posts/add/page.tsx
 create mode 100644 src/components/Editor.tsx

diff --git a/convex/schema.ts b/convex/schema.ts
index 4880818..01303f1 100644
--- a/convex/schema.ts
+++ b/convex/schema.ts
@@ -5,4 +5,15 @@ export default defineSchema({
   users: defineTable({
     clerkUser: v.any(),
   }).index('by_clerk_id', ['clerkUser.id']),
+  posts: defineTable({
+    userId: v.id('users'),
+    content: v.array(v.string()),
+    likes: v.array(v.id('users')),
+    replies: v.array(
+      v.object({
+        userId: v.id('users'),
+        content: v.array(v.string()),
+      })
+    ),
+  }),
 });
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 54ab28d..1c6caa0 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,10 +1,13 @@
 import Navbar from '@/components/Navbar';
 import { ConvexProvider, NextThemesProvider } from '@/providers';
-import { ClerkProvider } from '@clerk/nextjs';
+import { ClerkProvider, SignedIn } from '@clerk/nextjs';
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import './globals.css';
 
+import Link from 'next/link';
+import { BiSolidMessageSquareAdd } from 'react-icons/bi';
+
 const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
@@ -31,7 +34,7 @@ export default function RootLayout({
           <ConvexProvider>
             <NextThemesProvider>
               <Navbar />
-              <div className='p-4'>{children}</div>
+              <div className='p-4 w-full h-full flex flex-col'>{children}</div>
             </NextThemesProvider>
           </ConvexProvider>
         </ClerkProvider>
diff --git a/src/app/posts/add/page.tsx b/src/app/posts/add/page.tsx
new file mode 100644
index 0000000..79007f9
--- /dev/null
+++ b/src/app/posts/add/page.tsx
@@ -0,0 +1,9 @@
+import Editor from '@/components/Editor';
+
+export default function AddPost() {
+  return (
+    <main>
+      <Editor />
+    </main>
+  );
+}
diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx
new file mode 100644
index 0000000..70a519f
--- /dev/null
+++ b/src/components/Editor.tsx
@@ -0,0 +1,37 @@
+'use client';
+
+import { useState } from 'react';
+
+export default function Editor() {
+  const [mode, setMode] = useState<'write' | 'preview'>('write');
+
+  return (
+    <form className='flex flex-col shadow-md rounded-md dark:bg-secondary-gray border border-gray-600'>
+      <div className='flex items-center justify-between rounded-t-md p-4 pb-0 border-b border-gray-600 dark:bg-primary-gray'>
+        <div className='flex items-center'>
+          <button
+            className='flex items-center justify-center px-3 py-2 rounded-t-md -mb-[1px] disabled:dark:bg-secondary-gray disabled:border disabled:border-gray-600 disabled:border-b-0'
+            disabled={mode === 'write'}
+            onClick={() => setMode('write')}
+            type='button'
+          >
+            Write
+          </button>
+          <button
+            className='flex items-center justify-center px-3 py-2 rounded-t-md disabled:dark:bg-secondary-gray disabled:border disabled:border-gray-600 disabled:border-b-0'
+            disabled={mode === 'preview'}
+            onClick={() => setMode('preview')}
+            type='button'
+          >
+            Preview
+          </button>
+        </div>
+        <div></div>
+      </div>
+      <div></div>
+      <div className='flex items-center justify-end'>
+        <button type='submit'>Post</button>
+      </div>
+    </form>
+  );
+}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index c65709b..7ec3a83 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,5 +1,6 @@
 import { SignedIn, SignedOut, UserButton } from '@clerk/nextjs';
 import Link from 'next/link';
+import { BiSolidMessageSquareAdd } from 'react-icons/bi';
 import ThemeButton from './ThemeButton';
 
 export default function Navbar() {
@@ -15,6 +16,31 @@ export default function Navbar() {
             <span className='font-bold text-4xl text-primary-accent'>X</span>
           </Link>
         </li>
+        <SignedIn>
+          <li>
+            {/* TODO: Style this */}
+            <div>
+              <input
+                type='text'
+                placeholder='Search'
+              />
+            </div>
+          </li>
+          <li>
+            <Link href='#'>Following</Link>
+          </li>
+          <li>
+            <Link href='#'>Profile</Link>
+          </li>
+          <li>
+            <Link
+              href='/posts/add'
+              className='text-primary-accent'
+            >
+              <BiSolidMessageSquareAdd className='w-10 h-10' />
+            </Link>
+          </li>
+        </SignedIn>
       </ul>
       <ul className='flex items-center gap-4'>
         <li>