Skip to content

Commit

Permalink
Add full responsive styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@AliFahed
AliFahed committed Nov 16, 2024
1 parent 326a380 commit a53728c
Show file tree
Hide file tree
Showing 5 changed files with 67 additions and 39 deletions.
18 changes: 10 additions & 8 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,20 +69,22 @@ export default function Home() {
<>
<div className="container px-4 pt-16 mx-auto max-w-7xl">
<section id="jobs-section-id" className="mt-10">
<h1 className="text-4xl font-bold text-center mb-2">Web Dev Jobs</h1>
<h1 className="text-2xl md:text-4xl font-bold text-center mb-2">
Web Dev Jobs
</h1>
<p className="text-gray-600 text-center mb-8">
Find and Apply to Web Dev Jobs in Malaysia
</p>

<div className="flex justify-center mb-2">
<div className="inline-flex rounded-lg border border-gray-200 bg-white p-1">
<div className="text-center">
<div className="w-full sm:w-fit inline-flex rounded-lg border border-gray-200 bg-white p-1">
<div className="flex flex-col sm:flex-row w-full text-center">
{categories.map((category) => (
<button
key={category}
className={`px-4 py-2 m-2 rounded transition-colors duration-200 ${
selectedJobCategory === category
? "bg-gray-800 text-white "
? "bg-gray-800 text-white"
: "text-gray-600 hover:bg-gray-300"
}`}
onClick={() => dispatch(setJobCategory(category))}
Expand All @@ -102,7 +104,7 @@ export default function Home() {
</section>

<section id="salary-section" className="pt-14">
<h1 className="text-4xl font-bold text-center mb-2">
<h1 className="text-2xl md:text-4xl font-bold text-center mb-2">
Developer Salary Guide
</h1>
<p className="text-gray-600 text-center mb-8">
Expand All @@ -111,14 +113,14 @@ export default function Home() {
</p>

<div className="flex justify-center mb-2">
<div className="inline-flex rounded-lg border border-gray-200 bg-white p-1">
<div className="text-center">
<div className="w-full sm:w-fit inline-flex rounded-lg border border-gray-200 bg-white p-1">
<div className="flex flex-col sm:flex-row w-full text-center">
{categories.map((category) => (
<button
key={category}
className={`px-4 py-2 m-2 rounded transition-colors duration-200 ${
selectedSalaryCategory === category
? "bg-gray-800 text-white "
? "bg-gray-800 text-white"
: "text-gray-600 hover:bg-gray-300"
}`}
onClick={() => dispatch(setSalaryCategory(category))}
Expand Down
43 changes: 25 additions & 18 deletions src/components/JobCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ import Link from "next/link";
export const JobCard = ({ jobs, jobTitle, role }: any) => {
return (
<div className="container px-4 py-10 mx-auto max-w-7xl">
<div className="flex justify-between items-center mb-7">
<h1 className="text-3xl font-bold">{jobTitle}</h1>
<div className="flex flex-col md:flex-row md:justify-between md:items-center mb-7">
<h1 className="text-2xl md:text-3xl font-bold">{jobTitle}</h1>
<p className="">Jobs Updated on: {jobs.date}</p>
</div>

Expand All @@ -18,26 +18,33 @@ export const JobCard = ({ jobs, jobTitle, role }: any) => {
className="mb-5 list-none border p-5 rounded-xl"
>
<div className="flex flex-col gap-8 w-full">
<div className="flex gap-5 justify-between">
<div className="flex gap-5">
<Image
src={job.employer_logo ? job.employer_logo : NoLogo}
alt="Company Logo"
width={50}
height={50}
className="w-20 h-20 object-contain rounded-xl border border-gray-300 contrast-100 brightness-110"
role="img"
/>
<div className="flex flex-col md:flex-row gap-5 justify-between">
<div className="flex flex-col md:flex-row gap-5">
<div className="flex items-center justify-between">
<Image
src={job.employer_logo ? job.employer_logo : NoLogo}
alt="Company Logo"
width={50}
height={50}
className="w-20 h-20 object-contain rounded-xl border border-gray-300 contrast-100 brightness-110"
role="img"
/>
<p className="md:hidden text-sm font-bold border border-gray-400 opacity-75 outline-1 rounded-full text-center w-fit px-2 h-fit">
{job.job_employment_type}
</p>
</div>

<div>
<Link
href={`/jobs/${role}/${job.job_id}`}
className="hover:text-gray-400"
>
<h1 className="text-xl font-bold">{job.job_title}</h1>
<h1 className="text-base md:text-xl font-bold mb-2">
{job.job_title}
</h1>
</Link>

<div className="flex gap-5">
<div className="flex flex-col md:flex-row gap-5">
<div className="flex items-center gap-2">
<Building2 className="w-4 h-4" />
<p>{job.employer_name}</p>
Expand All @@ -52,13 +59,13 @@ export const JobCard = ({ jobs, jobTitle, role }: any) => {
</div>
</div>

<p className="text-sm font-bold border border-gray-400 opacity-75 outline-1 rounded-full text-center w-fit px-2 h-fit">
<p className="hidden md:block text-sm font-bold border border-gray-400 opacity-75 outline-1 rounded-full text-center w-fit px-2 h-fit">
{job.job_employment_type}
</p>
</div>

<div className="flex justify-between items-center">
<div className="flex gap-5 items-center">
<div className="flex flex-col md:flex-row justify-between md:items-center">
<div className="flex flex-col md:flex-row gap-5 md:items-center mb-6 md:mb-0">
<div className="flex items-center gap-2">
<Calendar className="w-4 h-4" />
<p>
Expand All @@ -77,7 +84,7 @@ export const JobCard = ({ jobs, jobTitle, role }: any) => {

<button
id="details-button"
className="bg-gray-800 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded-md"
className="bg-gray-800 w-fit hover:bg-gray-500 text-white font-bold py-2 px-4 rounded-md"
>
<Link
href={`/jobs/${role}/${job.job_id}`}
Expand Down
27 changes: 17 additions & 10 deletions src/components/JobDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,17 +73,24 @@ export const JobDetails = () => {
<div className="lg:col-span-2">
<div className="border rounded-xl p-7">
<div className="mb-6">
<div className="flex items-start gap-6">
<Image
src={job.employer_logo ? job.employer_logo : NoLogo}
alt="Company Logo"
width={50}
height={50}
className="w-20 h-20 object-contain rounded-xl border border-gray-300 contrast-100 brightness-110"
/>
<div className="flex flex-col md:flex-row items-start gap-6">
<div className="flex items-center justify-between w-full md:w-fit">
<Image
src={job.employer_logo ? job.employer_logo : NoLogo}
alt="Company Logo"
width={50}
height={50}
className="w-20 h-20 object-contain rounded-xl border border-gray-300 contrast-100 brightness-110"
/>
<div className="md:hidden text-sm font-bold border border-gray-400 opacity-75 outline-1 rounded-full text-center w-fit px-2 h-fit">
{job.job_employment_type}
</div>
</div>
<div className="flex justify-between w-full">
<div className="flex flex-col gap-1">
<h1 className="text-2xl font-bold">{job.job_title}</h1>
<h1 className="text-xl md:text-2xl font-bold">
{job.job_title}
</h1>
<div className="flex flex-wrap gap-4">
<div className="flex items-center gap-2">
<Building2 className="w-4 h-4" />
Expand Down Expand Up @@ -138,7 +145,7 @@ export const JobDetails = () => {
</div>

<div>
<div className="text-sm font-bold border border-gray-400 opacity-75 outline-1 rounded-full text-center w-fit px-2 h-fit">
<div className="hidden md:block text-sm font-bold border border-gray-400 opacity-75 outline-1 rounded-full text-center w-fit px-2 h-fit">
{job.job_employment_type}
</div>
</div>
Expand Down
16 changes: 14 additions & 2 deletions src/components/SalaryCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export const SalaryCard = ({ salaries, jobTitle, role }: any) => {
return (
<div className="container px-4 py-10 mx-auto max-w-7xl">
<div className="flex justify-between items-center mb-7">
<h1 className="text-3xl font-bold">{jobTitle}</h1>
<h1 className="text-2xl md:text-3xl font-bold">{jobTitle}</h1>
</div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
Expand All @@ -33,7 +33,7 @@ export const SalaryCard = ({ salaries, jobTitle, role }: any) => {
: item.data.country}{" "}
| {item.data.countryCode}
</p>
<div className="flex items-center gap-1 border-b border-black">
<div className="hidden sm:flex items-center gap-1 border-b border-black">
Details
<ExternalLink className="w-4 h-4" />
</div>
Expand All @@ -49,6 +49,18 @@ export const SalaryCard = ({ salaries, jobTitle, role }: any) => {
</p>
</Link>
</div>
<Link
href={`/salary/${role}/${countryToLowerCase(
item.data.countryCode
)}`}
>
<div className="flex justify-end">
<div className="sm:hidden flex items-center gap-1 border-b border-black">
Details
<ExternalLink className="w-4 h-4" />
</div>
</div>
</Link>
</div>
))}
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/SalaryDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ export const SalaryDetails = () => {
</div>

<div>
<h1 className="text-2xl font-semibold mb-4 text-center">
<h1 className="text-xl md:text-2xl font-semibold mb-4 text-center">
{firstLetterToUpperCase(selectedCategory)} development Salary in{" "}
{salary?.data.countryCode === "SA"
? "Saudi Arabia"
Expand Down

0 comments on commit a53728c

Please sign in to comment.