feat: profile picture

apps/web/src/views/settings/index.tsx

@@ -6,6 +6,8 @@ import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
 import { PageHead } from "~/components/PageHead";
 import { useModal } from "~/providers/modal";
 import { useWorkspace } from "~/providers/workspace";
+import { api } from "~/utils/api";
+import Avatar from "./components/Avatar";
 import { DeleteWorkspaceConfirmation } from "./components/DeleteWorkspaceConfirmation";
 import { PremiumUsernameConfirmation } from "./components/PremiumUsernameConfirmation";
 import UpdateWorkspaceDescriptionForm from "./components/UpdateWorkspaceDescriptionForm";
@@ -16,6 +18,8 @@ export default function SettingsPage() {
   const { modalContentType, openModal } = useModal();
   const { workspace } = useWorkspace();
 
+  const { data } = api.user.getUser.useQuery();
+
   const handleOpenBillingPortal = async () => {
     try {
       const response = await fetch("/api/stripe/create_billing_session", {
@@ -47,6 +51,13 @@ export default function SettingsPage() {
               </h1>
             </div>
 
+            <div className="mb-8 border-t border-light-300 dark:border-dark-300">
+              <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
+                Profile picture
+              </h2>
+              <Avatar userId={data?.id} userImage={data?.image} />
+            </div>
+
             <div className="mb-8 border-t border-light-300 dark:border-dark-300">
               <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
                 Workspace name