Skip to content

Commit

Permalink
Merge pull request #22 from jahongiry/cardMedia
Browse files Browse the repository at this point in the history 
fix card media
  • Loading branch information
@jahongiry
jahongiry authored Jan 19, 2024
2 parents 2e54e24 + 30c7266 commit f93a551
Show file tree
Hide file tree
Showing 4 changed files with 235 additions and 95 deletions.
120 changes: 65 additions & 55 deletions src/pages/cards/Cards.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React, { useState } from 'react';
import './cards.css';
import logo1 from '../../component/header/logo1_1.png';
import pubg from '../../img/pubg.jpeg';
import { NavLink, Link } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faStar } from '@fortawesome/free-solid-svg-icons';
import Popup from './popup/Popup';
import React, { useState } from "react";
import "./cards.css";
import logo1 from "../../component/header/logo1_1.png";
import pubg from "../../img/pubg.jpeg";
import { NavLink, Link } from "react-router-dom";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faStar } from "@fortawesome/free-solid-svg-icons";
import Popup from "./popup/Popup";

const Cards = () => {
const [selectedGameId, setSelectedGameId] = useState(null);
Expand All @@ -18,46 +18,46 @@ const Cards = () => {
{
id: 1,
img: pubg,
name: 'game1',
name: "game1",
level: 62,
rp: '3 ta olingan',
rp: "3 ta olingan",
skins: "Juda ko'p",
price: 2000,
owner: 'Jahongir',
description: 'assdfsdf sadfsdfsfd sdfsdfsdfsf sdfsdfsdfsdfs sdfsfsfsd',
owner: "Jahongir",
description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis, ipsa!",
},
{
id: 2,
img: pubg,
name: 'game1',
name: "game1",
level: 62,
rp: '3 ta olingan',
rp: "3 ta olingan",
skins: "Juda ko'p",
price: 2000,
owner: 'Jahongir',
description: 'assdfsdf sadfsdfsfd sdfsdfsdfsf sdfsdfsdfsdfs sdfsfsfsd',
owner: "Jahongir",
description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis, ipsa!",
},
{
id: 3,
img: pubg,
name: 'game1',
name: "game1",
level: 62,
rp: '3 ta olingan',
rp: "3 ta olingan",
skins: "Juda ko'p",
price: 2000,
owner: 'Jahongir',
description: 'assdfsdf sadfsdfsfd sdfsdfsdfsf sdfsdfsdfsdfs sdfsfsfsd',
owner: "Jahongir",
description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis, ipsa!",
},
{
id: 4,
img: pubg,
name: 'game1',
name: "game1",
level: 62,
rp: '3 ta olingan',
rp: "3 ta olingan",
skins: "Juda ko'p",
price: 2000,
owner: 'Jahongir',
description: 'assdfsdf sadfsdfsfd sdfsdfsdfsf sdfsdfsdfsdfs sdfsfsfsd',
owner: "Jahongir",
description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis, ipsa!",
},
];

Expand All @@ -67,46 +67,56 @@ const Cards = () => {
const selectedGame = games.find((game) => game.id === selectedGameId);

return (
<div>
<div className='cards-container'>
<div className='search-container'>
<div className="cards-wrapper">
<div className="cards-container">
<div className="search-container">
<input
type='text'
type="text"
placeholder="Kerakli so'zini yozing"
className='search-input'
className="search-input"
/>
<button className='search-button'>Qidirish</button>
<button className="search-button">Qidirish</button>
</div>
<h4 className='filterlash'>Filterlash</h4>
<div className='filter-container'>
<button className='filter-button active'>Mashxurlar</button>
<button className='filter-button'>Yangilari</button>
<button className='filter-button'>Arzonlari</button>
<button className='filter-button'>Qimmatlari</button>
<h4 className="filterlash">Filterlash</h4>
<div className="filter-container">
<button className="filter-button active">Mashxurlar</button>
<button className="filter-button">Yangilari</button>
<button className="filter-button">Arzonlari</button>
<button className="filter-button">Qimmatlari</button>
</div>
</div>
<div className='cards-section'>
<div className="cards-section">
{games.map((game) => (
<div key={game.id} className='card'>
<img
onClick={() => openPopUp(game.id)}
className='card-img'
src={game.img}
alt='image'
/>
<div key={game.id} className="card">
<div className="card-img">
<img
onClick={() => openPopUp(game.id)}
className="card-img"
src={game.img}
alt="image"
/>
</div>
<h5 onClick={() => openPopUp(game.id)}>{game.name}</h5>
<p onClick={() => openPopUp(game.id)}>Level: {game.level}</p>
<p onClick={() => openPopUp(game.id)}>RP: {game.rp}</p>
<p onClick={() => openPopUp(game.id)}>Skins: {game.skins}</p>
<p onClick={() => openPopUp(game.id)}>Owner: {game.owner}</p>
<div className='stars' onClick={() => openPopUp(game.id)}>
<FontAwesomeIcon icon={faStar} className='icon-gold' />
<FontAwesomeIcon icon={faStar} className='icon-gold' />
<FontAwesomeIcon icon={faStar} className='icon-gold' />
<FontAwesomeIcon icon={faStar} className='icon-gold' />
<FontAwesomeIcon icon={faStar} className='icon-gold' />
<p onClick={() => openPopUp(game.id)}>
<span>Level:</span> {game.level}
</p>
<p onClick={() => openPopUp(game.id)}>
<span>RP:</span> {game.rp}
</p>
<p onClick={() => openPopUp(game.id)}>
<span>Skins:</span> {game.skins}
</p>
<p onClick={() => openPopUp(game.id)}>
<span>Owner:</span> {game.owner}
</p>
<div className="stars" onClick={() => openPopUp(game.id)}>
<ion-icon name="star" className="icon-gold"></ion-icon>
<ion-icon name="star" className="icon-gold"></ion-icon>
<ion-icon name="star" className="icon-gold"></ion-icon>
<ion-icon name="star" className="icon-gold"></ion-icon>
<ion-icon name="star-half" className="icon-gold"></ion-icon>
</div>
<button onClick={() => openPopUp(game.id)} className='price-button'>
<button onClick={() => openPopUp(game.id)} className="price-button">
{game.price} UZS
</button>
{selectedGameId && (
Expand Down
133 changes: 105 additions & 28 deletions src/pages/cards/cards.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
.cards-wrapper {
padding-top: 3.5rem;
width: 100%;
display: flex;
flex-direction: column;
}
.cards-container {
margin-top: 3.5rem;
display: flex;
flex-direction: column;
background-image: linear-gradient(
Expand All @@ -10,21 +15,21 @@
#5346c3,
#4540bb
);
padding: 1rem;
padding: 1.5rem 5% 1rem;
border-bottom: 1px solid white;
}

.search-container {
.cards-container .search-container {
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
}

.filterlash {
.cards-container .filterlash {
margin-bottom: 0.15rem;
}

.search-input {
.cards-container .search-input {
flex-grow: 1;
margin-right: 0.5rem;
padding: 0.5rem;
Expand All @@ -34,7 +39,7 @@
font-size: 1rem;
}

.search-button {
.cards-container .search-button {
margin-top: -0.2rem;
padding: 0.5rem 0.5rem;
border: none;
Expand All @@ -47,12 +52,21 @@
width: 5rem;
}

.filter-container {
.cards-container .filter-container {
width: 100%;
padding: 5px;
display: flex;
justify-content: space-around;
/* flex-wrap: wrap; */
align-items: center;
justify-content: flex-start;
gap: 10px;
overflow-x: scroll;
}
.cards-container .filter-container::-webkit-scrollbar {
display: none;
}

.filter-button {
.cards-container .filter-button {
padding: 0.5rem 0.8rem;
border: none;
border-radius: 0.5rem;
Expand All @@ -72,58 +86,121 @@
box-shadow: 4px 4px 6px #1b1b1b, -4px -4px 6px #3b3b3b;
}

.filter-button.active {
.cards-container .filter-button.active {
background-color: #7a7aae;
}

.cards-section {
width: 100%;
background-color: #142251;
display: grid;
grid-template-columns: 1fr 1fr;
row-gap: 1.5rem;
column-gap: 0.1rem;
padding-bottom: 2.5rem;
grid-template-columns: 1fr;
gap: 20px;
padding: 1.5rem 3% 1.5rem;
}

.card {
.cards-section .card {
width: 100%;
background: #1d65b3;
border-radius: 15px;
color: #fff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
margin: 1rem 0.5rem;
padding: 1rem;
padding: 10px;
border-top: 3px solid #9ba6dc;
border-right: 3px solid #5d98ef;
border-bottom: 3px solid #5d98ef;
border-left: 3px solid #5d98ef;
cursor: pointer;
}

.card-img {
width: 7.4rem;
height: 4rem;
.cards-section .card-img {
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
overflow: hidden;
border-radius: 10px;
}
.cards-section .card-img img {
width: 100%;
height: 100%;
object-fit: cover;
}

.icon-gold {
color: #ffd700;
.cards-section .card > h5 {
font-size: 1rem;
margin-top: 5px;
letter-spacing: 2px;
}
.cards-section .card > p {
margin-top: 5px;
font-size: 14px;
text-shadow: 0 0 4px black;
}
.cards-section .card > p > span {
font-size: 16px;
color: #d9398b;
font-weight: bold;
text-shadow: 1px 1px 4px black;
}

.stars {
margin: 1rem 0 -2.5rem 1rem;


.cards-section .stars {
margin-top: 5px;
width: 100%;
display: flex;
align-items: center;
gap: 5px;
}
.cards-section .stars ion-icon {
color: #ffd700;
}

.price-button {
.cards-section .price-button {
margin-top: 10px;
background-color: #454adf;
border: none;
padding: 0.6rem 1rem;
padding: 5px;
border-radius: 10px;
background-image: linear-gradient(to right, #88347b, #454adf, #454adf);
box-shadow: 4px 4px 6px #1b1b1b, -4px -4px 6px #3b3b3b; /* Neumorphism effect */
font-weight: 700;
width: 100%;
cursor: pointer;
}
.price-button {
transform: translateY(3.7rem);

@media screen and (min-width: 420px) {
.cards-section {
grid-template-columns: 1fr 1fr;
gap: 20px;
padding: 1.5rem 5% 1.5rem;
}
}

@media screen and (min-width: 576px) {
.cards-section .card > h5 {
font-size: 1.2rem;
}
.cards-section .card > p {
font-size: 1rem;
}
.cards-section .card > p > span {
font-size: 1.1rem;
}
}


@media screen and (min-width: 768px) {
.cards-container .filterlash {
font-size: 1.4rem;
}
.cards-section {
grid-template-columns: 1fr 1fr 1fr;
}
}

@media screen and (min-width: 992px) {
.cards-section {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
2 changes: 1 addition & 1 deletion src/pages/cards/popup/Popup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const PopUp = ({ isVisible, togglePopUp, game }) => {
<div className='top'>
<img src={game.img} alt='game name' />
<div>
<h3>Owner: {game.owner}</h3>
<h3><span>Owner:</span> {game.owner}</h3>
<p>{game.description}</p>
<ion-icon name='star'></ion-icon>
<ion-icon name='star'></ion-icon>
Expand Down
Loading

0 comments on commit f93a551

Please sign in to comment.