feat: begin working on editor

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()),
+      })
+    ),
+  }),
 });

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>

src/app/posts/add/page.tsx

@@ -0,0 +1,9 @@
+import Editor from '@/components/Editor';
+
+export default function AddPost() {
+  return (
+    <main>
+      <Editor />
+    </main>
+  );
+}

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>
+  );
+}

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>