rede5/gohorsejobs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Merge pull request #71 from rede5/codex/update-more-jobs-section-to-carousel

Browse source 
Codex-generated pull request
This commit is contained in:
Tiago Yamamoto 2026-02-17 18:38:32 -03:00 committed by GitHub
commit 14dbb897b5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 63 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
frontend/src/app/page.tsx
View file

@ -27,8 +27,17 @@ export default function Home() {
dragFree: true
})
const [moreJobsEmblaRef, moreJobsEmblaApi] = useEmblaCarousel({
align: "start",
loop: false,
skipSnaps: false,
dragFree: true
})
const [prevBtnDisabled, setPrevBtnDisabled] = useState(true)
const [nextBtnDisabled, setNextBtnDisabled] = useState(true)
const [moreJobsPrevBtnDisabled, setMoreJobsPrevBtnDisabled] = useState(true)
const [moreJobsNextBtnDisabled, setMoreJobsNextBtnDisabled] = useState(true)
useEffect(() => {
async function fetchJobs() {
@ -54,11 +63,24 @@ export default function Home() {
if (emblaApi) emblaApi.scrollNext()
}, [emblaApi])
const scrollMoreJobsPrev = useCallback(() => {
if (moreJobsEmblaApi) moreJobsEmblaApi.scrollPrev()
}, [moreJobsEmblaApi])
const scrollMoreJobsNext = useCallback(() => {
if (moreJobsEmblaApi) moreJobsEmblaApi.scrollNext()
}, [moreJobsEmblaApi])
const onSelect = useCallback((emblaApi: any) => {
setPrevBtnDisabled(!emblaApi.canScrollPrev())
setNextBtnDisabled(!emblaApi.canScrollNext())
}, [])
const onMoreJobsSelect = useCallback((emblaApi: any) => {
setMoreJobsPrevBtnDisabled(!emblaApi.canScrollPrev())
setMoreJobsNextBtnDisabled(!emblaApi.canScrollNext())
}, [])
useEffect(() => {
if (!emblaApi) return
onSelect(emblaApi)
@ -66,6 +88,13 @@ export default function Home() {
emblaApi.on("select", onSelect)
}, [emblaApi, onSelect])
useEffect(() => {
if (!moreJobsEmblaApi) return
onMoreJobsSelect(moreJobsEmblaApi)
moreJobsEmblaApi.on("reInit", onMoreJobsSelect)
moreJobsEmblaApi.on("select", onMoreJobsSelect)
}, [moreJobsEmblaApi, onMoreJobsSelect])
return (
<div className="min-h-screen bg-gray-50 flex flex-col font-sans">
<Navbar />
@ -177,19 +206,43 @@ export default function Home() {
<h2 className="text-2xl md:text-3xl font-bold text-gray-900">
{t("home.moreJobs.title")}
</h2>
<Link href="/jobs">
<Button className="bg-orange-500 hover:bg-orange-600 text-white font-bold rounded-lg">
{t("home.moreJobs.viewAll")}
<div className="flex items-center gap-3">
<Button
variant="outline"
size="icon"
className="rounded-full border-gray-300 hover:border-orange-500 hover:text-orange-500 transition-all w-10 h-10"
onClick={scrollMoreJobsPrev}
disabled={moreJobsPrevBtnDisabled}
>
<ChevronLeft className="w-5 h-5" />
</Button>
</Link>
<Button
variant="outline"
size="icon"
className="rounded-full border-gray-300 hover:border-orange-500 hover:text-orange-500 transition-all w-10 h-10"
onClick={scrollMoreJobsNext}
disabled={moreJobsNextBtnDisabled}
>
<ChevronRight className="w-5 h-5" />
</Button>
<Link href="/jobs">
<Button className="bg-orange-500 hover:bg-orange-600 text-white font-bold rounded-lg">
{t("home.moreJobs.viewAll")}
</Button>
</Link>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-6">
{loading ? (
<div className="col-span-full text-center py-8">Carregando vagas...</div>
) : jobs.slice(0, 8).map((job, index) => (
<JobCard key={`more-${job.id}-${index}`} job={job} />
))}
<div className="overflow-hidden" ref={moreJobsEmblaRef}>
<div className="flex gap-6">
{loading ? (
<div className="flex-[0_0_100%] text-center py-8">Carregando vagas...</div>
) : jobs.slice(0, 8).map((job, index) => (
<div key={`more-${job.id}-${index}`} className="flex-[0_0_100%] sm:flex-[0_0_50%] lg:flex-[0_0_50%] xl:flex-[0_0_33.333%] 2xl:flex-[0_0_25%] min-w-0 pb-1">
<JobCard job={job} />
</div>
))}
</div>
</div>
</div>
</section>