diff --git a/src/components/gym/GymCard.tsx b/src/components/gym/GymCard.tsx index 3898455964b0d2bd4504bd7e4af36f1cee4fae7b..ffc08fa083ffc9401037a31ed2724a6516cd8bd6 100644 --- a/src/components/gym/GymCard.tsx +++ b/src/components/gym/GymCard.tsx @@ -4,17 +4,29 @@ import { Link } from "react-router-dom"; function GymCard({ gym: { averageRating, cityName, monthlyPrice, name, pictureId, id }, + horizontal = false, }: { gym: GymReturned; + horizontal?: boolean; }) { return ( <Link to={`/gyms/${id}`} className="w-full"> - <article className="flex flex-col rounded-lg items-start justify-start bg-slate-600 text-white font-normal gap-2 w-full"> + <article + className={`flex ${ + !horizontal ? "flex-col" : "flex-row" + } rounded-lg items-start justify-start bg-slate-600 text-white font-normal gap-2 w-full`} + > <img src={`${config.GYM_MEDIA_URL}/${pictureId}.jpg`} - className="w-full rounded-t-lg self-center" + className={`${ + !horizontal ? "w-full rounded-t-lg" : "h-full rounded-l-lg" + } self-center`} /> - <div className="flex flex-col items-start justify-start px-4 pb-4"> + <div + className={`flex flex-col items-start justify-start ${ + !horizontal ? " px-4 pb-4" : "p-4" + }`} + > <h3>{name}</h3> <p>{cityName}</p> <p>{`${averageRating} stars`}</p> diff --git a/src/components/profile/Employer.tsx b/src/components/profile/Employer.tsx index 6e3fae91b16168940186d7ce552262c6cb9f3c52..c7e300aaae9ca18fba40b188022fa4137abfc7c7 100644 --- a/src/components/profile/Employer.tsx +++ b/src/components/profile/Employer.tsx @@ -21,7 +21,7 @@ function Employer({ user }: { user: UserReturned }) { ) : gym === undefined ? ( <p>You're not currently employed</p> ) : ( - <GymCard gym={gym} /> + <GymCard horizontal={true} gym={gym} /> )} {user.gymId ? ( <button className="btn btn-primary" onClick={() => resignMutation()}> diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx index 1980cf41738748d087784487a67a184acfa40dc2..141a2e5a0e1eb2fa3c792ff07719fa04e6e06d49 100644 --- a/src/pages/Profile.tsx +++ b/src/pages/Profile.tsx @@ -19,6 +19,7 @@ function Profile() { nav("/login"); }, }); + console.log(user); return ( <div className="flex flex-col w-full justify-center items-start box-border py-4 lg:py-8 px-4 lg:px-8 text-left gap-4">