From 7ba8406be8b4aa282f31ff521884b55529c7a3c0 Mon Sep 17 00:00:00 2001 From: Jahongir Yusupov <91022355+jahongiry@users.noreply.github.com> Date: Fri, 19 Jan 2024 21:07:21 +0500 Subject: [PATCH] Add user image --- src/App.css | 4 +- src/pages/cards/Cards.js | 99 ++++++++++++++------------- src/pages/cards/cards.css | 12 +--- src/pages/offer/offer.css | 2 +- src/pages/profile/Profile.js | 2 +- src/pages/profile/ProfileOfferData.js | 2 +- src/slices/authSlice.js | 1 + 7 files changed, 60 insertions(+), 62 deletions(-) diff --git a/src/App.css b/src/App.css index 2fed7dc..e844678 100644 --- a/src/App.css +++ b/src/App.css @@ -31,8 +31,8 @@ img { } .container { - padding-left: 5vw; - padding-right: 5vw; + padding-left: 2.5vw; + padding-right: 2.5vw; } .btn { diff --git a/src/pages/cards/Cards.js b/src/pages/cards/Cards.js index 9fd438d..05c8442 100644 --- a/src/pages/cards/Cards.js +++ b/src/pages/cards/Cards.js @@ -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); @@ -18,46 +18,50 @@ 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: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis, ipsa!", + 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: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis, ipsa!", + 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: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis, ipsa!", + 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: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis, ipsa!", + owner: 'Jahongir', + description: + 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis, ipsa!', }, ]; @@ -67,33 +71,32 @@ const Cards = () => { const selectedGame = games.find((game) => game.id === selectedGameId); return ( -
-
-
+
+
+
- +
-

Filterlash

-
- - - - +

Filterlash

+
+ + +
-
+
{games.map((game) => ( -
-
+
+
openPopUp(game.id)} - className="card-img" + className='card-img' src={game.img} - alt="image" + alt='image' />
openPopUp(game.id)}>{game.name}
@@ -109,14 +112,14 @@ const Cards = () => {

openPopUp(game.id)}> Owner: {game.owner}

-
openPopUp(game.id)}> - - - - - +
openPopUp(game.id)}> + + + + +
- {selectedGameId && ( diff --git a/src/pages/cards/cards.css b/src/pages/cards/cards.css index 9381fb5..ee96c76 100644 --- a/src/pages/cards/cards.css +++ b/src/pages/cards/cards.css @@ -1,7 +1,7 @@ .cards-wrapper { padding-top: 3.5rem; width: 100%; - display: flex; + display: flex; flex-direction: column; } .cards-container { @@ -143,8 +143,6 @@ text-shadow: 1px 1px 4px black; } - - .cards-section .stars { margin-top: 5px; width: 100%; @@ -169,15 +167,12 @@ cursor: pointer; } -@media screen and (min-width: 420px) { +@media screen and (min-width: 576px) { .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; } @@ -189,7 +184,6 @@ } } - @media screen and (min-width: 768px) { .cards-container .filterlash { font-size: 1.4rem; @@ -203,4 +197,4 @@ .cards-section { grid-template-columns: 1fr 1fr 1fr 1fr; } -} \ No newline at end of file +} diff --git a/src/pages/offer/offer.css b/src/pages/offer/offer.css index 4c255e9..2b2bf6c 100644 --- a/src/pages/offer/offer.css +++ b/src/pages/offer/offer.css @@ -1,5 +1,5 @@ .offer { - padding-top: 80px; + padding-top: 40px; padding-bottom: 6vw; width: 100%; min-height: 100vh; diff --git a/src/pages/profile/Profile.js b/src/pages/profile/Profile.js index 3cdce22..3b3f8e3 100644 --- a/src/pages/profile/Profile.js +++ b/src/pages/profile/Profile.js @@ -1,6 +1,6 @@ import React from 'react'; import './profile.css'; -import profileImg from './img/profile-img.png'; +import profileImg from '../../img/halmet.png'; import ProfileOfferData from './ProfileOfferData'; import { logOutUser } from '../../slices/authSlice'; import { useDispatch } from 'react-redux'; diff --git a/src/pages/profile/ProfileOfferData.js b/src/pages/profile/ProfileOfferData.js index 7d465d1..412c4c3 100644 --- a/src/pages/profile/ProfileOfferData.js +++ b/src/pages/profile/ProfileOfferData.js @@ -1,4 +1,4 @@ -import profileImg from './img/profile-img.png'; +import profileImg from '../../img/halmet.png'; const ProfileOfferData = [ { diff --git a/src/slices/authSlice.js b/src/slices/authSlice.js index b14d29a..dec74fc 100644 --- a/src/slices/authSlice.js +++ b/src/slices/authSlice.js @@ -52,6 +52,7 @@ export const signUp = createAsyncThunk( number, password, }); + console.log(response.data); return response.data; } catch (error) { return thunkAPI.rejectWithValue(error.response.data);