feat: add image for post create/update

Author: luannguyenQV

apps/web/@/molecules/post-form/index.tsx

@@ -1,16 +1,18 @@
 "use client"
 
-import React from "react"
+import React, { useState } from "react"
 import dynamic from "next/dynamic"
+import Image from "next/image"
 import Link from "next/link"
 
 import { zodResolver } from "@hookform/resolvers/zod"
-import { Prisma } from "database"
+import { Image as ImageType, Prisma } from "database"
+import { Upload as UploadIcon, X } from "lucide-react"
 import { useSession } from "next-auth/react"
 import { useTranslations } from "next-intl"
 import { Controller, useForm } from "react-hook-form"
 import AsyncCreatableSelect from "react-select/async-creatable"
-import { buttonVariants, cn, Label, LoadingButton } from "ui"
+import { Button, buttonVariants, cn, Label, LoadingButton, Typography } from "ui"
 import z from "zod"
 
 import { handleCreateUpdatePost } from "@/actions/protect/postAction"
@@ -27,6 +29,7 @@ const PostForm = ({ post: postData }: { post?: TPostItem }) => {
   const { title = "", content = "", tagOnPost = [], id: postId } = postData || {}
   const t = useTranslations()
   const session = useSession()
+  const [image, setImage] = useState<ImageType | null>(null)
 
   const userId = session?.data?.user?.id
 
@@ -117,11 +120,35 @@ const PostForm = ({ post: postData }: { post?: TPostItem }) => {
             </div>
           </div>
           <div className="col-span-1">
-            <Upload>
-              <div className="flex h-[150px] cursor-pointer items-center justify-center rounded-sm bg-slate-300">
-                <div>Upload</div>
-              </div>
-            </Upload>
+            <div className="relative rounded-lg border-2 p-2">
+              <Upload onSelect={setImage}>
+                {image ? (
+                  <div className="relative">
+                    <Image
+                      src={image.url}
+                      alt="image"
+                      width={480}
+                      height={270}
+                      className="border-1 flex aspect-video w-full cursor-pointer rounded-sm object-cover"
+                    />
+                  </div>
+                ) : (
+                  <div className="border-1 flex aspect-video w-full cursor-pointer flex-col items-center justify-center gap-2 rounded-sm bg-slate-200">
+                    <UploadIcon />
+                    <Typography variant="mutedText">{t("uploads.upload_image")}</Typography>
+                  </div>
+                )}
+              </Upload>
+              {image && (
+                <Button
+                  onClick={() => setImage(null)}
+                  variant="outline"
+                  className="absolute right-2 top-2 h-6 w-6 p-0"
+                >
+                  <X className="text-destructive" />
+                </Button>
+              )}
+            </div>
             <div className="mt-4">
               <Label>Tags</Label>
               <Controller

apps/web/@/molecules/upload/index.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react"
+import { ReactNode, useState } from "react"
 
 import { Image } from "database"
 import { X } from "lucide-react"
@@ -95,10 +95,19 @@ const TotalItems: React.FC = () => {
 
 const Upload: React.FC<UploadProps> = ({ children, onSelect }) => {
   const t = useTranslations("uploads")
+  const [open, setOpen] = useState(false)
+
+  const onSelectImage = (image?: Image) => {
+    onSelect(image)
+    setOpen(false)
+  }
 
   return (
     <FileManagerContainer>
-      <Dialog>
+      <Dialog
+        open={open}
+        onOpenChange={setOpen}
+      >
         <DialogTrigger asChild>{children}</DialogTrigger>
         <DialogContent className="w-full max-w-[800px] gap-0 p-0">
           <DialogHeader className="mb-0 flex flex-row items-center gap-4 border-b px-4 py-1">
@@ -115,7 +124,7 @@ const Upload: React.FC<UploadProps> = ({ children, onSelect }) => {
               <TotalItems />
               <SelectedFiles />
             </div>
-            <SelectButton onSelect={onSelect} />
+            <SelectButton onSelect={onSelectImage} />
           </DialogFooter>
         </DialogContent>
       </Dialog>