diff --git a/src/app/account/[[...account]]/page.tsx b/src/app/account/[[...account]]/page.tsx index 1cdc062..a89865d 100644 --- a/src/app/account/[[...account]]/page.tsx +++ b/src/app/account/[[...account]]/page.tsx @@ -8,8 +8,9 @@ export default function AccountPage() { -
+
{children}
diff --git a/src/app/login/[[...login]]/page.tsx b/src/app/login/[[...login]]/page.tsx index 44caa24..4f7c6e4 100644 --- a/src/app/login/[[...login]]/page.tsx +++ b/src/app/login/[[...login]]/page.tsx @@ -4,11 +4,11 @@ import { SignIn } from '@clerk/nextjs'; export default function LoginPage() { return ( -
+
-
+
{post === undefined ? (
Loading post...
) : ( <> -
+
)} - +
+ +
)} diff --git a/src/app/signup/[[...signup]]/page.tsx b/src/app/signup/[[...signup]]/page.tsx index 5b8ef4b..c2d2ef4 100644 --- a/src/app/signup/[[...signup]]/page.tsx +++ b/src/app/signup/[[...signup]]/page.tsx @@ -4,11 +4,11 @@ import { SignUp } from '@clerk/nextjs'; export default function SignUpPage() { return ( -
+
}) { +export default function Editor({ + parentPostId, + post, +}: { + parentPostId?: Id<'posts'>; + post?: Doc<'posts'>; +}) { const { user, isSignedIn } = useUser(); const editorTheme = new Compartment(); const [currentDoc, setCurrentDoc] = useState(post?.content ?? ['']); @@ -52,6 +58,7 @@ export default function Editor({ post }: { post?: Doc<'posts'> }) { setCreatingOrUpdating(true); const result = await createOrUpdatePost({ + parentPostId: parentPostId, id: post?._id, clerkUserId: user.id, content: currentDoc, diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index ca8cd82..5d15516 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -1,71 +1,151 @@ -import { SignedIn, SignedOut, currentUser } from '@clerk/nextjs'; +'use client'; + +import { SignedIn, SignedOut, useUser } from '@clerk/nextjs'; import Link from 'next/link'; -import { BiPlus, BiSolidMessageSquare } from 'react-icons/bi'; +import { useEffect, useState } from 'react'; +import { BiLogIn, BiPlus } from 'react-icons/bi'; +import { BsPersonPlusFill } from 'react-icons/bs'; +import { ImProfile } from 'react-icons/im'; +import { + RiMenuFoldLine, + RiMenuUnfoldLine, + RiUserFollowFill, +} from 'react-icons/ri'; import ThemeButton from './ThemeButton'; import UserButton from './UserButton'; -export default async function Navbar() { - const user = await currentUser(); +export default function Navbar() { + const { user } = useUser(); + const [navOpen, setNavOpen] = useState(false); + + useEffect(() => { + function handler() { + if (navOpen) { + setNavOpen(false); + } + } + + window.addEventListener('resize', handler); + + return () => window.removeEventListener('resize', handler); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); return ( -
); } diff --git a/src/components/Post.tsx b/src/components/Post.tsx index 49f0f14..d4bbad4 100644 --- a/src/components/Post.tsx +++ b/src/components/Post.tsx @@ -63,8 +63,8 @@ export default function Post({ } return ( -
-
+
+
user profile image
-
+
-
-
{username}
- -
- {`${postMonth} ${dayOfMonth}, ${postYear}`} +
+
+ {username} +
+
+ +
+ {`${postMonth} ${dayOfMonth}, ${postYear}`} +
@@ -114,7 +121,7 @@ export default function Post({
diff --git a/src/components/ThemeButton.tsx b/src/components/ThemeButton.tsx index 76b6b8c..2c0f187 100644 --- a/src/components/ThemeButton.tsx +++ b/src/components/ThemeButton.tsx @@ -17,11 +17,11 @@ export default function ThemeButton() { onClick={() => setTheme(isDark ? 'light' : 'dark')} > {mounted === false ? ( - + ) : isDark ? ( - + ) : ( - + )} ); diff --git a/src/components/UserProfile.tsx b/src/components/UserProfile.tsx index 23413fe..c1f2226 100644 --- a/src/components/UserProfile.tsx +++ b/src/components/UserProfile.tsx @@ -12,9 +12,9 @@ export default function UserProfile({ user }: { user: UserDto }) { return (
-
+
-
+
user profile image
-
-

{username}

+
+

+ {username} +

{`Joined ${monthJoined} ${yearJoined}`}