refactor: enhance PlayCard and Like components for improved UI and functionality

src/common/components/Like/Like.jsx

@@ -8,10 +8,14 @@ const Like = ({ onLikeClick, likeObj }) => {
   };
 
   return (
-    <button className="action counted -mr-0.5" onClick={likeClickHandler}>
-      <AiOutlineLike className={liked ? 'hidden' : 'icon'} size="24px" />
-      <AiFillLike className={liked ? 'icon' : 'hidden'} size="24px" />
-      {number > 0 ? <div className="count-value">{number}</div> : <div />}
+    <button
+      className="inline-flex items-center gap-1 -mr-0.5"
+      type="button"
+      onClick={likeClickHandler}
+    >
+      <AiOutlineLike className={liked ? 'hidden' : 'icon'} size={24} />
+      <AiFillLike className={liked ? 'icon' : 'hidden'} size={24} />
+      {number > 0 && <span className="text-sm leading-none align-middle">{number}</span>}
     </button>
   );
 };

src/common/playlists/PlayCard.jsx

@@ -1,62 +1,122 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { BsPlayCircleFill } from 'react-icons/bs';
 import { BiLogoTypescript, BiLogoJavascript } from 'react-icons/bi';
 import PlayShare from './PlayShare.jsx';
-
-import Shimmer from 'react-shimmer-effect';
 import Like from 'common/components/Like/Like';
 import userImage from 'images/user.png';
 
+const formatDate = (dateString) => dateString || '';
+
 function PlayCard({ play, cover, likeObject }) {
-  return (
-    <Link to={`/plays/${encodeURI(play.github.toLowerCase())}/${play.slug}`}>
-      <div className="play-card-container">
-        <div className="play-thumb-container">
-          <Shimmer>
-            <img alt="" className="play-card-thumb-img" src={cover} />
-          </Shimmer>
-          <BsPlayCircleFill className="play-icon" color="white" size={80} />
+  const [isExpanded, setIsExpanded] = useState(false);
+  if (!play || !play.github || !play.slug) return null;
+
+  const avatarSrc =
+    play?.user?.avatarUrl && play.user.avatarUrl.length ? play.user.avatarUrl : userImage;
+
+  const LanguageBadge = () => {
+    if (play.language === 'ts') {
+      return (
+        <div className="flex items-start space-x-1 bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded-md w-fit mb-3">
+          <BiLogoTypescript color="#007acc" size={16} />
+          <span>Typescript</span>
         </div>
+      );
+    }
+    if (play.language === 'js') {
+      return (
+        <div className="flex items-start space-x-1 bg-yellow-100 text-yellow-800 text-xs font-semibold px-2.5 py-0.5 rounded-md w-fit mb-3">
+          <BiLogoJavascript color="#F0DB4F" size={16} />
+          <span>Javascript</span>
+        </div>
+      );
+    }
+
+    return null;
+  };
+
+  const linkTo = `/plays/${encodeURI(play.github.toLowerCase())}/${play.slug}`;
 
-        {/* <div className="border" /> */}
-        <div className="card-header">{play.name}</div>
-        {play.user && (
-          <div className="author">
-            <img
-              alt="avatar"
-              className="rounded-full border border-zink"
-              height="25px"
-              loading="lazy"
-              src={
-                play?.user.avatarUrl
-                  ? play?.user.avatarUrl.length
-                    ? play?.user.avatarUrl
-                    : userImage
-                  : userImage
-              }
-              width="25px"
+  return (
+    <Link className="group block" to={linkTo}>
+      <div className="play-card-container max-w-sm bg-white rounded-xl overflow-hidden flex flex-col h-full">
+        {cover && (
+          <div className="relative h-48">
+            <img alt={play.name} className="w-full h-full object-cover" src={cover} />
+            <div className="absolute inset-0 thumb-overlay pointer-events-none" />
+            <BsPlayCircleFill
+              className="absolute inset-0 m-auto z-10 opacity-0 transition-opacity duration-200 pointer-events-none"
+              color="white"
+              size={80}
             />
-            <div className="author-name">{play?.user.displayName}</div>
           </div>
         )}
-        <div className="play-actions mt-4">
-          <div className="like-container">
-            <Like likeObj={likeObject()} onLikeClick={null} />
-            <div style={{ display: 'flex', alignItems: 'center' }}>
-              <PlayShare
-                cover={cover}
-                link={`/plays/${encodeURI(play.github.toLowerCase())}/${play.slug}`}
+
+        <div className="p-5 flex flex-col flex-grow">
+          <LanguageBadge />
+
+          {play.user?.displayName && (
+            <div className="flex items-center text-sm text-gray-600 mb-4">
+              <img
+                alt="avatar"
+                className="rounded-full h-6 w-6 object-cover mr-2"
+                loading="lazy"
+                src={avatarSrc}
               />
-              {play.language === 'ts' ? (
-                <BiLogoTypescript className="lang-icon" color="#007acc" size={25} />
-              ) : (
-                <BiLogoJavascript className="lang-icon" color="#F0DB4F" size={25} />
+              <span className="font-semibold text-gray-800">{play.user.displayName}</span>
+              {play.date && (
+                <>
+                  <span className="mx-2">—</span>
+                  <span className="text-gray-500">{formatDate(play.date)}</span>
+                </>
               )}
             </div>
+          )}
+
+          <div className="card-header text-md font-bold text-gray-900 mb-2">{play.name}</div>
+
+          {play.description && (
+            <div className="mb-6 flex-grow">
+              <p className={`text-gray-700 text-xs ${!isExpanded ? 'line-clamp-3' : ''}`}>
+                {play.description}
+              </p>
+            </div>
+          )}
+
+          <div className="mt-auto flex items-center justify-between pt-4 border-t border-gray-100">
+            {likeObject &&
+              (() => {
+                const data = likeObject?.();
+
+                return (
+                  <div className="inline-flex items-center gap-2 whitespace-nowrap">
+                    <Like likeObj={data} onLikeClick={null} />
+                  </div>
+                );
+              })()}
+
+            <div className="flex items-center gap-3">
+              <div className="flex items-center gap-3" onClick={(e) => e.preventDefault()}>
+                <PlayShare cover={cover} link={linkTo} />
+              </div>
+            </div>
           </div>
         </div>
       </div>
+
+      <style>
+        {`
+    .group:hover .play-card-container .relative .z-10 { opacity: 1; }
+
+    .group:hover .play-card-container .relative .thumb-overlay {
+      background-color: rgba(0, 0, 0, 0.4);
+      backdrop-filter: blur(6px);
+      -webkit-backdrop-filter: blur(6px);
+      transition: background-color 200ms ease, backdrop-filter 200ms ease;
+    }
+  `}
+      </style>
     </Link>
   );
 }

src/common/playlists/PlayShare.jsx

@@ -115,7 +115,7 @@ function PlayShare({ cover, link }) {
           setShowModal(true);
         }}
       >
-        <IoShareOutline className="mx-2" />
+        <IoShareOutline className="mx-2 w-6 h-6" />
       </button>
     </div>
   );

src/common/playlists/playlist.css

@@ -842,17 +842,18 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  border: 2px solid #757575;
+  border: 2px solid #efefef;
   border-radius: 8px;
   overflow: hidden;
   transition: transform 0.2s ease-in-out;
-  width: 300px;
-  height: 100%;
+  width: 350px;
+  /* height: 100%; */
   padding: 12px;
 }
 
 .play-card-container:hover {
-  transform: scale(105%);
+  transform: scale(103%);
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
   transition: transform 0.2s ease-in-out;
 }
 
@@ -881,9 +882,9 @@
   font-weight: 200;
 }
 .card-header {
-  font-size: 18px;
-  padding: 10px;
-  text-align: center;
+  font-size: 15px;
+  padding: 10px 0px;
+  text-align: start;
 }
 
 .img {
@@ -960,3 +961,12 @@
 .play-card-container:hover .lang-icon {
   filter: none;
 }
+
+/* Line clamp utility for text truncation */
+.line-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}