Skip to content

Commit 8bb1568

Browse files
Jecomo-Alyssa-LynJecomo-Alyssa-Lyn
authored
Merge pull request #492 from CodebilityDev/miguel/career-filter-layout
miguel/ career categories layout
2 parents 86d6397 + 1353c8a commit 8bb1568

1 file changed

Lines changed: 60 additions & 58 deletions

File tree

‎apps/codebility/app/(marketing)/careers/_components/JobListings.tsx‎

Lines changed: 60 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export default function JobListings() {
4949
setLoading(true);
5050
const supabase = createClientClientComponent();
5151

52-
const { data, error } = await supabase
52+
const { data, error } = await supabase!
5353
.from('job_listings')
5454
.select('*')
5555
.eq('status', 'active')
@@ -129,72 +129,74 @@ export default function JobListings() {
129129
</p>
130130
</div>
131131

132-
{/* Category Filters */}
132+
{/* Category Filters */}
133133
<div className="mb-8 rounded-lg border border-gray-800 bg-gray-900/30 p-6">
134-
<h3 className="mb-4 text-lg font-medium text-white">Filter by Category</h3>
135-
<div className="space-y-4">
136-
{/* Department Filter */}
137-
<div>
138-
<label className="mb-2 block text-sm font-medium text-gray-300">Department</label>
139-
<div className="flex flex-wrap gap-2">
140-
{categories.map((category) => (
141-
<button
142-
key={category}
143-
onClick={() => handleCategoryChange(category, "department")}
144-
className={`rounded-full px-4 py-2 text-sm font-medium transition-all ${
145-
selectedCategory === category
146-
? "bg-customViolet-100 text-white"
147-
: "bg-gray-800/50 text-gray-400 hover:bg-gray-700 hover:text-white"
148-
}`}
149-
>
150-
{category}
151-
</button>
152-
))}
134+
<h3 className="mb-4 text-lg font-medium text-white lg:mb-6">Filter by Category</h3>
135+
<div className="space-y-4 lg:space-y-0">
136+
<div className="lg:grid lg:grid-cols-10 lg:gap-6">
137+
{/* Department Filter */}
138+
<div className="pb-4 lg:col-span-2 lg:pb-4">
139+
<label className="mb-2 block text-sm font-medium text-gray-300">Department</label>
140+
<div className="flex flex-wrap gap-2">
141+
{categories.map((category) => (
142+
<button
143+
key={category}
144+
onClick={() => handleCategoryChange(category, "department")}
145+
className={`rounded-full px-4 py-2 text-sm font-medium transition-all ${
146+
selectedCategory === category
147+
? "bg-customViolet-100 text-white"
148+
: "bg-gray-800/50 text-gray-400 hover:bg-gray-700 hover:text-white"
149+
}`}
150+
>
151+
{category}
152+
</button>
153+
))}
154+
</div>
153155
</div>
154-
</div>
155156

156-
{/* Job Type Filter */}
157-
<div>
158-
<label className="mb-2 block text-sm font-medium text-gray-300">Job Type</label>
159-
<div className="flex flex-wrap gap-2">
160-
{types.map((type) => (
161-
<button
162-
key={type}
163-
onClick={() => handleCategoryChange(type, "type")}
164-
className={`rounded-full px-4 py-2 text-sm font-medium transition-all ${
165-
selectedType === type
166-
? "bg-customTeal text-white"
167-
: "bg-gray-800/50 text-gray-400 hover:bg-gray-700 hover:text-white"
168-
}`}
169-
>
170-
{type}
171-
</button>
172-
))}
157+
{/* Job Type Filter */}
158+
<div className="pb-4 lg:col-span-4 lg:pb-4 ml-[-35px]">
159+
<label className="mb-2 block text-sm font-medium text-gray-300">Job Type</label>
160+
<div className="flex flex-wrap gap-2">
161+
{types.map((type) => (
162+
<button
163+
key={type}
164+
onClick={() => handleCategoryChange(type, "type")}
165+
className={`rounded-full px-4 py-2 text-sm font-medium transition-all ${
166+
selectedType === type
167+
? "bg-customTeal text-white"
168+
: "bg-gray-800/50 text-gray-400 hover:bg-gray-700 hover:text-white"
169+
}`}
170+
>
171+
{type}
172+
</button>
173+
))}
174+
</div>
173175
</div>
174-
</div>
175176

176-
{/* Experience Level Filter */}
177-
<div>
178-
<label className="mb-2 block text-sm font-medium text-gray-300">Experience Level</label>
179-
<div className="flex flex-wrap gap-2">
180-
{levels.map((level) => (
181-
<button
182-
key={level}
183-
onClick={() => handleCategoryChange(level, "level")}
184-
className={`rounded-full px-4 py-2 text-sm font-medium transition-all ${
185-
selectedLevel === level
186-
? "bg-purple-500 text-white"
187-
: "bg-gray-800/50 text-gray-400 hover:bg-gray-700 hover:text-white"
188-
}`}
189-
>
190-
{level}
191-
</button>
192-
))}
177+
{/* Experience Level Filter */}
178+
<div className="pb-4 lg:col-span-4 lg:pb-4">
179+
<label className="mb-2 block text-sm font-medium text-gray-300">Experience Level</label>
180+
<div className="flex flex-wrap gap-2">
181+
{levels.map((level) => (
182+
<button
183+
key={level}
184+
onClick={() => handleCategoryChange(level, "level")}
185+
className={`rounded-full px-4 py-2 text-sm font-medium transition-all ${
186+
selectedLevel === level
187+
? "bg-purple-500 text-white"
188+
: "bg-gray-800/50 text-gray-400 hover:bg-gray-700 hover:text-white"
189+
}`}
190+
>
191+
{level}
192+
</button>
193+
))}
194+
</div>
193195
</div>
194196
</div>
195197

196198
{/* Results Count */}
197-
<div className="flex items-center justify-between border-t border-gray-800 pt-4">
199+
<div className="flex items-center justify-between border-t border-gray-800 pt-4 lg:mt-6">
198200
<span className="text-sm text-gray-400">
199201
{filteredJobs.length} position{filteredJobs.length !== 1 ? 's' : ''} found
200202
</span>

0 commit comments

Comments
 (0)