Merge pull request #474 from wri/feat/TM-1238-new-image-profile

[TM-1238] feat: new image profile Design
wri · Aug 30, 2024 · c339ccd · c339ccd
2 parents 91daab1 + fcdafba
commit c339ccd
Show file tree

Hide file tree

Showing 15 changed files with 329 additions and 66 deletions.
diff --git a/public/images/map-img.png b/public/images/map-img.png
diff --git a/src/components/elements/Breadcrumbs/Breadcrumbs.tsx b/src/components/elements/Breadcrumbs/Breadcrumbs.tsx
@@ -5,22 +5,26 @@ import LinkWrapper from "@/components/elements/LinkWrapper/LinkWrapper";
 import Text from "@/components/elements/Text/Text";
 import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
 import { History } from "@/context/routeHistory.provider";
+import { TextVariants } from "@/types/common";
 
 export interface BreadcrumbsProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
   links: (Omit<History, "path"> & { path?: string })[];
+  clasNameText?: string;
+  textVariant?: TextVariants;
 }
 
-const Breadcrumbs = ({ className, links, ...props }: BreadcrumbsProps) => {
+const Breadcrumbs = ({ className, links, clasNameText, textVariant, ...props }: BreadcrumbsProps) => {
   return (
     <div {...props} className={classNames(className, "flex items-center gap-3")}>
       {links.map((item, index) => (
         <Fragment key={`${item.path} + ${index}`}>
           <LinkWrapper href={item.path}>
             <Text
-              variant="text-14-bold"
+              variant={textVariant || "text-14-bold"}
               className={classNames(
                 { "text-darkCustom opacity-60 hover:underline": !!item.path, "text-darkCustom": !item.path },
-                "line-clamp-1"
+                "line-clamp-1",
+                clasNameText
               )}
               title={item.title}
             >

diff --git a/src/components/elements/ImageGallery/ImageGalleryItem.tsx b/src/components/elements/ImageGallery/ImageGalleryItem.tsx
@@ -5,6 +5,9 @@ import { DetailedHTMLProps, FC, HTMLAttributes } from "react";
 import { MenuItemProps } from "@/components/elements/Menu/Menu";
 import Text from "@/components/elements/Text/Text";
 import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
+import { ModalId } from "@/components/extensive/Modal/ModalConst";
+import ModalImageDetails from "@/components/extensive/Modal/ModalImageDetails";
+import { useModalContext } from "@/context/modal.provider";
 
 import ImageWithChildren from "../ImageWithChildren/ImageWithChildren";
 import Menu from "../Menu/Menu";
@@ -28,20 +31,30 @@ export interface ImageGalleryItemProps extends DetailedHTMLProps<HTMLAttributes<
 }
 
 const ImageGalleryItem: FC<ImageGalleryItemProps> = ({ data, onClickGalleryItem, onDelete, className, ...rest }) => {
+  const { openModal, closeModal } = useModalContext();
   const t = useT();
 
   const handleDelete = () => {
     onDelete?.(data.uuid);
   };
 
+  const openMopdalImageDetail = () => {
+    openModal(
+      ModalId.MODAL_IMAGE_DETAIL,
+      <ModalImageDetails title="IMAGE DETAILS" onClose={() => closeModal(ModalId.MODAL_IMAGE_DETAIL)} />,
+      true
+    );
+  };
+
   const galeryMenu: MenuItemProps[] = [
     {
       id: "1",
       render: () => (
         <Text variant="text-12-bold" className="pr-3">
           {t("Edit Attributes")}
         </Text>
-      )
+      ),
+      onClick: openMopdalImageDetail
     },
     {
       id: "2",
@@ -103,12 +116,15 @@ const ImageGalleryItem: FC<ImageGalleryItemProps> = ({ data, onClickGalleryItem,
 
       <div className="p-4">
         <div className="flex items-center justify-between gap-1">
-          <Text variant="text-14-bold" className="flex items-center gap-1 text-darkCustom">
-            {data.label.split(":")[0]}:<Text variant="text-14-bold">{data.label.split(":")[1]}</Text>
+          <Text variant="text-16-bold" className="flex items-center gap-1 text-darkCustom">
+            {data.label.split(":")[0]}:<Text variant="text-16-bold">{data.label.split(":")[1]}</Text>
           </Text>
-          <div className="rounded-lg p-1 text-darkCustom hover:bg-grey-800 hover:text-primary">
+          <button
+            className="rounded-lg p-1 text-darkCustom hover:bg-grey-800 hover:text-primary"
+            onClick={openMopdalImageDetail}
+          >
             <Icon name={IconNames.EDIT} height={24} width={24} className="" />
-          </div>
+          </button>
         </div>
 
         {data.subtitle && (