Merge pull request #225 from chingu-x/fix/resource-card-title-fix

Fix/fix ResourceItem and ResourceCard title issue
chingu-x · Aug 30, 2024 · 56ad08e · 56ad08e
2 parents ea1780f + 9cc1e21
commit 56ad08e
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 33 deletions.
diff --git a/src/app/(main)/dashboard/components/voyage-dashboard/ResourceItem.tsx b/src/app/(main)/dashboard/components/voyage-dashboard/ResourceItem.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState } from "react";
+import React from "react";
 import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid";
 import Badge from "@/components/badge/Badge";
 import { useAppDispatch } from "@/store/hooks";
@@ -21,7 +21,6 @@ function ResourceItem({
   userAvatarUrl,
 }: ResourceItemProps) {
   const dispatch = useAppDispatch();
-  const [widgetHovered, setWidgetHovered] = useState<boolean>(false);
 
   const openViewModal = (event: React.MouseEvent) => {
     event.stopPropagation();
@@ -40,17 +39,15 @@ function ResourceItem({
   };
 
   return (
-    <div
+    <button
+      type="button"
+      aria-label="open resource details"
       key={title}
-      className="mb-4 flex h-[79px] w-full cursor-pointer items-center justify-between rounded-lg bg-base-200 p-4 hover:shadow-md"
+      className="group mb-4 flex w-full cursor-pointer items-center justify-between gap-x-4 rounded-lg bg-base-200 hover:shadow-md"
       onClick={openViewModal}
-      onMouseEnter={() => setWidgetHovered(true)}
-      onMouseLeave={() => setWidgetHovered(false)}
     >
-      <div className="flex max-w-[400px] flex-col">
-        <p className="mb-1 w-[300px] truncate text-base font-semibold max-[1469px]:w-full max-[1200px]:w-56">
-          {title}
-        </p>
+      <div className="flex flex-col p-4">
+        <p className="mb-1 text-left text-base font-semibold">{title}</p>
         <div className="flex">
           <p className="mr-2 text-base font-medium">Shared by</p>
           <Badge
@@ -61,12 +58,8 @@ function ResourceItem({
           />
         </div>
       </div>
-      <ArrowTopRightOnSquareIcon
-        className={`mr-3 h-6 w-6 text-base-300 ${
-          widgetHovered ? "stroke-base-300" : ""
-        }`}
-      />
-    </div>
+      <ArrowTopRightOnSquareIcon className="m-7 h-6 w-6 shrink-0 text-base-300 group-hover:stroke-base-300" />
+    </button>
   );
 }
 

diff --git a/src/app/(main)/my-voyage/[teamId]/voyage-resources/components/ResourceCard.tsx b/src/app/(main)/my-voyage/[teamId]/voyage-resources/components/ResourceCard.tsx
@@ -64,34 +64,34 @@ export default function ResourceCard({
   };
 
   return (
-    <div className="group flex w-full items-center rounded-xl border border-base-200 bg-base-200 p-2 shadow-sm transition-all hover:border-base-100 hover:shadow-md [&>*]:cursor-pointer">
-      <ArrowTopRightOnSquareIcon
+    <div className="group relative flex w-full flex-nowrap items-center gap-x-2 rounded-xl border border-base-200 bg-base-200 shadow-sm transition-all hover:border-base-100 hover:shadow-md xl:gap-x-6">
+      <button
+        type="button"
+        aria-label="open resource details"
         onClick={openViewModal}
-        className="ml-2 mr-4 h-8 w-8 stroke-1 transition-all group-hover:stroke-2"
-      />
-      <div
-        onClick={openViewModal}
-        className="flex w-full flex-col justify-center overflow-hidden p-2"
+        className="before:absolute before:left-0 before:top-0 before:h-full before:w-full before:content-['']"
       >
-        <h1 className="w-1/2 truncate text-xl font-bold">{title}</h1>
-        <div className="mt-2 flex [&>*]:mr-8">
-          <div className="flex items-center gap-x-2">
+        <ArrowTopRightOnSquareIcon className="mx-6 h-8 w-8 stroke-1 transition-all group-hover:stroke-2" />
+      </button>
+      <div className="my-2 flex w-full flex-col justify-center overflow-hidden p-2">
+        <h2 className="text-xl font-semibold text-base-300">{title}</h2>
+        <div className="mt-2 flex">
+          <div className="flex items-center gap-x-2 border-r border-r-base-100 pr-4 xl:pr-8">
             <p>Shared by</p>
             <Badge title={user.firstName} avatarUrlImage={user.avatar} />
           </div>
-          <div className="h-5 w-1 border border-y-0 border-l-0 border-r-neutral-content"></div>
-          <div className="text-neutral-focus">Added {date}</div>
+          <div className="pl-4 text-neutral-focus xl:pl-8">Added {date}</div>
         </div>
       </div>
-      {userId === currentUserId ? (
+      {userId === currentUserId && (
         <IconButton
-          className="flex h-10 w-10 items-center justify-center rounded-full hover:bg-base-100"
+          className="z-10 mx-6"
           onClick={openDeleteModal}
           ariaLabel="delete"
         >
-          <TrashIcon className="h-6 w-6" />
+          <TrashIcon />
         </IconButton>
-      ) : null}
+      )}
     </div>
   );
 }
diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
@@ -16,7 +16,7 @@ export default function IconButton({
     <button
       type="button"
       className={cn(
-        "flex h-10 w-10 items-center justify-center rounded-full px-2 hover:bg-base-300/25 [&>*]:h-5 [&>*]:w-5 [&>*]:stroke-[1.5px] [&>*]:text-base-300",
+        "flex h-10 w-10 shrink-0 items-center justify-center rounded-full p-2 hover:bg-base-300/25 [&>*]:h-5 [&>*]:w-5 [&>*]:stroke-[1.5px] [&>*]:text-base-300",
         className,
       )}
       aria-label={ariaLabel}