Banner

Preview

Code

"use client"

import { Clock, Trophy, Truck, X } from "@phosphor-icons/react"

const BannerItems = () => {
	return (
		<div className="w-full flex justify-around lg:justify-start items-center gap-x-6 lg:gap-x-10">
			<p className="inline-flex flex-row items-center font-semibold truncate">
				<Clock size={22} />
				<span className="ml-2">Voor 23:00 besteld, morgen in huis</span>
			</p>
			<p className="inline-flex flex-row items-center font-semibold truncate">
				<Trophy size={22} />
				<span className="ml-2">Beste online winkel</span>
			</p>
			<p className="inline-flex flex-row items-center font-semibold truncate">
				<Truck size={22} />
				<span className="ml-2">Gratis retour binnen 30 dagen</span>
			</p>
		</div>
	)
}

const Banner = () => (
	<div className="container flex items-center gap-x-2 md:gap-x-6 py-2">
		<div className="flex-1 overflow-hidden flex items-center">
			<div className="hidden md:block w-full">
				<BannerItems />
			</div>

			<div className="block md:hidden overflow-x-hidden w-full relative">
				<div className="animate-marquee whitespace-nowrap flex items-center w-fit pr-6">
					<BannerItems />
				</div>
				<div className="absolute top-0 animate-marquee2 whitespace-nowrap flex items-center w-fit pr-6">
					<BannerItems />
				</div>
			</div>
		</div>

		<button type="button" className="inline-flex justify-end p-2">
			<span className="sr-only">Dismiss</span>
			<X size={22} />
		</button>
	</div>
)

export default Banner