William Jeynes
49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
import React from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Carousel, CarouselContent, CarouselItem } from "../ui/carousel"
|
|
import Autoplay from "embla-carousel-autoplay"
|
|
|
|
const Customers: React.FC = () => {
|
|
const { t } = useTranslation("common");
|
|
|
|
return (
|
|
<div>
|
|
<h2 className="text-3xl font-bold text-center mb-12" id="customers">
|
|
{t("customers")}
|
|
</h2>
|
|
<Carousel className="w-full m-3" opts={{
|
|
loop: true,
|
|
|
|
}}
|
|
plugins={[
|
|
Autoplay({
|
|
delay: 2000,
|
|
}),
|
|
]}
|
|
>
|
|
<CarouselContent>
|
|
<CustomerItem customer={"Goliath National Bank"} />
|
|
<CustomerItem customer={"LSPD"} />
|
|
<CustomerItem customer={"University of Sheffield"} />
|
|
<CustomerItem customer={"Doofemshertz Evil Inc."} />
|
|
<CustomerItem customer={"Hooli"} />
|
|
<CustomerItem customer={"Los Pollos Hermanos"} />
|
|
<CustomerItem customer={"Hamlin, Hamlin & McGill"} />
|
|
</CarouselContent>
|
|
|
|
</Carousel>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
function CustomerItem({ customer }: { customer: String }) {
|
|
return (
|
|
<CarouselItem className="basis-1/3 pl-10">
|
|
<div className="bg-gray-600 p-3 rounded-sm">
|
|
<h1 className="text-white override text-center">{customer}</h1>
|
|
</div>
|
|
</CarouselItem>
|
|
)
|
|
}
|
|
|
|
export default Customers; |