Skip to content

Commit

Permalink
Merge pull request #24 from meddhiaka/fix
Browse files Browse the repository at this point in the history 
fixed-voir-button-freelancer-profile-responsivness
  • Loading branch information
@meddhiaka
meddhiaka authored Jul 28, 2024
2 parents ea5e1bb + 87c8eb5 commit 837b44d
Show file tree
Hide file tree
Showing 6 changed files with 235 additions and 45 deletions.
65 changes: 32 additions & 33 deletions app/profile/[id]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,31 +7,30 @@ import { BsInstagram } from "react-icons/bs";
import { CiTwitter } from "react-icons/ci";
import { TfiWorld } from "react-icons/tfi";
import { TiStarOutline } from "react-icons/ti";
import freelancerProfiles from "@/mockup/freelancerProfilesMockup";
import { findFreelancerProfile } from "@/lib/utils";




// static template, waiting for next mockup feature... i feel bad for the "a propos double paragraphes mapping logic"
export default function FreelancerPage() {
export default async function FreelancerPage({ params }: { params: { id: string } }) {
const profile: Mockup.IFreelancerProfile | null = await findFreelancerProfile(freelancerProfiles, params.id);
return (
<div className="space-y-2 md:space-y-0 flex flex-row flex-wrap md:flex-nowrap max-w-5xl mx-auto space-x-4 my-2 md:h-[700px] py-4">
<div className="space-y-2 md:space-y-0 flex flex-row flex-wrap justify-center md:flex-nowrap max-w-5xl mx-auto space-x-4 my-2 md:h-[700px] py-4">
<section className="max-w-md md:max-w-none mx-auto md:m-0 basis-full md:basis-1/3 border rounded-sm py-4 space-y-4">
<div className="w-9/12 mx-auto flex flex-row space-x-4">
<div>
<Image
src={"/profilePictures/m1.jpg"}
src={profile?.profilePicture || "/next.svg"}
width={90}
height={90}
alt="Picture of the freelancer"
className="rounded-full"
/>
</div>
<div className="flex flex-col space-y-2 ml-2 justify-center">
<p className="font-extrabold text-xl tracking-normal">Jerome Bell</p>
<p className="text-gray-500 text-sm font-light">Product Designer</p>
<p className="font-extrabold text-xl tracking-normal">{profile?.firstName} {profile?.lastName}</p>
<p className="text-gray-500 text-sm font-light">{profile?.role}</p>
<div className="flex space-x-1">
<span className="text-yellow-500"><TiStarFullOutline /></span>
<span className="text-xs font-semibold">4.0</span>
<span className="text-xs font-semibold">{profile?.profileRating}</span>
</div>
</div>
</div>
Expand All @@ -41,15 +40,15 @@ export default function FreelancerPage() {
Emplois postulés
</p>
<p className="text-gray-500 ">
il y a 2 jours
{profile?.lastEmploymentString}
</p>
</div>
<div className="border-b-[2px]"></div>
<p className="font-semibold my-1 ">
Product Development
{profile?.freelancerDomain}
</p>
<div>
<p>Marketing • Plein Temps</p>
<p>{profile?.freelancerExpertise} • {profile?.timeEmployment}</p>
</div>
</div>
<div className="w-9/12 mx-auto flex flex-row space-x-1 text-primary">
Expand All @@ -68,7 +67,7 @@ export default function FreelancerPage() {
<div className="basis-5/6">
<p className=" text-gray-500 text-xs">Email</p>
<div className="text-xs flex flex-row">
jeromeBell45@email.com
{profile?.email}
</div>
</div>
</div>
Expand All @@ -79,7 +78,7 @@ export default function FreelancerPage() {
<div className="basis-5/6">
<p className=" text-gray-500 text-xs">Phone</p>
<div className="text-xs flex flex-row whitespace-nowrap ">
+44 1245 572 135
{profile?.phone}
</div>
</div>
</div>
Expand All @@ -90,7 +89,7 @@ export default function FreelancerPage() {
<div className="basis-5/6">
<p className=" text-gray-500 text-xs">Instagram</p>
<div className="text-xs flex flex-row text-blue-600">
instagram.com/jeromebell
{profile?.instagram}
</div>
</div>
</div>
Expand All @@ -101,7 +100,7 @@ export default function FreelancerPage() {
<div className="basis-5/6">
<p className=" text-gray-500 text-xs">Twitter</p>
<div className="text-xs flex flex-row text-blue-600">
twitter.com/jeromebell
{profile?.twitter}
</div>
</div>
</div>
Expand All @@ -112,7 +111,7 @@ export default function FreelancerPage() {
<div className="basis-5/6">
<p className=" text-gray-500 text-xs">Siteweb</p>
<div className="text-xs flex flex-row text-blue-600">
www.jeromebell.com
{profile?.website}
</div>
</div>
</div>
Expand All @@ -133,7 +132,7 @@ export default function FreelancerPage() {
</div>

</section>
<section className="max-w-md md:max-w-none basis-full md:basis-2/3 border rounded-sm space-y-4">
<section className="!ml-0 !mt-3 md:!mt-0 md:!ml-2 max-w-md md:max-w-none basis-full md:basis-2/3 border rounded-sm space-y-4">
<div className="border-b">
<div className="w-11/12 mx-auto ">
<p className="py-2 border-b-primary border-b-[3px] w-36 text-sm font-semibold tracking-wide">Profile d&apos;applicant</p>
Expand All @@ -147,25 +146,24 @@ export default function FreelancerPage() {
<div className="basis-1/2 space-y-4 text-sm font-semibold">
<div className="space-y-1">
<p className="text-gray-500">Nom complet</p>
<p>Jerome Bell</p>
<p>{profile?.firstName} {profile?.lastName}</p>
</div>
<div className="space-y-1">
<p className="text-gray-500">Date de naissance</p>
<p>March 23, 1995 <span className="text-gray-500">(26 y.o)</span> </p>
<p className="text-gray-500">{profile?.birthDate}</p>
</div>
<div className="space-y-1">
<p className="text-gray-500">Address</p>
<p>4517 Washington Ave. Manchester, Kentucky 39495</p>
<p>{profile?.address}</p>
</div>
</div>
<div className="basis-1/2 space-y-4 text-sm">
<div className="space-y-1">
<p className="text-gray-500">Sex</p>
<p>Homme</p>
<p>{profile?.gender}</p>
</div>
<div className="space-y-1">
<p className="text-gray-500">Language</p>
<p>English, French</p>
<p>{profile?.languages}</p>
</div>
</div>
</div>
Expand All @@ -181,33 +179,34 @@ export default function FreelancerPage() {
<div className="space-y-2">
<p className="text-gray-500">à propos</p>
<div className="font-semibold space-y-1">
<p>I&apos;m a product designer + filmmaker currently working remotely at Twitter from beautiful Manchester, United Kingdom. I&apos;m passionate about designing digital products that have a positive impact on the world</p>
<p>For 10 years, I&apos;ve specialised in interface, experience & interaction design as well as working in user research and product strategy for product agencies, big tech companies & start-ups.</p>
<p>{profile?.description}</p>
</div>
</div>
</div>
<div className="flex flex-row pt-4">
<div className="basis-1/2 space-y-3 font-semibold text-sm">
<div className="space-y-1">
<p className="text-gray-500">Actuellement</p>
<p>Product Designer</p>
<p>{profile?.role}</p>
</div>
<div className="space-y-1">
<p className="text-gray-500">Plus haute qualification obtenue</p>
<p>Bachelors in Engineering</p>
<p>{profile?.academicCareer}</p>
</div>
</div>
<div className="basis-1/2 space-y-3 text-sm">
<div className="space-y-1">
<p className="text-gray-500">Experience</p>
<p>4 ans</p>
<p>{profile?.experience}</p>
</div>
<div className="space-y-1">
<p className="text-gray-500">Skills</p>
<div className="flex flex-row space-x-3 flex-wrap text-primary">
<p>Project Management</p>
<p>Copywriting</p>
<p>English</p>
{
profile?.skills.map((skill, index) => (
<p key={index}>{skill}</p>
))
}
</div>
</div>
</div>
Expand Down
18 changes: 8 additions & 10 deletions components/freelancer-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,16 +21,14 @@ export function FreelancerCard({ freelancer }: { freelancer: Mockup.ICard }) {
alt="Picture of the freelancer"
className="rounded-full"
/>
<Button
variant="secondary"
className="font-bold text-lg rounded-none text-primary"
>
<Link
href="/profile/99"
prefetch={true}>
Voir
</Link>
</Button>
<Link
href={`/profile/${freelancer.id}`}
prefetch={true}>
<Button
variant="secondary"
className="font-bold text-lg rounded-none text-primary"
>Voir</Button>
</Link>
</CardHeader>
<CardContent className="py-1 px-3">
<form>
Expand Down
11 changes: 11 additions & 0 deletions lib/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,14 @@ import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}

export async function findFreelancerProfile(L: Array<Mockup.IFreelancerProfile>, x: string): Promise<Mockup.IFreelancerProfile | null> {
return new Promise((resolve, reject) => {
const existingProfile = L.find((e) => e.id === x);
if (existingProfile) {
resolve(existingProfile);
} else {
reject(null);
}
})
}
2 changes: 1 addition & 1 deletion mockup/freelancerPageMockup.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,4 +49,4 @@ const freelancerCards : Array<Mockup.ICard> = [
}
]

export default freelancerCards
export default freelancerCards;
Loading

0 comments on commit 837b44d

Please sign in to comment.