Merge remote-tracking branch 'origin/main'

src/components/wrappers/CodeSnippet/CodeSnippet.tsx

@@ -0,0 +1,17 @@
+import {PropsWithChildren} from "react";
+
+
+export type CodeSnippetProps = PropsWithChildren<{}>;
+
+export const CodeSnippet = (props: CodeSnippetProps) => {
+
+    return (
+        <div className="prose prose-invert">
+          <pre className="bg-[#1e1e1e] rounded-md p-4">
+            <code className="language-javascript text-[#d4d4d4]">{`
+           ${props.children}
+            `}</code>
+          </pre>
+        </div>
+    )
+}

src/components/wrappers/Dashboard/LoggedInButton/LoggedInButton.tsx

@@ -11,6 +11,8 @@ export const LoggedInButton = async () => {
     //     return <SignInButton/>
     // }
 
+
+
     return (
         <LoggedInDropdown>
             <SidebarMenuButton>

src/components/wrappers/Dashboard/LoggedInDropdown/LoggedInDropdown.tsx

@@ -3,11 +3,6 @@
 import {PropsWithChildren} from "react";
 import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from "@/components/ui/dropdown-menu";
 import {signOutAction} from "@/features/auth/auth.action";
-import {Home, LogOut, Square, User, Gauge, User2, ChevronUp} from "lucide-react";
-import Link from "next/link";
-import {useTranslations} from "use-intl";
-import {SidebarMenuButton} from "@/components/ui/sidebar";
-import {UserAvatar} from "@/components/wrappers/Dashboard/UserAvatar/UserAvatar";
 import {redirect} from "next/navigation";
 
 export type LoggedInDropdownProps = PropsWithChildren<{}>
@@ -28,9 +23,6 @@ export const LoggedInDropdown = (props: LoggedInDropdownProps) => {
                 }}>
                     <span>Account</span>
                 </DropdownMenuItem>
-                <DropdownMenuItem>
-                    <span>Billing</span>
-                </DropdownMenuItem>
                 <DropdownMenuItem onClick={() => {
                     signOutAction()
                 }}>

src/components/wrappers/Dashboard/Profile/Avatar/AvatarWithUpload.tsx

@@ -0,0 +1,97 @@
+"use client"
+import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
+import {User} from "@prisma/client";
+import {UploadIcon} from "lucide-react";
+import {toast} from "sonner";
+import {uploadImageAction} from "@/features/upload/upload.action";
+import {useMutation} from "@tanstack/react-query";
+import {prisma} from "@/prisma";
+import {updateImageUserAction} from "@/components/wrappers/Dashboard/Profile/Avatar/avatar.action";
+import {useRouter} from "next/navigation";
+import {useSession} from "next-auth/react";
+
+export type AvatarWithUploadProps = {
+    user: User
+}
+
+
+export const AvatarWithUpload = (props: AvatarWithUploadProps) => {
+    const user = props.user
+    const router = useRouter();
+    const { data: session, update } = useSession();
+
+
+    const submitImage = useMutation({
+        mutationFn: async (file: File) => {
+            const formData = new FormData();
+            formData.set("file", file);
+            const uploadImage = await uploadImageAction(formData)
+            const data = uploadImage?.data?.data
+
+            if (uploadImage?.serverError || !data) {
+                console.log(uploadImage?.serverError);
+                toast.error(uploadImage?.serverError);
+                return;
+            }
+
+            const updateUser = await updateImageUserAction(data.url)
+            const dataUser = updateUser?.data?.data
+
+            if (updateUser?.serverError || !dataUser) {
+                console.log(updateUser?.serverError);
+                toast.error(updateUser?.serverError);
+                return;
+            }
+
+            const newSession = {
+                ...session,
+                user: {
+                    ...session?.user,
+                    image: data.url
+                },
+            };
+
+            await update(newSession);
+            toast.success("Successfully uploaded user image!");
+            router.refresh()
+
+
+
+        }
+    })
+
+    const handleImageUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
+        const file = event.target.files?.[0];
+        if (!file) return;
+        if (!file.type.includes("image")) {
+            toast.error("File not an image")
+            return;
+        }
+        submitImage.mutate(file)
+    };
+
+
+    return (
+        <div className="relative " >
+                <Avatar className="size-14 mr-3 ">
+                    <AvatarFallback>{user.name?.[0]}</AvatarFallback>
+                    {user.image ? (
+                        <AvatarImage src={user.image} alt={`${user.name ?? "-"}'s profile picture`}/>
+                    ) : null}
+                </Avatar>
+            <div
+                onClick={() => {
+                    const fileInput = document.createElement("input");
+                    fileInput.type = "file";
+                    fileInput.accept = "image/*";
+                    // @ts-ignore
+                    fileInput.onchange = handleImageUpload;
+                    fileInput.click();
+                }}
+                className="cursor-pointer absolute inset-0 flex justify-center items-center opacity-0 transition-opacity hover:opacity-100 hover:bg-gray-500 hover:bg-opacity-50 rounded-full size-14"
+            >
+                <UploadIcon className="w-8 h-8 text-primary"/>
+            </div>
+        </div>
+    )
+}

src/components/wrappers/Dashboard/Profile/Avatar/avatar.action.ts

@@ -0,0 +1,24 @@
+"use server"
+import {userAction} from "@/safe-actions";
+import {z} from "zod";
+import {prisma} from "@/prisma";
+
+
+export const updateImageUserAction = userAction
+    .schema(z.string())
+    .action(async ({parsedInput, ctx}) => {
+
+        const user = await prisma.user.update({
+            where: {
+                id: ctx.user.id,
+            },
+            data: {
+                image: parsedInput,
+            }
+        })
+
+
+        return {
+            data: user,
+        }
+    });