Merge pull request #48 from wordigo/dictionaries_card_structure

style: edit library page card structure
wordigo · Nov 9, 2023 · 723f457 · 723f457
2 parents 8e458d5 + bf9d4a9
commit 723f457
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 37 deletions.
diff --git a/apps/next/src/components/Published/PublishedItem.tsx b/apps/next/src/components/Published/PublishedItem.tsx
@@ -20,46 +20,54 @@ const PublishedItem = (item: IDictionary) => {
       }}
       as={`/library/${item.slug}`}
       key={item.id}
-      className="w-full sm:w-[calc(50%-12px)] md:w-[calc(50%-16px)] lg:w-[calc(33%-18.5px)] max-w-sm sm:max-w-none"
+      className="w-full sm:w-[calc(50%-12px)] md:w-[calc(50%-16px)] lg:w-[calc(33%-18.5px)] max-w-sm sm:max-w-none group"
     >
-      <div className="w-full h-full flex flex-col gap-3 sm:gap-4 md:gap-5 justify-between rounded-2xl">
-        <div className="relative h-60">
-          <Image
-            alt={item.title}
-            src={item.image || "/images/dictionary_banner.jpg"}
-            className="object-cover rounded-lg"
-            placeholder="blur"
-            blurDataURL={item.image || "/images/dictionary_banner.jpg"}
-            fill
-          />
-        </div>
+      <div className="w-full h-full">
+        <div className="h-full flex flex-col rounded-lg border group-hover:border-gray-300/95 dark:group-hover:border-[#2e3d56] transition-colors">
+          <div className="relative h-60">
+            <Image
+              alt={item.title}
+              src={item.image || "/images/dictionary_banner.jpg"}
+              className="object-cover rounded-t-lg"
+              placeholder="blur"
+              blurDataURL={item.image || "/images/dictionary_banner.jpg"}
+              fill
+            />
+          </div>
 
-        <div className="py-1 w-fit flex items-center pl-1 pr-2.5 rounded-[0.625rem] text-xs font-medium border">
-          <span className="px-1.5 inline-flex items-center py-0.5 rounded-md border mr-2">
-            <Star fill="currentColor" className="h-3 w-3 mr-1" />
-            {item.rate}
-          </span>
-          {roundToFiveOrTen(item.numberOfWords)}+ {t("general.words")}
-        </div>
+          <div className="flex flex-col gap-4 sm:gap-5 justify-between grow p-4">
+            <div className="flex flex-col gap-4 sm:gap-5">
+              <div className="py-1 w-fit flex items-center pl-1 pr-2.5 rounded-[0.625rem] text-xs font-medium border">
+                <span className="px-1.5 inline-flex items-center py-0.5 rounded-md border mr-2">
+                  <Star fill="currentColor" className="h-3 w-3 mr-1" />
+                  {item.rate}
+                </span>
+                {roundToFiveOrTen(item.numberOfWords)}+ {t("general.words")}
+              </div>
 
-        <div>
-          <h3 className="text-2xl font-semibold">{item.title}</h3>
-          <h4 className="text-base text-muted-foreground mt-2">
-            {item.description}
-          </h4>
-        </div>
+              <div>
+                <h3 className="text-2xl font-semibold">{item.title}</h3>
+                <h4 className="text-base text-muted-foreground mt-3 text-ellipsis line-clamp-2">
+                  {item.description}
+                </h4>
+              </div>
+            </div>
 
-        <span className="flex items-center">
-          <Avatar className="relative mr-3 h-10 md:h-12 w-10 md:w-12">
-            <AvatarImage
-              className="w-10 md:w-12 h-10 md:h-12"
-              src={item.author.avatar_url}
-              alt={"@" + item.author.name}
-            />
-            <AvatarFallback>{computedName}</AvatarFallback>
-          </Avatar>
-          <span className="text-sm font-semibold">{item.author.name}</span>
-        </span>
+            <span className="flex items-center">
+              <Avatar className="relative w-8 md:w-10 h-8 md:h-10">
+                <AvatarImage
+                  className="w-full h-full"
+                  src={item.author.avatar_url}
+                  alt={"@" + item.author.name}
+                />
+                <AvatarFallback>{computedName}</AvatarFallback>
+              </Avatar>
+              <span className="ml-3 text-sm font-semibold">
+                {item.author.name}
+              </span>
+            </span>
+          </div>
+        </div>
       </div>
     </Link>
   );

diff --git a/apps/next/src/components/Published/index.tsx b/apps/next/src/components/Published/index.tsx
@@ -43,7 +43,7 @@ const Published = () => {
       ) : (
         <main
           className={cn(
-            "mt-6 sm:mt-8 flex flex-wrap justify-center sm:justify-start gap-x-4 sm:gap-x-6 md:gap-x-8 gap-y-12 sm:gap-y-14 md:gap-y-16 transition-transform duration-300",
+            "mt-6 sm:mt-8 flex flex-wrap justify-center sm:justify-start gap-4 sm:gap-6 md:gap-8 transition-transform duration-300",
             isAccordionShow
               ? "translate-y-[221px] sm:translate-y-[82px]"
               : "sm:translate-y-0"