feat: update flex style

Author: luannguyenQV

apps/web/@/messages/en.json

@@ -112,10 +112,11 @@
     "post_created": "Post created successfully",
     "post_updated": "Post updated successfully"
   },
-  "upload": {
+  "uploads": {
     "asset_management": "Asset Management",
     "upload_image": "Upload Image",
     "select": "Select",
-    "upload": "Upload"
+    "upload": "Upload",
+    "has_been_selected": "has been selected"
   }
 }

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

@@ -38,8 +38,8 @@ const AssetManagement = () => {
   }
 
   return (
-    <div className="gap-4">
-      <div className="flex gap-4 px-1 py-1">
+    <div className="py-4">
+      <div className="flex gap-4 p-1">
         <SearchBar />
         <div>filter...</div>
       </div>

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

@@ -1,11 +1,7 @@
 import React, { createContext, useCallback, useContext, useReducer } from "react"
 
-import { OrderBy } from "database"
+import { Image, OrderBy } from "database"
 
-// newest
-// oldest
-// name A-Z
-// name Z-A
 export const OrderField = {
   newest: "createdAt",
   oldest: "createdAt",
@@ -14,13 +10,13 @@ export const OrderField = {
 }
 
 export type FileManagerState = {
-  selectedFiles: File[]
+  selectedFiles: Image[]
   search: string
   orderBy: OrderBy
   order: (typeof OrderField)[keyof typeof OrderField]
 }
 export type FileManagerContextType = FileManagerState & {
-  setSelectedFiles: (files: File[]) => void
+  setSelectedFiles: (files: Image[]) => void
   setSearch: (search: string) => void
   setOrder: (order: "asc" | "desc") => void
   setOrderBy: (orderBy: string) => void
@@ -64,7 +60,7 @@ const FileManagerContainer = ({ children }: { children: React.ReactNode }) => {
     orderBy: "asc",
   })
 
-  const setSelectedFiles = useCallback((files: File[]) => {
+  const setSelectedFiles = useCallback((files: Image[]) => {
     dispatch({ type: "SET_SELECTED_FILES", payload: files })
   }, [])
 

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

@@ -1,19 +1,25 @@
-import React, { useState } from "react"
+import React from "react"
 import Image from "next/image"
 
 import { Image as ImageType } from "database"
 import { Check, Circle, TrashIcon } from "lucide-react"
 import { Button } from "ui"
 
+import { useFileManager } from "./FileManagerContainer"
+
 type ImageListProps = {
   images: ImageType[]
 }
 
 const ImageList: React.FC<ImageListProps> = ({ images }) => {
-  const [selectedImage, setSelectedImage] = useState<ImageType | null>(null)
+  const { selectedFiles, setSelectedFiles } = useFileManager()
+
+  const handleSelect = (image: ImageType) => {
+    setSelectedFiles([image])
+  }
 
   return (
-    <div className="mt-2 flex flex-wrap gap-3">
+    <div className="mt-2 flex flex-wrap gap-3 p-1">
       {images?.map((image) => (
         <div
           key={image.id}
@@ -38,15 +44,17 @@ const ImageList: React.FC<ImageListProps> = ({ images }) => {
             variant="outline"
             className="absolute right-1 top-1 h-7 w-7 rounded-full p-0"
             onClick={() => {
-              console.log(image)
-
-              setSelectedImage(image)
+              if (selectedFiles?.at(0)?.id === image.id) {
+                setSelectedFiles([])
+              } else {
+                handleSelect(image)
+              }
             }}
           >
-            {selectedImage?.id === image.id ? (
+            {selectedFiles?.at(0)?.id === image.id ? (
               <Check
                 strokeWidth={1.5}
-                className="h-6 w-6 text-blue-500"
+                className="h-5 w-5 text-blue-500"
               />
             ) : (
               <Circle className="h-6 w-6" />

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

@@ -1,5 +1,6 @@
-import { ReactNode, useState } from "react"
+import { ReactNode } from "react"
 
+import { Image } from "database"
 import { useTranslations } from "next-intl"
 import {
   Button,
@@ -9,35 +10,83 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
+  Typography,
 } from "ui"
 
 import AssetManagement from "./AssetsManagement"
-import FileManagerContainer from "./FileManagerContainer"
+import FileManagerContainer, { useFileManager } from "./FileManagerContainer"
 import UploadImageButton from "./UploadImageButton"
 
 interface UploadProps {
   children: ReactNode
+  onSelect: (image?: Image) => void
 }
 
-const Upload: React.FC<UploadProps> = ({ children }) => {
-  const t = useTranslations("common")
+interface SelectButtonProps {
+  onSelect: (image?: Image) => void
+}
+
+const SelectButton: React.FC<SelectButtonProps> = ({ onSelect }) => {
+  const t = useTranslations("uploads")
+  const { selectedFiles } = useFileManager()
+
+  const handleSelect = () => {
+    onSelect(selectedFiles?.at(0) || null)
+  }
+
+  return <Button onClick={handleSelect}>{t("select")}</Button>
+}
+
+const SelectedFiles: React.FC = () => {
+  const t = useTranslations("uploads")
+
+  const { selectedFiles } = useFileManager()
+
+  if (!selectedFiles || selectedFiles.length === 0) return null
+
+  if (selectedFiles.length === 1) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <Typography
+          variant="span"
+          className="max-w-[100px] truncate text-sm font-semibold"
+        >
+          {selectedFiles[0].name}
+        </Typography>
+        <Typography
+          variant="span"
+          className="ml-1 text-sm"
+        >
+          {t("has_been_selected")}
+        </Typography>
+      </div>
+    )
+  }
+
+  return <div className="flex h-full items-center">{selectedFiles?.length} files selected</div>
+}
+
+const Upload: React.FC<UploadProps> = ({ children, onSelect }) => {
+  const t = useTranslations("uploads")
 
   return (
     <FileManagerContainer>
       <Dialog>
         <DialogTrigger asChild>{children}</DialogTrigger>
-        <DialogContent className="w-full max-w-[800px]">
-          <DialogHeader className="flex flex-row items-center gap-4">
-            <DialogTitle className="mb-0">Asset Management</DialogTitle>
+        <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">
+            <DialogTitle className="mb-0">{t("asset_management")}</DialogTitle>
             <UploadImageButton />
           </DialogHeader>
 
-          <div className="h-[300px] overflow-scroll">
+          <div className="h-[400px] overflow-scroll px-4 py-0">
             <AssetManagement />
           </div>
 
-          <DialogFooter>
-            <Button>Select</Button>
+          <DialogFooter className="mt-0 flex flex-row items-center justify-between border-t px-4 py-2">
+            <SelectedFiles />
+
+            <SelectButton onSelect={onSelect} />
           </DialogFooter>
         </DialogContent>
       </Dialog>

apps/web/public/uploads/2024-08-13/large-4c7e9cf4-b12f-4ae6-9576-12cb4484cd72.jpg

@@ -25,6 +25,7 @@ const typographyVariants = cva("text-foreground", {
       largeText: "text-lg font-semibold",
       smallText: "text-sm font-medium leading-none",
       mutedText: "text-sm text-muted-foreground",
+      span: "text-sm",
     },
   },
   defaultVariants: {
@@ -49,6 +50,7 @@ const variantElementMap: Record<NonNullable<VariantPropType["variant"]>, string>
   lead: "p",
   mutedText: "p",
   ul: "ul",
+  span: "span",
 }
 
 export interface TypographyProps