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

feat: move homepage carousel arrows to the sides of job container

Browse source
This commit is contained in:
Tiago Yamamoto 2026-02-23 20:50:19 -06:00
parent 279c0cf067
commit cf761a70e4
1 changed files with 31 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -149,38 +149,40 @@ export default function Home() {
<h2 className="text-2xl md:text-3xl font-bold text-gray-900"> <h2 className="text-2xl md:text-3xl font-bold text-gray-900">
{t("home.featuredJobs.title")} {t("home.featuredJobs.title")}
</h2> </h2>
<div className="flex items-center gap-2">
<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={scrollPrev}
disabled={prevBtnDisabled}
>
<ChevronLeft className="w-5 h-5" />
</Button>
<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={scrollNext}
disabled={nextBtnDisabled}
>
<ChevronRight className="w-5 h-5" />
</Button>
</div>
</div> </div>
<div className="overflow-hidden" ref={emblaRef}> <div className="relative group">
<div className="flex gap-6"> <Button
{loading ? ( variant="outline"
<div className="flex-[0_0_100%] text-center py-8">Carregando vagas...</div> size="icon"
) : jobs.slice(0, 8).map((job, index) => ( className="absolute left-0 top-1/2 -translate-y-1/2 -ml-4 md:-ml-6 z-10 bg-white shadow-md rounded-full border-gray-300 hover:border-orange-500 hover:text-orange-500 transition-all w-10 h-10 lg:w-12 lg:h-12 flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed"
<div key={`latest-${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"> onClick={scrollPrev}
<JobCard job={job} /> disabled={prevBtnDisabled}
</div> >
))} <ChevronLeft className="w-5 h-5 lg:w-6 lg:h-6" />
</Button>
<div className="overflow-hidden px-1 py-4" ref={emblaRef}>
<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={`latest-${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>
<Button
variant="outline"
size="icon"
className="absolute right-0 top-1/2 -translate-y-1/2 -mr-4 md:-mr-6 z-10 bg-white shadow-md rounded-full border-gray-300 hover:border-orange-500 hover:text-orange-500 transition-all w-10 h-10 lg:w-12 lg:h-12 flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed"
onClick={scrollNext}
disabled={nextBtnDisabled}
>
<ChevronRight className="w-5 h-5 lg:w-6 lg:h-6" />
</Button>
</div> </div>
</div> </div>
</section> </section>