Skip to content

Commit

Permalink
fix: changes made to the club profile page
Browse files Browse the repository at this point in the history
  • Loading branch information
@tamalCodes
tamalCodes committed Feb 14, 2024
1 parent 28a86de commit 8d7783b
Show file tree
Hide file tree
Showing 2 changed files with 165 additions and 10 deletions.
81 changes: 77 additions & 4 deletions src/pages/profile/Profile.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import Cookies from "js-cookie";
import React, { useEffect, useState } from "react";
import Marquee from "react-fast-marquee";
import { FiEdit3 } from "react-icons/fi";
import { MdLogout } from "react-icons/md";
import { useNavigate, useParams } from "react-router-dom";
Expand All @@ -11,7 +10,6 @@ import "swiper/css/navigation";
import "swiper/css/pagination";
import useSWR from "swr";
import { Button, Navbar, ProfileCompletion } from "../../components/shared";
import EventsCard from "../../components/shared/cards/events/EventsCard";
import { Logout } from "../../service/MilanApi";
import { clubEndpoints } from "../../static/ApiEndpoints";
import fetcher from "../../utils/Fetcher";
Expand Down Expand Up @@ -136,7 +134,66 @@ const Profile = () => {
</div>
</div>

<div className="profile_events">
<div className="profile_header_ctadiv">
{params.username === Cookies.get("username") ? (
<Button variant="solid" className="profile_header_cta">
<FiEdit3 />
Edit profile
</Button>
) : (
<Button variant="solid" className="profile_header_cta">
<svg
stroke="currentColor"
fill="currentColor"
strokeWidth="1"
viewBox="0 0 24 24"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<g id="Bell_On">
<path d="M18.79,15.34a2.087,2.087,0,0,0-1.26-.61V10.19a5.5,5.5,0,0,0-1.62-3.91,5.826,5.826,0,0,0-2.15-1.33V4.89a1.8,1.8,0,0,0-1.61-1.81,1.749,1.749,0,0,0-1.91,1.75v.12a5.547,5.547,0,0,0-3.77,5.24v4.54a2.122,2.122,0,0,0-1.88,2.11v.53a2.121,2.121,0,0,0,2.12,2.12H10.3a1.725,1.725,0,0,0,3.4,0h3.59a2.121,2.121,0,0,0,2.12-2.12v-.53A2.1,2.1,0,0,0,18.79,15.34Zm-.38,2.03a1.118,1.118,0,0,1-1.12,1.12H6.71a1.118,1.118,0,0,1-1.12-1.12v-.53a1.118,1.118,0,0,1,1.12-1.12.762.762,0,0,0,.76-.77V10.19a4.555,4.555,0,0,1,3.24-4.34.729.729,0,0,0,.53-.71V4.83a.735.735,0,0,1,.25-.56.744.744,0,0,1,.51-.2h.07a.807.807,0,0,1,.69.82v.25a.729.729,0,0,0,.53.71A4.668,4.668,0,0,1,15.2,6.99a4.468,4.468,0,0,1,1.33,3.2v4.76a.8.8,0,0,0,.22.55.773.773,0,0,0,.54.22,1.127,1.127,0,0,1,1.12,1.12Z"></path>
</g>
</svg>
Subscribe
</Button>
)}

{Cookies.get("isLoggedIn") &&
Cookies.get("username") === params.username ? (
<Button
variant="outline"
className="profile_header_cta"
onClickfunction={handleLogout}
>
<MdLogout
style={{
color: "black",
}}
/>
Logout
</Button>
) : (
<Button variant="solid" className="profile_header_cta">
<svg
stroke="currentColor"
fill="currentColor"
strokeWidth="1"
viewBox="0 0 24 24"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<g id="Heart">
<path d="M12,20.043a.977.977,0,0,1-.7-.288L4.63,13.08A5.343,5.343,0,0,1,6.053,4.513,5.266,5.266,0,0,1,12,5.371a5.272,5.272,0,0,1,5.947-.858A5.343,5.343,0,0,1,19.37,13.08l-6.676,6.675A.977.977,0,0,1,12,20.043ZM8.355,4.963A4.015,4.015,0,0,0,6.511,5.4,4.4,4.4,0,0,0,4.122,8.643a4.345,4.345,0,0,0,1.215,3.73l6.675,6.675,6.651-6.675a4.345,4.345,0,0,0,1.215-3.73A4.4,4.4,0,0,0,17.489,5.4a4.338,4.338,0,0,0-4.968.852h0a.744.744,0,0,1-1.042,0A4.474,4.474,0,0,0,8.355,4.963Z"></path>
</g>
</svg>{" "}
Sponsor
</Button>
)}
</div>

{/* <div className="profile_events">
<h1 className="profile_events_title">Recent Events</h1>
<Marquee
Expand All @@ -149,10 +206,26 @@ const Profile = () => {
</Marquee>
</div>
*/}

{info?.description && (
<div className="profile_about">
<h1 className="profile_about_title">About Us</h1>
<p>{info?.description}</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi
dolore nesciunt beatae libero temporibus expedita similique,
laborum blanditiis? Animi aliquam numquam necessitatibus natus
libero reprehenderit iusto voluptatem maiores officiis quibusdam
neque suscipit, delectus laborum porro architecto aut sapiente
quasi repudiandae, ab mollitia. Voluptatem inventore numquam
quisquam quidem rerum neque sapiente, praesentium sunt
reiciendis pariatur voluptas vel vitae nulla magnam, ex
aspernatur necessitatibus. Totam dolores sequi tempore magnam
numquam sapiente repellat modi? Et consectetur similique sit
laudantium corrupti. Autem, maxime aliquid cumque, culpa earum
animi dolorem, voluptates facere sint necessitatibus ea a error
vero reprehenderit! A blanditiis cumque itaque fugit dolorem.
</p>
</div>
)}

Expand Down
94 changes: 88 additions & 6 deletions src/pages/profile/Profile.scss
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,26 @@
.profile_container {
display: flex;
flex-direction: column;
align-items: start;
align-items: center;
padding-top: 8rem;
padding-bottom: 4rem;

@media screen and (max-width: 430px) {
padding: 6rem 1rem;
}

.profile_parent {
max-width: 1000px;
margin: auto;
display: flex;
flex-direction: column;
gap: 4rem;

@media screen and (max-width: 430px) {
max-width: 100vw;
gap: 2rem;
}

.profile_header {
display: flex;
gap: 1rem;
Expand All @@ -21,6 +30,12 @@
height: 150px;
border-radius: 6px;
margin-right: 20px;

@media screen and (max-width: 430px) {
width: 100px;
height: 100px;
margin-right: 0;
}
}

.profile_header_details {
Expand All @@ -34,20 +49,38 @@
color: var(--secondary);
font-weight: 800;
font-family: var(--mont);

@media screen and (max-width: 430px) {
font-size: 1.4rem;
color: var(--secondary);
font-weight: 700;
font-family: var(--poppins);
}
}

.profile_header_tagline {
font-family: var(--poppins);
color: #000000;
font-size: 18px;
font-weight: 500;

@media screen and (max-width: 430px) {
font-size: 14px;
font-weight: 400;
word-break: break-all;
}
}

.profile_header_ctadiv {
display: flex;
align-items: center;
gap: 1rem;
width: 100%;
justify-content: start;

@media screen and (max-width: 430px) {
display: none;
}

.profile_header_cta {
width: auto;
Expand All @@ -68,10 +101,41 @@
}
}
}
}

//* This is for mobile
.profile_header_ctadiv {
display: flex;
align-items: center;
gap: 1rem;
width: 100%;
justify-content: space-between;

@media screen and (min-width: 430px) {
display: none;
}

.profile_header_cta {
width: 100%;
padding: 0.5rem 1.5rem;
border-radius: 6px;
font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
white-space: nowrap;

svg {
width: 20px;
height: 20px;
font-size: 20px;
color: rgb(255, 255, 255);
font-weight: 700;
}
}
}

.profile_events{
.profile_events {
.profile_events_title {
font-size: 2rem;
color: var(--secondary);
Expand All @@ -86,18 +150,30 @@
flex-direction: column;
align-items: start;

h1{
h1 {
font-size: 2rem;
color: var(--secondary);
font-weight: 800;
font-family: var(--mont);

@media screen and (max-width: 430px) {
font-size: 1.5rem;
font-weight: 700;
font-family: var(--poppins);
}
}

p {
font-family: var(--outfit);
color: #000000;
font-size: 20px;
font-weight: 400;

@media screen and (max-width: 430px) {
font-size: 17px;
font-weight: 400;
text-align: start;
}
}
}

Expand All @@ -106,15 +182,21 @@
flex-direction: column;
align-items: start;

h1{
h1 {
font-size: 2rem;
color: var(--secondary);
font-weight: 800;
font-family: var(--mont);
margin-bottom: 1rem;

@media screen and (max-width: 430px) {
font-size: 1.5rem;
font-weight: 700;
font-family: var(--poppins);
}
}

iframe{
iframe {
border: 0;
width: 100%;
height: 500px;
Expand All @@ -123,4 +205,4 @@
}
}
}
}
}

0 comments on commit 8d7783b

Please sign in to comment.