fix: play cards ui (#1461)

* Play Card UI FIxes

* Update QuizApp.tsx

Signed-off-by: Akshay Gore <92959398+Akshaygore1@users.noreply.github.com>

* Changes in color

* Added Card Styling Changes As Requested

---------

Signed-off-by: Akshay Gore <92959398+Akshaygore1@users.noreply.github.com>
Co-authored-by: Priyankar Pal <88102392+priyankarpal@users.noreply.github.com>

src/common/playlists/PlayCard.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { BsPlayCircleFill } from 'react-icons/bs';
+import { BiLogoTypescript, BiLogoJavascript } from 'react-icons/bi';
+
+import Shimmer from 'react-shimmer-effect';
+import Like from 'common/components/Like/Like';
+import userImage from 'images/user.png';
+
+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} />
+        </div>
+
+        {/* <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"
+            />
+            <div className="author-name">{play?.user.displayName}</div>
+          </div>
+        )}
+        <div className="play-actions mt-4">
+          <div className="like-container">
+            <Like likeObj={likeObject()} onLikeClick={null} />
+            {play.language === 'ts' ? (
+              <BiLogoTypescript className="lang-icon" color="#007acc" size={25} />
+            ) : (
+              <BiLogoJavascript className="lang-icon" color="#F0DB4F" size={25} />
+            )}
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+}
+
+export default PlayCard;

src/common/playlists/PlayThumbnail.jsx

@@ -1,28 +1,8 @@
 import { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
-import { BsPlayCircleFill } from 'react-icons/bs';
-import Shimmer from 'react-shimmer-effect';
-import userImage from 'images/user.png';
-import Like from 'common/components/Like/Like';
 import { useUserId, useAuthenticated } from '@nhost/react';
 import countByProp from 'common/utils/commonUtils';
 import { loadCoverImage } from 'common/utils/coverImageUtil';
-
-const Author = ({ user }) => {
-  return (
-    <div className="play-author flex items-center gap-2">
-      <img
-        alt="avatar"
-        className="rounded-full border border-zink-400"
-        height="25px"
-        loading="lazy"
-        src={user?.avatarUrl ? (user?.avatarUrl.length ? user?.avatarUrl : userImage) : userImage}
-        width="25px"
-      />
-      <div className="author-anchor">{user?.displayName}</div>
-    </div>
-  );
-};
+import PlayCard from './PlayCard';
 
 const PlayThumbnail = ({ play }) => {
   const [cover, setCover] = useState(null);
@@ -57,32 +37,7 @@ const PlayThumbnail = ({ play }) => {
     loadCover();
   }, [play]);
 
-  return (
-    <li>
-      <Link to={`/plays/${encodeURI(play.github.toLowerCase())}/${play.slug}`}>
-        <div className="play-thumb">
-          <Shimmer>
-            <img alt="" className="play-thumb-img" loading="lazy" src={cover} />
-          </Shimmer>
-        </div>
-        <div className="play-header">
-          <div className="play-title">{play.name}</div>
-          {play.user && <Author user={play.user} />}
-          <div className="play-actions mt-4">
-            <div className="flex flex-row justify-between items-end">
-              <Like likeObj={likeObject()} onLikeClick={null} />
-              <div className={`language language-${play.language || 'js'}`} />
-            </div>
-          </div>
-        </div>
-        <div className="play-status">
-          <BsPlayCircleFill size="48px" />
-          <div className="default">Play now</div>
-          <div className="current">Playing..</div>
-        </div>
-      </Link>
-    </li>
-  );
+  return <PlayCard cover={cover} likeObject={likeObject} play={play} />;
 };
 
 export default PlayThumbnail;

src/common/playlists/playlist.css

@@ -825,3 +825,120 @@
   border-radius: 4px;
   border: 1px solid grey;
 }
+
+.play-card-container {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  overflow: hidden;
+  transition: transform 0.2s ease-in-out;
+  width: 300px;
+  height: 100%;
+  padding: 12px;
+}
+
+.border {
+  border: 1px solid rgb(189 183 183);
+  margin: 8px;
+  /* padding: 20px; */
+}
+.author {
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+  justify-content: flex-start;
+}
+.card-cover {
+  width: 100%;
+  height: auto;
+  border-radius: 8px;
+  object-fit: cover;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.author-name {
+  margin-left: 10px;
+  font-size: 12px;
+  font-weight: 200;
+}
+.card-header {
+  font-size: 18px;
+  padding: 10px;
+  text-align: center;
+}
+
+.img {
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+}
+.card-footer {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 30px;
+  align-items: center;
+}
+.like-btn,
+.lng-btn {
+  padding: 10px 20px;
+  border-radius: 20px;
+  background-color: #007bff;
+  color: #fff;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+.like-btn:hover,
+.lng-btn:hover {
+  background-color: #0056b3;
+}
+
+.like-container {
+  display: flex;
+  align-items: center; /* Align children vertically */
+  justify-content: space-between;
+}
+
+.language {
+  height: 1.25rem;
+  width: 1.25rem;
+  background-repeat: no-repeat;
+  opacity: 0.2;
+}
+
+.play-thumb-container {
+  position: relative;
+  overflow: hidden;
+}
+
+.play-card-thumb-img {
+  width: 100%;
+  height: 146px;
+  object-fit: cover;
+  transition: filter 0.3s ease-in-out;
+}
+
+.play-card-container:hover .play-card-thumb-img {
+  filter: blur(3px) brightness(0.7) saturate(50%);
+}
+
+.play-icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+}
+
+.play-card-container:hover .play-icon {
+  opacity: 1;
+}
+
+.lang-icon {
+  filter: grayscale(100%);
+}
+
+.play-card-container:hover .lang-icon {
+  filter: none;
+}