Add user image

jahongiry · Jan 19, 2024 · 7ba8406 · 7ba8406
1 parent d998820
commit 7ba8406
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 62 deletions.
diff --git 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
@@ -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 (
-    <div className="cards-wrapper">
-      <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'>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">
-            <div className="card-img">
+          <div key={game.id} className='card'>
+            <div className='card-img'>
               <img
                 onClick={() => openPopUp(game.id)}
-                className="card-img"
+                className='card-img'
                 src={game.img}
-                alt="image"
+                alt='image'
               />
             </div>
             <h5 onClick={() => openPopUp(game.id)}>{game.name}</h5>
@@ -109,14 +112,14 @@ const Cards = () => {
             <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 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 && (

diff --git 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;
   }
-}
+}
diff --git 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
@@ -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
@@ -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
@@ -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);