56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import Link from 'next/link';
|
|
import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react';
|
|
import {
|
|
Carousel,
|
|
CarouselContent,
|
|
CarouselItem,
|
|
CarouselPrevious,
|
|
CarouselNext,
|
|
} from '@/components/ui/carousel';
|
|
|
|
const PROMOS = [
|
|
{ text: 'Send a Gift Card', href: '/' },
|
|
{ text: 'Free shipping on orders over $100', href: '/' },
|
|
{ text: '30-day return policy', href: '/' },
|
|
];
|
|
|
|
const PromoBanner: React.FC = () => {
|
|
return (
|
|
<div className="bg-muted">
|
|
<Carousel opts={{ loop: true }} className="container mx-auto px-4">
|
|
<CarouselContent>
|
|
{PROMOS.map((promo) => (
|
|
<CarouselItem key={promo.text}>
|
|
<div className="h-10 flex items-center justify-center">
|
|
<Link
|
|
href={promo.href}
|
|
className="text-xs font-medium text-gray-900 underline underline-offset-2 hover:text-gray-600 transition-colors"
|
|
>
|
|
{promo.text}
|
|
</Link>
|
|
</div>
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
<CarouselPrevious
|
|
variant="ghost"
|
|
className="left-0 size-7 text-gray-900 hover:text-gray-600"
|
|
>
|
|
<RiArrowLeftSLine size={16} />
|
|
</CarouselPrevious>
|
|
<CarouselNext
|
|
variant="ghost"
|
|
className="right-0 size-7 text-gray-900 hover:text-gray-600"
|
|
>
|
|
<RiArrowRightSLine size={16} />
|
|
</CarouselNext>
|
|
</Carousel>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PromoBanner;
|