Skip to content

Commit f9809a7

Browse files
Akshaygore1priyankarpal
Akshaygore1
and
priyankarpal
authored
fix: play cards ui (#1461)
* Play Card UI FIxes * Update QuizApp.tsx Signed-off-by: Akshay Gore <[email protected]> * Changes in color * Added Card Styling Changes As Requested --------- Signed-off-by: Akshay Gore <[email protected]> Co-authored-by: Priyankar Pal <[email protected]>
1 parent ff67ea4 commit f9809a7

File tree

3 files changed

+176
-47
lines changed

3 files changed

+176
-47
lines changed

‎src/common/playlists/PlayCard.jsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React from 'react';
2+
import { Link } from 'react-router-dom';
3+
import { BsPlayCircleFill } from 'react-icons/bs';
4+
import { BiLogoTypescript, BiLogoJavascript } from 'react-icons/bi';
5+
6+
import Shimmer from 'react-shimmer-effect';
7+
import Like from 'common/components/Like/Like';
8+
import userImage from 'images/user.png';
9+
10+
function PlayCard({ play, cover, likeObject }) {
11+
return (
12+
<Link to={`/plays/${encodeURI(play.github.toLowerCase())}/${play.slug}`}>
13+
<div className="play-card-container">
14+
<div className="play-thumb-container">
15+
<Shimmer>
16+
<img alt="" className="play-card-thumb-img" src={cover} />
17+
</Shimmer>
18+
<BsPlayCircleFill className="play-icon" color="white" size={80} />
19+
</div>
20+
21+
{/* <div className="border" /> */}
22+
<div className="card-header">{play.name}</div>
23+
{play.user && (
24+
<div className="author">
25+
<img
26+
alt="avatar"
27+
className="rounded-full border border-zink"
28+
height="25px"
29+
loading="lazy"
30+
src={
31+
play?.user.avatarUrl
32+
? play?.user.avatarUrl.length
33+
? play?.user.avatarUrl
34+
: userImage
35+
: userImage
36+
}
37+
width="25px"
38+
/>
39+
<div className="author-name">{play?.user.displayName}</div>
40+
</div>
41+
)}
42+
<div className="play-actions mt-4">
43+
<div className="like-container">
44+
<Like likeObj={likeObject()} onLikeClick={null} />
45+
{play.language === 'ts' ? (
46+
<BiLogoTypescript className="lang-icon" color="#007acc" size={25} />
47+
) : (
48+
<BiLogoJavascript className="lang-icon" color="#F0DB4F" size={25} />
49+
)}
50+
</div>
51+
</div>
52+
</div>
53+
</Link>
54+
);
55+
}
56+
57+
export default PlayCard;

‎src/common/playlists/PlayThumbnail.jsx‎

Lines changed: 2 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,8 @@
11
import { useState, useEffect } from 'react';
2-
import { Link } from 'react-router-dom';
3-
import { BsPlayCircleFill } from 'react-icons/bs';
4-
import Shimmer from 'react-shimmer-effect';
5-
import userImage from 'images/user.png';
6-
import Like from 'common/components/Like/Like';
72
import { useUserId, useAuthenticated } from '@nhost/react';
83
import countByProp from 'common/utils/commonUtils';
94
import { loadCoverImage } from 'common/utils/coverImageUtil';
10-
11-
const Author = ({ user }) => {
12-
return (
13-
<div className="play-author flex items-center gap-2">
14-
<img
15-
alt="avatar"
16-
className="rounded-full border border-zink-400"
17-
height="25px"
18-
loading="lazy"
19-
src={user?.avatarUrl ? (user?.avatarUrl.length ? user?.avatarUrl : userImage) : userImage}
20-
width="25px"
21-
/>
22-
<div className="author-anchor">{user?.displayName}</div>
23-
</div>
24-
);
25-
};
5+
import PlayCard from './PlayCard';
266

277
const PlayThumbnail = ({ play }) => {
288
const [cover, setCover] = useState(null);
@@ -57,32 +37,7 @@ const PlayThumbnail = ({ play }) => {
5737
loadCover();
5838
}, [play]);
5939

60-
return (
61-
<li>
62-
<Link to={`/plays/${encodeURI(play.github.toLowerCase())}/${play.slug}`}>
63-
<div className="play-thumb">
64-
<Shimmer>
65-
<img alt="" className="play-thumb-img" loading="lazy" src={cover} />
66-
</Shimmer>
67-
</div>
68-
<div className="play-header">
69-
<div className="play-title">{play.name}</div>
70-
{play.user && <Author user={play.user} />}
71-
<div className="play-actions mt-4">
72-
<div className="flex flex-row justify-between items-end">
73-
<Like likeObj={likeObject()} onLikeClick={null} />
74-
<div className={`language language-${play.language || 'js'}`} />
75-
</div>
76-
</div>
77-
</div>
78-
<div className="play-status">
79-
<BsPlayCircleFill size="48px" />
80-
<div className="default">Play now</div>
81-
<div className="current">Playing..</div>
82-
</div>
83-
</Link>
84-
</li>
85-
);
40+
return <PlayCard cover={cover} likeObject={likeObject} play={play} />;
8641
};
8742

8843
export default PlayThumbnail;

‎src/common/playlists/playlist.css‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -825,3 +825,120 @@
825825
border-radius: 4px;
826826
border: 1px solid grey;
827827
}
828+
829+
.play-card-container {
830+
display: flex;
831+
flex-direction: column;
832+
border: 1px solid #ddd;
833+
border-radius: 8px;
834+
overflow: hidden;
835+
transition: transform 0.2s ease-in-out;
836+
width: 300px;
837+
height: 100%;
838+
padding: 12px;
839+
}
840+
841+
.border {
842+
border: 1px solid rgb(189 183 183);
843+
margin: 8px;
844+
/* padding: 20px; */
845+
}
846+
.author {
847+
display: flex;
848+
align-items: center;
849+
margin-top: 10px;
850+
justify-content: flex-start;
851+
}
852+
.card-cover {
853+
width: 100%;
854+
height: auto;
855+
border-radius: 8px;
856+
object-fit: cover;
857+
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
858+
}
859+
860+
.author-name {
861+
margin-left: 10px;
862+
font-size: 12px;
863+
font-weight: 200;
864+
}
865+
.card-header {
866+
font-size: 18px;
867+
padding: 10px;
868+
text-align: center;
869+
}
870+
871+
.img {
872+
border-radius: 50%;
873+
width: 40px;
874+
height: 40px;
875+
}
876+
.card-footer {
877+
display: flex;
878+
justify-content: space-between;
879+
margin-top: 30px;
880+
align-items: center;
881+
}
882+
.like-btn,
883+
.lng-btn {
884+
padding: 10px 20px;
885+
border-radius: 20px;
886+
background-color: #007bff;
887+
color: #fff;
888+
cursor: pointer;
889+
transition: background-color 0.3s;
890+
}
891+
.like-btn:hover,
892+
.lng-btn:hover {
893+
background-color: #0056b3;
894+
}
895+
896+
.like-container {
897+
display: flex;
898+
align-items: center; /* Align children vertically */
899+
justify-content: space-between;
900+
}
901+
902+
.language {
903+
height: 1.25rem;
904+
width: 1.25rem;
905+
background-repeat: no-repeat;
906+
opacity: 0.2;
907+
}
908+
909+
.play-thumb-container {
910+
position: relative;
911+
overflow: hidden;
912+
}
913+
914+
.play-card-thumb-img {
915+
width: 100%;
916+
height: 146px;
917+
object-fit: cover;
918+
transition: filter 0.3s ease-in-out;
919+
}
920+
921+
.play-card-container:hover .play-card-thumb-img {
922+
filter: blur(3px) brightness(0.7) saturate(50%);
923+
}
924+
925+
.play-icon {
926+
position: absolute;
927+
top: 50%;
928+
left: 50%;
929+
transform: translate(-50%, -50%);
930+
opacity: 0;
931+
transition: opacity 0.3s ease-in-out;
932+
}
933+
934+
.play-card-container:hover .play-icon {
935+
opacity: 1;
936+
}
937+
938+
.lang-icon {
939+
filter: grayscale(100%);
940+
}
941+
942+
.play-card-container:hover .lang-icon {
943+
filter: none;
944+
}

0 commit comments

Comments
 (0)