From f9809a7ba071f840e3fda493b378e71d8c41165a Mon Sep 17 00:00:00 2001
From: Akshay Gore <92959398+Akshaygore1@users.noreply.github.com>
Date: Sat, 24 Feb 2024 20:08:07 +0530
Subject: [PATCH] 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 | 57 ++++++++++++
src/common/playlists/PlayThumbnail.jsx | 49 +----------
src/common/playlists/playlist.css | 117 +++++++++++++++++++++++++
3 files changed, 176 insertions(+), 47 deletions(-)
create mode 100644 src/common/playlists/PlayCard.jsx
diff --git a/src/common/playlists/PlayCard.jsx b/src/common/playlists/PlayCard.jsx
new file mode 100644
index 0000000000..cd53dbd32f
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+
+
+ {/*
*/}
+
{play.name}
+ {play.user && (
+
+
+
{play?.user.displayName}
+
+ )}
+
+
+
+ {play.language === 'ts' ? (
+
+ ) : (
+
+ )}
+
+
+
+
+ );
+}
+
+export default PlayCard;
diff --git a/src/common/playlists/PlayThumbnail.jsx b/src/common/playlists/PlayThumbnail.jsx
index cf8bba9e91..3de51e1004 100644
--- a/src/common/playlists/PlayThumbnail.jsx
+++ b/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 (
-
-
-
{user?.displayName}
-
- );
-};
+import PlayCard from './PlayCard';
const PlayThumbnail = ({ play }) => {
const [cover, setCover] = useState(null);
@@ -57,32 +37,7 @@ const PlayThumbnail = ({ play }) => {
loadCover();
}, [play]);
- return (
-
-
-
-
-
-
-
-
-
{play.name}
- {play.user &&
}
-
-
-
-
-
Play now
-
Playing..
-
-
-
- );
+ return ;
};
export default PlayThumbnail;
diff --git a/src/common/playlists/playlist.css b/src/common/playlists/playlist.css
index 2e24765236..b901532841 100644
--- a/src/common/playlists/playlist.css
+++ b/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;
+}