fix image upload, cleanup ui

app/api/gweets/route.ts

@@ -87,8 +87,8 @@ export async function GET(request: Request) {
 
 // create gweet
 export async function POST(request: Request) {
-  const gweet = await request.json();
-  console.log(gweet)
+  const { gweet, fileprops } = await request.json();
+
   const gweetSchema = z
     .object({
       content: z.string().min(1).max(280),
@@ -98,13 +98,22 @@ export async function POST(request: Request) {
     })
     .strict();
 
-  const zod = gweetSchema.safeParse(gweet);
+  const zodGweet = gweetSchema.safeParse(gweet);
 
-  if (!zod.success) {
+  const mediaSchema = z.array(
+    z.object({
+      gweetId: z.string().nullable().optional(),
+      url: z.string(),
+      key: z.string(),
+      type: z.string(),
+    }).strict()
+  );
+
+  if (!zodGweet.success) {
     return NextResponse.json(
       {
         message: "Invalid request body",
-        error: zod.error.formErrors,
+        error: zodGweet.error.formErrors,
       }, { status: 400 },
     );
   }
@@ -116,8 +125,37 @@ export async function POST(request: Request) {
       },
     });
 
+    if (fileprops.length > 0) {
+      const mediaArray = fileprops.map((fileprop: { fileUrl: string; fileKey: string; }) => {
+        const media = {
+          gweetId: created_gweet.id,
+          url: fileprop.fileUrl,
+          key: fileprop.fileKey,
+          type: "IMAGE",
+        }
+
+        return media;
+      });
+
+      const zodMedia = mediaSchema.safeParse(mediaArray);
+
+      if (!zodMedia.success) {
+        return NextResponse.json(
+          {
+            message: "Invalid media body",
+            error: zodMedia.error.formErrors,
+          }, { status: 400 },
+        );
+      }
+
+      await db.media.createMany({
+        data: mediaArray,
+      });
+    }
+
     return NextResponse.json(created_gweet, { status: 200 });
   } catch (error: any) {
+    console.log(error);
     return NextResponse.json(
       {
         message: "Something went wrong",

app/api/media/route.ts

-import { NextResponse } from "next/server";
-import { z } from "zod";
-
-import { db } from "@/lib/db";
-
-export async function POST(request: Request) {
-  const { media } = await request.json();
-
-  const mediaSchema = z
-    .object({
-      gweetId: z.string().nullable().optional(),
-      url: z.string(),
-      key: z.string(),
-      type: z.string(),
-    })
-    .strict();
-
-  const zod = mediaSchema.safeParse(media);
-
-  if (!zod.success) {
-    return NextResponse.json({ error: zod.error }, { status: 400 });
-  }
-
-  try {
-    await db.media.create({
-      data: {
-        ...media,
-      },
-    });
-    return NextResponse.json({ message: "Media created successfully" }, { status: 200 });
-  } catch (error: any) {
-    return NextResponse.json({ error: error.message }, { status: 500 });
-  }
-}
\ No newline at end of file

app/api/uploadthing/core.ts

@@ -4,7 +4,7 @@ import { createUploadthing, type FileRouter } from "uploadthing/next";
 const f = createUploadthing();
 
 export const ourFileRouter = {
-    imageUploader: f({ image: { maxFileSize: "4MB" } })
+    imageUploader: f({ image: { maxFileSize: "4MB", maxFileCount: 4 } })
         .middleware(async ({ req }) => {
             const user = await getCurrentUser();
 
@@ -12,11 +12,7 @@ export const ourFileRouter = {
 
             return { userId: user.id };
         })
-        .onUploadComplete(async ({ metadata, file }) => {
-            console.log("Upload complete for userId:", metadata.userId);
-
-            console.log("file url", file.url);
-        }),
+        .onUploadComplete(async ({ metadata, file }) => { }),
 } satisfies FileRouter;
 
 export type OurFileRouter = typeof ourFileRouter;
\ No newline at end of file

components/create-gweet/api/post-gweet.ts

@@ -22,30 +22,16 @@ export const postGweet = async ({
   };
 
   try {
+    let fileprops: { fileUrl: string; fileKey: string; }[] = [];
+    if (files.length > 0) {
+      fileprops = await uploadFiles({ files, endpoint: 'imageUploader' })
+    }
+
     const data = await fetch('/api/gweets', {
       method: 'POST',
-      body: JSON.stringify(gweet)
+      body: JSON.stringify({ gweet, fileprops })
     }).then((result) => result.json())
 
-    if (files.length > 0) {
-      const gweet_id = data.id;
-      files.forEach(async (file) => {
-        const [res] = await uploadFiles({ files: [file], endpoint: 'imageUploader' })
-
-        const media = {
-          ...(gweet_id && { gweet_id }),
-          url: res.fileUrl,
-          key: res.fileKey,
-          type: "image",
-        };
-
-        await fetch('/api/media', {
-          method: 'POST',
-          body: JSON.stringify(media)
-        })
-      })
-    }
-
     const hashtags = retrieveHashtagsFromGweet(content);
     if (hashtags) await postHashtags(hashtags);
 

components/create-gweet/components/create-gweet-wrapper.tsx

@@ -12,7 +12,7 @@ export const CreateGweetWrapper = ({
   const [isComment, setIsComment] = useState(true);
 
   return (
-    <div className="">
+    <div className="px-6">
       <CreateGweet
         replyToGweetId={replyToGweetId}
         placeholder="Gweet your reply..."

components/create-gweet/components/create-gweet.tsx

@@ -31,8 +31,8 @@ import { IChosenImages } from "../types";
 const FormSchema = z.object({
   gweet: z
     .string()
-    .min(1, { message: "Come on post something...", })
-    .max(1000, { message: "Gweets cannot be more that 1000 characters.", }),
+    .min(1, { message: "Come on post something..." })
+    .max(240, { message: "Gweets cannot be more that 240 characters." }),
 })
 
 export const CreateGweet = ({
@@ -48,27 +48,24 @@ export const CreateGweet = ({
   placeholder?: string | null;
   isComment?: boolean;
 }) => {
-  const [isGweetLoading, setIsGweetLoading] = useState<boolean>(false);
   const [chosenImages, setChosenImages] = useState<IChosenImages[]>([]);
   const imageUploadRef = useRef<HTMLInputElement>(null);
 
   const { data: session } = useSession();
-  const mutation = useCreateGweet();
+  const { isLoading, mutate, data } = useCreateGweet();
 
   const form = useForm<z.infer<typeof FormSchema>>({
     resolver: zodResolver(FormSchema),
   })
 
-  function onGweet(data: z.infer<typeof FormSchema>) {
+  async function onGweet(formData: z.infer<typeof FormSchema>) {
     if (!session) return null;
 
-    setIsGweetLoading(true);
-
-    mutation.mutate({
-      content: data.gweet,
-      files: [],
+    mutate({
+      content: formData.gweet,
       authorId: session?.user?.id,
       replyToGweetId,
+      files: chosenImages.map((image) => image.file),
       quoteGweetId: quoted_gweet?.id || null,
     })
 
@@ -76,28 +73,44 @@ export const CreateGweet = ({
       description: "Your gweet was send.",
     })
 
-    setIsGweetLoading(false);
     form.setValue('gweet', '');
+    setChosenImages([]);
   }
 
-  const chooseImage = async (
+  const chooseImages = async (
     event: React.ChangeEvent<HTMLInputElement>,
     setChosenImages: (images: IChosenImages[]) => void,
   ) => {
-    const file = event?.target?.files?.[0];
-
-    if (file) {
-      const reader = new FileReader();
-      reader.readAsDataURL(file);
-      reader.onload = () => {
-        setChosenImages([
-          ...chosenImages,
-          {
+    const files = event.target.files;
+
+    if (files && files.length > 0) {
+      const newImages: IChosenImages[] = [];
+      const totalSelectedImages = chosenImages.length + files.length;
+
+      if (totalSelectedImages > 4) {
+        return toast({
+          variant: "destructive",
+          description: "You can only upload 4 images per gweet.",
+        })
+      }
+
+      for (let i = 0; i < files.length; i++) {
+        const filePath = files[i];
+
+        const reader = new FileReader();
+        reader.readAsDataURL(filePath);
+
+        reader.onload = () => {
+          newImages.push({
             url: reader.result,
-            file: file,
-          },
-        ]);
-      };
+            file: filePath,
+          });
+
+          if (newImages.length === files.length) {
+            setChosenImages([...chosenImages, ...newImages]);
+          }
+        };
+      }
     }
   };
 
@@ -105,17 +118,18 @@ export const CreateGweet = ({
 
   return (
     <>
-      <div className="grid grid-cols-2 gap-11 p-4">
-        {parent_gweet && (
+      {/* TODO showing if is replying */}
+      {parent_gweet && (
+        <div className="grid grid-cols-2 gap-11 p-4">
+
           <div className="grid place-items-center grid-rows-2 gap-1">
             <UserAvatar
               user={{ username: parent_gweet?.author?.username, image: parent_gweet?.author?.image || null }}
             />
             <div className="bg-gray-300 h-full w-px"></div>
           </div>
-        )}
-        <div className="flex flex-col">
-          {parent_gweet && (
+
+          <div className="flex flex-col">
             <>
               <div className="flex gap-1">
                 <span className="text-secondary text-sm font-medium truncate hover:underline">
@@ -132,107 +146,117 @@ export const CreateGweet = ({
                 )}
               </div>
             </>
-          )}
-
-          {parent_gweet && !isComment && (
-            <div className={`${!parent_gweet ? 'ml-16' : ''} flex items-center gap-1 cursor-pointer`}>
-              <span className="text-tertiary truncate">Replying to</span>
-              <span className="text-primary truncate">
-                @{parent_gweet?.authorId}
-              </span>
-            </div>
-          )}
+
+            {!isComment && (
+              <div className={`${!parent_gweet ? 'ml-16' : ''} flex items-center gap-1 cursor-pointer`}>
+                <span className="text-tertiary truncate">Replying to</span>
+                <span className="text-primary truncate">
+                  @{parent_gweet?.authorId}
+                </span>
+              </div>
+            )}
+          </div>
         </div>
-      </div>
+      )}
 
       <div className="relative">
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onGweet)} className="space-y-6">
-            <Card className="p-3">
-              <FormField
-                control={form.control}
-                name="gweet"
-                render={({ field }) => (
-                  <FormItem className="flex items-start">
-                    <UserAvatar
-                      className="mr-3"
-                      user={{ username: session?.user.username || null, image: session?.user?.image || null }}
-                    />
-                    <div className="flex-grow">
+            <Card className="p-3 flex items-start relative">
+              <UserAvatar
+                className="mr-3"
+                user={{ username: session?.user.username || null, image: session?.user?.image || null }}
+              />
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="absolute bottom-0 left-0 mb-3 ml-3"
+                onClick={() => imageUploadRef.current?.click()}
+                disabled={isLoading || !session.user}
+              >
+                <Icons.media className="text-muted-foreground" />
+              </Button>
+              <div className="flex-grow">
+                <FormField
+                  control={form.control}
+                  name="gweet"
+                  render={({ field }) => (
+                    <FormItem>
                       <FormControl>
                         <Textarea
                           placeholder={placeholder || "What's on your mind?"}
-                          className="resize-none"
-                          disabled={isGweetLoading || !session.user}
+                          className="resize-none min-h-[100px]"
+                          disabled={isLoading || !session.user}
                           {...field}
                         />
                       </FormControl>
                       {!isComment ?
-                        <FormDescription className="pt-3">
+                        <FormDescription>
                           Your gweets will be public, and everyone can see them.
                         </FormDescription>
                         : null
                       }
                       <FormMessage />
+                    </FormItem>
+                  )}
+                />
 
-                      <input
-                        className="hidden w-full"
-                        type="file"
-                        onChange={(e) => chooseImage(e, setChosenImages)}
-                        ref={imageUploadRef}
-                      />
-                      {chosenImages.length > 0 && (
-                        <div className={`grid object-cover h-[680px]
-                        ${chosenImages.length === 1 ? "grid-cols-1"
-                            : chosenImages.length === 2 ? "grid-cols-2 gap-3"
-                              : chosenImages.length === 3 || 4 ? "grid-cols-2 grid-rows-2 gap-3"
-                                : ""
-                          }`}
-                        >
-                          {chosenImages.map((image, i) => {
-                            const isFirstImage = chosenImages.length === 3 && i === 0;
-                            return (
-                              <Card key={i} className={`relative max-h-[680px] overflow-hidden ${isFirstImage ? "row-span-2" : ""}`}>
-                                <Button
-                                  size="icon"
-                                  variant="secondary"
-                                  className="rounded-full absolute top-1 right-1 z-50"
-                                  onClick={() => {
-                                    setChosenImages(
-                                      chosenImages.filter((img, j) => j !== i),
-                                    );
-                                  }}
-                                >
-                                  <Icons.close />
-                                </Button>
-                                <Image
-                                  src={image.url as string}
-                                  alt="gweet image"
-                                  fill
-                                  className="object-cover rounded-lg"
-                                />
-                              </Card>
-                            );
-                          })}
-                        </div>
-                      )}
-                      {/* {quoted_gweet && <QuotedGweet gweet={quoted_gweet} />} */}
-                    </div>
-                  </FormItem>
+                <input
+                  className="hidden w-full resize-none"
+                  type="file"
+                  multiple
+                  onChange={(e) => chooseImages(e, setChosenImages)}
+                  ref={imageUploadRef}
+                  disabled={isLoading || !session.user}
+                />
+                {chosenImages.length > 0 && (
+                  <div className={`grid object-cover h-[600px] pt-2
+                    ${chosenImages.length === 1 ? "grid-cols-1"
+                      : chosenImages.length === 2 ? "grid-cols-2 gap-3"
+                        : chosenImages.length === 3 || 4 ? "grid-cols-2 grid-rows-2 gap-3"
+                          : ""
+                    }`}
+                  >
+                    {chosenImages.map((image, i) => {
+                      const isFirstImage = chosenImages.length === 3 && i === 0;
+                      return (
+                        <Card key={i} className={`relative max-h-[600px] overflow-hidden ${isFirstImage ? "row-span-2" : ""}`}>
+                          <Button
+                            type="button"
+                            size="icon"
+                            variant="secondary"
+                            className="rounded-full absolute top-1 right-1 z-50"
+                            onClick={() => {
+                              setChosenImages(
+                                chosenImages.filter((img, j) => j !== i),
+                              );
+                            }}
+                          >
+                            <Icons.close className="w-6 h-6" />
+                          </Button>
+                          <Image
+                            src={image.url as string}
+                            alt="gweet image"
+                            fill
+                            className="object-cover rounded-lg"
+                          />
+                        </Card>
+                      );
+                    })}
+                  </div>
                 )}
-              />
-              <Button
-                variant="ghost"
-                size="sm"
-                className="absolute bottom-3 right-3"
-                onClick={() => imageUploadRef.current?.click()}
-                disabled={isGweetLoading || !session.user}
-              />
+                {/* {quoted_gweet && <QuotedGweet gweet={quoted_gweet} />} */}
+              </div>
             </Card>
 
             <div className="flex justify-end">
-              <Button type="submit" size="lg" disabled={isGweetLoading || !session.user}>
-                {isComment ? 'Reply' : 'Gweet'}
+              <Button type="submit" size="lg" className=" w-20" disabled={isLoading || !session.user}>
+                {isLoading ? (
+                  <Icons.spinner className="h-4 w-4 animate-spin" />
+                ) : (
+                  isComment ? 'Reply' : 'Gweet'
+                )}
               </Button>
             </div>
           </form>

components/create-gweet/hooks/use-create-gweet.ts

 import { useMutation, useQueryClient } from "@tanstack/react-query";
 
-
 import { postGweet } from "../api/post-gweet";
 
 export const useCreateGweet = () => {
@@ -13,7 +12,6 @@ export const useCreateGweet = () => {
       authorId,
       replyToGweetId,
       quoteGweetId,
-
     }: {
       content: string;
       files: File[];

components/gweets/components/actions/comment-button.tsx

@@ -3,19 +3,16 @@ import { IGweet } from "../../types";
 
 import { Icons } from "@/components/icons";
 
-export const CommentButton = ({
-  gweet,
-}: {
-  gweet: IGweet;
-}) => {
+export const CommentButton = ({ gweet }: { gweet: IGweet }) => {
   return (
-    <Button variant="ghost" size="lg" className="px-6 py-3 hover:bg-sky-800">
-      <Icons.messagecircle className="h-5 w-5" />
-      <span className="pl-2">
-        {gweet?.allComments?.length > 0 && (
-          <span className="">{gweet?.allComments?.length}</span>
-        )}
-      </span>
-    </Button>
+    <div className="relative inline-flex items-center">
+      <Button variant="ghost" size="icon" className="hover:bg-sky-800 z-50">
+        <Icons.messagecircle className="w-6 h-6" />
+      </Button>
+
+      {gweet.allComments.length > 0 && (
+        <span className="absolute pl-12">{gweet.allComments.length}</span>
+      )}
+    </div>
   );
 };
\ No newline at end of file

components/gweets/components/actions/like-button.tsx

@@ -5,43 +5,37 @@ import { Button } from "@/components/ui/button";
 import { useLike } from "../../hooks/use-like";
 import { IGweet } from "../../types";
 
-export const LikeButton = ({
-  gweet,
-}: {
-  gweet?: IGweet;
-  smallIcons?: boolean;
-}) => {
+export const LikeButton = ({ gweet }: { gweet: IGweet }) => {
   const { data: session } = useSession();
-  const hasLiked = gweet?.likes?.some(
-    (like) => like.userId === session?.user?.id,
+  const hasLiked = gweet.likes.some(
+    (like) => like.userId === session?.user.id,
   );
 
   const mutation = useLike({
-    gweetAuthorId: gweet?.author?.id,
-    sessionOwnerId: session?.user?.id,
+    gweetAuthorId: gweet.author.id,
+    sessionOwnerId: session?.user.id,
   });
 
   return (
-    <Button
-      onClick={(e) => {
-        e.stopPropagation();
-        if (!session) {
-          return;
+    <div className="inline-flex items-center">
+      <Button
+        onClick={(e) => {
+          e.stopPropagation();
+          if (session) {
+            mutation.mutate({ gweetId: gweet.id, userId: session.user.id });
+          }
+        }}
+        variant="ghost" size="icon" className="hover:bg-red-800"
+      >
+        {hasLiked ?
+          <Icons.heart className="w-6 h-6 fill-red-600 text-red-600" />
+          : <Icons.heart className="w-6 h-6" />
         }
-        mutation.mutate({ gweetId: gweet?.id, userId: session?.user?.id });
-      }}
-      variant="ghost" size="lg" className="px-6 py-3 hover:bg-red-800"
-    >
-      {hasLiked ?
-        <Icons.heart className="h-5 w-5 fill-red-600 text-red-600" />
-        : <Icons.heart className="h-5 w-5" />
-      }
+      </Button>
 
-      <span className="pl-2">
-        {gweet?.likes && gweet?.likes?.length > 0 && (
-          <span className="">{gweet?.likes?.length}</span>
-        )}
-      </span>
-    </Button>
+      {gweet.likes.length > 0 && (
+        <span className="px-2">{gweet?.likes?.length}</span>
+      )}
+    </div>
   );
 };
\ No newline at end of file

components/gweets/components/actions/regweet-button.tsx

@@ -6,36 +6,35 @@ import { IGweet } from "../../types";
 
 export const RegweetButton = ({ gweet }: { gweet: IGweet }) => {
   const { data: session } = useSession();
-  const hasRegweeted = gweet?.regweets?.some(
-    (regweet) => regweet?.userId === session?.user?.id,
+  const hasRegweeted = gweet.regweets.some(
+    (regweet) => regweet.userId === session?.user?.id,
   );
 
   const mutation = useRegweet();
 
   return (
-    <Button
-      onClick={(e) => {
-        e.stopPropagation();
-        if (!session) {
-          return; //  TODO: show login modal
+    <div className="relative inline-flex items-center">
+      <Button
+        onClick={(e) => {
+          e.stopPropagation();
+          if (session) {
+            mutation.mutate({
+              gweetId: gweet.id,
+              userId: session.user.id,
+            });
+          }
+        }}
+        variant="ghost" size="icon" className="hover:bg-green-800 z-50"
+      >
+        {hasRegweeted ?
+          <Icons.regweet className="w-6 h-6 text-green-600" />
+          : <Icons.regweet className="w-6 h-6" />
         }
-        mutation.mutate({
-          gweetId: gweet?.id,
-          userId: session?.user?.id,
-        });
-      }}
-      variant="ghost" size="lg" className="px-6 py-3 hover:bg-green-800"
-    >
-      {hasRegweeted ?
-        <Icons.regweet className="h-5 w-5 text-green-600" />
-        : <Icons.regweet className="h-5 w-5" />
-      }
+      </Button>
 
-      <span className="pl-2">
-        {gweet && gweet?.regweets?.length > 0 && (
-          <span className="">{gweet?.regweets?.length}</span>
-        )}
-      </span>
-    </Button>
+      {gweet.regweets.length > 0 && (
+        <span className="absolute pl-12">{gweet.regweets.length}</span>
+      )}
+    </div>
   );
 };
\ No newline at end of file

components/gweets/components/delete-gweet-modal.tsx

@@ -4,6 +4,7 @@ import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
 import { useDeleteGweet } from "../hooks/use-delete-gweet";
 import { IGweet } from "../types";
 
+import { Icons } from "@/components/icons";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -14,10 +15,14 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
+import { useRouter } from "next/navigation";
 
 export const DeleteGweetModal = ({ gweet, props, forwardedRef }: { gweet: IGweet, props: any, forwardedRef: any }) => {
   const { triggerChildren, onSelect, onOpenChange, ...itemProps } = props;
-  const mutation = useDeleteGweet();
+  const { isLoading, mutate, isSuccess } = useDeleteGweet();
+
+  const router = useRouter();
+  if (isSuccess) router.push("/home");
 
   return (
     <Dialog onOpenChange={onOpenChange}>
@@ -41,12 +46,20 @@ export const DeleteGweetModal = ({ gweet, props, forwardedRef }: { gweet: IGweet
           </DialogDescription>
         </DialogHeader>
         <DialogFooter>
-          <Button type="submit"
+          <Button
+            variant="destructive"
+            type="submit"
+            disabled={isLoading}
             onClick={() => {
-              mutation.mutate({
+              mutate({
                 gweetId: gweet?.id,
               });
-            }}>Delete</Button>
+            }}>
+            {isLoading && (
+              <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
+            )}
+            Delete
+          </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>

components/gweets/components/gweet-actions.tsx

@@ -10,10 +10,10 @@ export const GweetActions = ({
   gweet: IGweet;
 }) => {
   return (
-    <div className="space-x-2">
+    <div className="space-x-12 w-60">
       <CommentButton gweet={gweet} />
       <RegweetButton gweet={gweet} />
-      <LikeButton gweet={gweet} smallIcons={false} />
+      <LikeButton gweet={gweet} />
     </div>
   );
 };
\ No newline at end of file

components/gweets/components/gweet-details.tsx

@@ -33,33 +33,34 @@ export const GweetDetails = () => {
     }
 
     return (
-        <Card className="w-full h-full mt-12 p-2 xl:p-4 ">
-            <div className="flex flex-col space-y-2 p-3">
+        <Card className="w-full h-full mt-12 p-3 xl:p-6 ">
+            <div className="flex flex-col space-y-3 px-3 pt-3">
                 <GweetAuthor gweet={gweet} />
 
                 {/* TODO needs handling of all gweets above and under the gweet */}
 
-                <div className="flex flex-col space-y-1">
-                    {gweet.content && <h1 className="mt-2">{gweet.content}</h1>}
+                <div className="flex flex-col space-y-3">
+                    {gweet.content && <h1 className="break-words">{gweet.content}</h1>}
 
-                    {gweet.media && gweet.media.length > 0 && (
-                        <div className={`grid object-cover grid-cols-
-                            ${gweet.media.length === 1 ? "1"
-                                : gweet.media.length === 2 ? "2 space-x-3"
-                                    : gweet.media.length === 3 ? "3 space-x-3 space-y-3"
-                                        : gweet.media.length === 4 ? "4 space-x-3 space-y-3"
-                                            : ""
+                    {/* TODO make own component */}
+                    {gweet.media.length > 0 && (
+                        <div className={`grid object-cover h-[600px] ${gweet.media.length === 1 ? "grid-cols-1"
+                            : gweet.media.length === 2 ? "grid-cols-2 gap-3"
+                                : gweet.media.length === 3 || 4 ? "grid-cols-2 grid-rows-2 gap-3"
+                                    : ""
                             }`}
                         >
-                            {gweet.media.slice(0, 4).map((media) => {
+                            {gweet.media.map((image, i) => {
+                                const isFirstImage = gweet.media.length === 3 && i === 0;
                                 return (
-                                    <Image
-                                        key={media.id}
-                                        src={media.url}
-                                        alt={"image-" + media.id}
-                                        width={1000}
-                                        height={1000}
-                                    />
+                                    <Card key={i} className={`relative max-h-[600px] overflow-hidden ${isFirstImage ? "row-span-2" : ""}`}>
+                                        <Image
+                                            src={image.url as string}
+                                            alt="gweet image"
+                                            fill
+                                            className="object-cover rounded-lg"
+                                        />
+                                    </Card>
                                 );
                             })}
                         </div>
@@ -69,22 +70,18 @@ export const GweetDetails = () => {
                     {/* {gweet?.quotedGweet && <QuotedGweet gweet={gweet?.quotedGweet} />} */}
                 </div>
 
-                <div className="w-full">
-                    <div className="flex flex-col items-center flex-wrap md:flex-row space-y-3 md:space-y-0">
-                        <div className="flex-grow text-muted-foreground">
-                            <GweetCreationDate date={gweet.createdAt} />
-                        </div>
-                        <div className="md:items-end">
-                            <GweetActions gweet={gweet} />
-                        </div>
+                <div className="flex flex-col items-center flex-wrap flex-grow sm:flex-row space-y-3 sm:space-y-0">
+                    <div className="flex-grow text-muted-foreground">
+                        <GweetCreationDate date={gweet.createdAt} />
+                    </div>
+                    <div className="sm:items-end">
+                        <GweetActions gweet={gweet} />
                     </div>
                 </div>
 
-
+                <CreateGweetWrapper replyToGweetId={gweet?.id} />
             </div>
-
-            <CreateGweetWrapper replyToGweetId={gweet?.id} />
-            <Separator className=" h-1 mb-3" />
+            <Separator className="h-1 mb-3" />
             <Comments gweetId={gweet?.id} />
         </Card>
     );

components/gweets/components/gweet-options.tsx

@@ -40,13 +40,19 @@ export const GweetOptions = ({ gweet }: { gweet: IGweet }) => {
     return (
         <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
             <DropdownMenuTrigger asChild>
-                <Button variant="ghost" size="icon" ref={dropdownTriggerRef}>
-                    <Icons.moreOptions />
-                </Button>
+                <div className="h-5 flex items-center">
+                    <Button variant="ghost" size="option" ref={dropdownTriggerRef}>
+                        <Icons.moreOptions />
+                    </Button>
+                </div>
             </DropdownMenuTrigger>
             <DropdownMenuContent
-                className="w-56 font-bold cursor-pointer"
+                align="end"
+                className="font-bold cursor-pointer"
                 hidden={hasOpenDialog}
+                onClick={(event) => {
+                    event.stopPropagation();
+                }}
                 onCloseAutoFocus={(event) => {
                     if (focusRef.current) {
                         focusRef.current.focus();
@@ -60,7 +66,7 @@ export const GweetOptions = ({ gweet }: { gweet: IGweet }) => {
                             gweet={gweet}
                             props={{
                                 triggerChildren: (
-                                    <div className="text-red-600">
+                                    <div className="text-red-600 flex">
                                         <Icons.trash className="mr-2 h-4 w-4 " />
                                         <span>Delete</span>
                                     </div>

components/gweets/components/gweet.tsx

 import { buttonVariants } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
 import { UserAvatar } from "@/components/user-avatar";
 import { cn, formatTimeElapsed } from "@/lib/utils";
+import Image from "next/image";
 import { useRouter } from "next/navigation";
 import { IGweet } from "../types";
 import { GweetActions } from "./gweet-actions";
-
+import { GweetOptions } from "./gweet-options";
 
 export const Gweet = ({ gweet }: { gweet: IGweet }) => {
   const router = useRouter();
@@ -13,25 +15,10 @@ export const Gweet = ({ gweet }: { gweet: IGweet }) => {
     <div
       tabIndex={0}
       onClick={() => router.push(`/${gweet.author.username}/status/${gweet.id}`)}
-      className={cn(buttonVariants({ variant: "ghost" }), "flex h-auto w-full text-left cursor-pointer")}
+      className={cn(buttonVariants({ variant: "ghost" }), "flex flex-col flex-grow h-auto w-full text-left cursor-pointer items-start p-3 space-y-3")}
     >
-      <UserAvatar
-        user={{ username: gweet.author.username, image: gweet.author.image }}
-        className="h-10 w-10"
-      />
-      <div className="ml-4 flex flex-col flex-grow">
-        <div>
-          <div className="flex items-center">
-            <h1 className="font-bold mr-2">{gweet.author.name}</h1>
-            <h1 className="text-sky-500 text-sm">
-              @{gweet.author.username}
-            </h1>
-            <h1 className="text-gray-500 text-sm ml-auto">
-              {formatTimeElapsed(gweet.createdAt)}
-            </h1>
-          </div>
-
-          {/* <div className="">
+      {/* TODO replyto */}
+      {/* <div className="">
             {gweet?.replyToGweetId && (
               <div className="">
                 <span className="">Replying to</span>
@@ -47,15 +34,66 @@ export const Gweet = ({ gweet }: { gweet: IGweet }) => {
               </div>
             )}
           </div> */}
+      <div className="flex flex-row h-auto w-full">
+        <UserAvatar
+          user={{ username: gweet.author.username, image: gweet.author.image }}
+          className="h-10 w-10"
+        />
 
-          {gweet?.content && (
-            <h1>{gweet.content}</h1>
-          )}
-        </div>
-        <div className="flex justify-end" >
-          <GweetActions gweet={gweet} />
+        <div className="flex flex-col flex-grow space-y-3 ml-3 w-1">
+          <div className="flex items-start">
+
+            <div className="flex space-x-2 flex-grow">
+              <h1 className="font-bold">{gweet.author.name}</h1>
+              <h1 className="text-sky-500 text-sm">
+                @{gweet.author.username}
+              </h1>
+              <span>·</span>
+              <h1 className="text-gray-500 text-sm">
+                {formatTimeElapsed(gweet.createdAt)}
+              </h1>
+            </div>
+
+            <div className="ml-auto">
+              <GweetOptions gweet={gweet} />
+            </div>
+          </div>
+
+          <div className="flex flex-col flex-grow space-y-3 w-full">
+            {gweet.content && <h1 className="break-words">{gweet.content}</h1>}
+
+            {gweet.media.length > 0 && (
+              <div className={`grid object-cover h-[600px] ${gweet.media.length === 1 ? "grid-cols-1"
+                : gweet.media.length === 2 ? "grid-cols-2 gap-3"
+                  : gweet.media.length === 3 || 4 ? "grid-cols-2 grid-rows-2 gap-3"
+                    : ""
+                }`}
+              >
+                {gweet.media.map((image, i) => {
+                  const isFirstImage = gweet.media.length === 3 && i === 0;
+                  return (
+                    <Card key={i} className={`relative max-h-[600px] overflow-hidden ${isFirstImage ? "row-span-2" : ""}`}>
+                      <Image
+                        src={image.url as string}
+                        alt="gweet image"
+                        fill
+                        className="object-cover rounded-lg"
+                      />
+                    </Card>
+                  );
+                })}
+              </div>
+            )}
+
+            {/* TODO */}
+            {/* {quoted_gweet && <QuotedGweet gweet={quoted_gweet} />} */}
+          </div>
         </div>
       </div>
+
+      <div className="flex justify-end flex-grow w-full" >
+        <GweetActions gweet={gweet} />
+      </div>
     </div>
   );
 };
\ No newline at end of file

components/gweets/components/gweets.tsx

@@ -28,7 +28,7 @@ export const Gweets = () => {
   }
 
   return (
-    <Card className="w-full h-full mt-12 p-2 xl:p-4 ">
+    <Card className="w-full h-full mt-6 p-2 xl:p-4 ">
       <InfiniteGweets
         gweets={gweets}
         isSuccess={isSuccess}

components/ui/button.tsx

@@ -17,13 +17,15 @@ const buttonVariants = cva(
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
+        hover: "hover:bg-accent hover:text-accent-foreground hover:shadow-md hover:ring-2 hover:ring-ring hover:ring-offset-2",
         link: "underline-offset-4 hover:underline text-primary",
       },
       size: {
         default: "h-10 py-2 px-4",
         sm: "h-9 px-3 rounded-md",
         lg: "h-11 px-8 rounded-full",
-        icon: "h-10 w-10",
+        icon: "h-10 w-10 rounded-full",
+        option: "h-8 w-8 rounded-full",
       },
     },
     defaultVariants: {

lib/utils.ts

 import { env } from "@/env.mjs"
 import { ClassValue, clsx } from "clsx"
+import dayjs from "dayjs"
 import { twMerge } from "tailwind-merge"
 
 // tailwindcss classnames generator from shadcn
@@ -28,15 +29,15 @@ export function formatDate(data: number) {
 }
 
 export function formatTimeElapsed(createdAt: Date) {
-  const now = new Date();
-  const timeDiff = Math.abs(now.getTime() - new Date(createdAt).getTime()); // Difference in milliseconds
+  const now = dayjs();
+  const timeDiff = Math.abs(now.diff(dayjs(createdAt))); // Difference in milliseconds
   const seconds = Math.floor(timeDiff / 1000); // Convert to seconds
   const minutes = Math.floor(seconds / 60); // Convert to minutes
   const hours = Math.floor(minutes / 60); // Convert to hours
   const days = Math.floor(hours / 24); // Convert to days
 
   if (days > 0) {
-    return new Date(createdAt).toLocaleDateString(); // Show the date if days have passed
+    return dayjs(createdAt).format('L'); // Show the date if days have passed
   } else if (hours > 0) {
     return hours + 'h'; // Show hours if hours have passed
   } else if (minutes > 0) {