Skip to content

Commit

Permalink
fix: play cards ui (#1461)
Browse files Browse the repository at this point in the history
* 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]>
  • Loading branch information
Akshaygore1 and priyankarpal authored Feb 24, 2024
1 parent ff67ea4 commit f9809a7
Show file tree
Hide file tree
Showing 3 changed files with 176 additions and 47 deletions.
57 changes: 57 additions & 0 deletions src/common/playlists/PlayCard.jsx
Original file line number Diff line number Diff line change
@@ -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;
49 changes: 2 additions & 47 deletions src/common/playlists/PlayThumbnail.jsx
Original file line number Diff line number Diff line change
@@ -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);
Expand Down Expand Up @@ -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;
117 changes: 117 additions & 0 deletions src/common/playlists/playlist.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

0 comments on commit f9809a7

Please sign in to comment.