User Button over image

t3dotgg · Mar 26, 2023 · 6d1bb28 · 6d1bb28
1 parent 3dfbaaf
commit 6d1bb28
Showing 1 changed file with 9 additions and 8 deletions.
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,4 +1,4 @@
-import { SignInButton, useUser } from "@clerk/nextjs";
+import { SignInButton, UserButton, useUser } from "@clerk/nextjs";
 import { type NextPage } from "next";
 
 import { api } from "~/utils/api";
@@ -37,13 +37,14 @@ const CreatePostWizard = () => {
  return (
 
  <div className="flex w-full gap-3">
- <Image
- src={user.profileImageUrl}
- alt="Profile image"
- className="h-14 w-14 rounded-full"
- width={56}
- height={56}
- />
+ <UserButton appearance={{
+ elements: {
+ userButtonAvatarBox: {
+ width: 56,
+ height: 56
+ }
+ }
+ }} />
  <input
  placeholder="Type some emojis!"
  className="grow bg-transparent outline-none"