82 lines
4.0 KiB
TypeScript
82 lines
4.0 KiB
TypeScript
import { Button } from '@/components/ui/button';
|
|
import { Carousel, type CarouselApi, CarouselContent, CarouselItem } from '@/components/ui/carousel';
|
|
import { getPageSection } from '@/lib/page';
|
|
import { IntroPageProps } from '@/types/page';
|
|
import { Link, usePage } from '@inertiajs/react';
|
|
import Autoplay from 'embla-carousel-autoplay';
|
|
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
|
import { useState } from 'react';
|
|
import InstructorSocials from '../instructor-socials';
|
|
import Section from '../section';
|
|
|
|
const TopInstructors = () => {
|
|
const { props } = usePage<IntroPageProps>();
|
|
const { page, customize, topInstructors } = props;
|
|
const topInstructorsSection = getPageSection(page, 'top_instructors');
|
|
const [api, setApi] = useState<CarouselApi>();
|
|
|
|
return (
|
|
<Section customize={customize} pageSection={topInstructorsSection} containerClass="py-20">
|
|
<div className="mx-auto mb-10 text-center md:max-w-[480px]">
|
|
<p className="text-secondary-foreground mb-1 font-medium">{topInstructorsSection?.title}</p>
|
|
<h2 className="mb-4 text-3xl font-bold sm:text-4xl">{topInstructorsSection?.sub_title}</h2>
|
|
<p className="text-muted-foreground">{topInstructorsSection?.description}</p>
|
|
</div>
|
|
|
|
<Carousel setApi={setApi} className="relative" opts={{ align: 'start', loop: true }} plugins={[Autoplay({ delay: 3000 })]}>
|
|
<CarouselContent>
|
|
{topInstructors.map((instructor) => {
|
|
return (
|
|
<CarouselItem key={instructor.id} className="basis-full md:basis-1/2 lg:basis-1/4">
|
|
<Link href={route('instructors.show', instructor.id)}>
|
|
<div className="px-1.5 py-0.5">
|
|
<div className="group relative h-[380px] overflow-hidden rounded-2xl">
|
|
<img
|
|
className="h-full w-full object-cover object-center"
|
|
src={instructor.user.photo || '/assets/images/intro/default/instructors/instructor-1.png'}
|
|
alt=""
|
|
/>
|
|
|
|
<div className="from-primary dark:from-primary-foreground absolute bottom-0 left-1/2 flex h-full w-full -translate-x-1/2 flex-col justify-end bg-gradient-to-t p-4 text-center opacity-0 transition-all duration-200 group-hover:opacity-100">
|
|
<p className="mb-1 text-lg font-semibold text-white">{instructor.user.name}</p>
|
|
<p className="text-sm text-white">{instructor.designation}</p>
|
|
|
|
<InstructorSocials
|
|
instructor={instructor}
|
|
buttonVariant="ghost"
|
|
buttonClass="bg-muted hover:bg-muted/80 dark:bg-primary/90 dark:hover:bg-primary/80 dark:text-primary-foreground"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</CarouselItem>
|
|
);
|
|
})}
|
|
</CarouselContent>
|
|
|
|
<Button
|
|
size="icon"
|
|
variant="outline"
|
|
disabled={!api?.canScrollPrev()}
|
|
onClick={() => api?.scrollPrev()}
|
|
className="hover:border-primary hover:bg-background absolute top-1/2 -left-3 -translate-y-1/2"
|
|
>
|
|
<ChevronLeft />
|
|
</Button>
|
|
<Button
|
|
size="icon"
|
|
variant="outline"
|
|
disabled={!api?.canScrollNext()}
|
|
onClick={() => api?.scrollNext()}
|
|
className="hover:border-primary hover:bg-background absolute top-1/2 -right-3 -translate-y-1/2"
|
|
>
|
|
<ChevronRight />
|
|
</Button>
|
|
</Carousel>
|
|
</Section>
|
|
);
|
|
};
|
|
|
|
export default TopInstructors;
|