97 lines
4.1 KiB
TypeScript
97 lines
4.1 KiB
TypeScript
"use client";
|
||
import React from "react";
|
||
import { useSettingsStore } from "../lib/store/settingsStore";
|
||
import { Sparkles } from "lucide-react";
|
||
|
||
import Link from "next/link";
|
||
import Image from "next/image";
|
||
|
||
export default function TickerBanner() {
|
||
const getText = useSettingsStore((state) => state.getText);
|
||
const logoUrl = getText("site_logo", "");
|
||
const textEn = getText("site_logo_text_en", "Canina");
|
||
const textFa = getText("site_logo_text_fa", "ایران");
|
||
const isBlobOrData = typeof logoUrl === 'string' && (logoUrl.startsWith('blob:') || logoUrl.startsWith('data:'));
|
||
|
||
const announcementText = getText(
|
||
"shipping_notice",
|
||
"ارسال رایگان برای سفارشهای بالای ۱۵۰ هزار تومان — گارانتی اصالت کنینا آلمان — مشاوره تخصصی مکملهای دارویی سگ و گربه با کادر دامپزشکان مجرب"
|
||
);
|
||
|
||
return (
|
||
<div className="bg-canina-gold text-canina-dark select-none shadow-xs border-b border-amber-300/40">
|
||
{/* Mobile: Logo on the right + Ticker marquee on the left in one single row */}
|
||
<div className="lg:hidden flex items-center h-10 px-2.5 overflow-hidden">
|
||
{/* Mobile Compact Logo */}
|
||
<Link href="/" className="flex items-center gap-1.5 shrink-0 pl-2 ml-1 border-l border-amber-500/30">
|
||
{logoUrl ? (
|
||
<Image
|
||
src={logoUrl}
|
||
alt={`${textEn} ${textFa}`}
|
||
width={80}
|
||
height={26}
|
||
priority
|
||
unoptimized={isBlobOrData}
|
||
className="h-6 w-auto max-w-[85px] object-contain shrink-0"
|
||
/>
|
||
) : (
|
||
<div className="flex items-center gap-1">
|
||
<span className="w-6 h-6 rounded-lg bg-canina-blue text-white flex items-center justify-center font-black text-xs italic shadow-xs">
|
||
{textEn.charAt(0).toUpperCase() || "C"}
|
||
</span>
|
||
<span className="font-black text-xs text-canina-blue italic">
|
||
{textEn}
|
||
</span>
|
||
{textFa && (
|
||
<span className="text-[10px] font-bold text-canina-dark/80 font-vazir pr-0.5">
|
||
{textFa}
|
||
</span>
|
||
)}
|
||
</div>
|
||
)}
|
||
</Link>
|
||
|
||
{/* Marquee ticker filling the rest */}
|
||
<div className="flex-1 overflow-hidden relative text-[11px] font-black">
|
||
<div className="flex items-center gap-2 whitespace-nowrap animate-marquee">
|
||
<span className="flex items-center gap-1.5 px-3">
|
||
<Sparkles className="w-3 h-3 text-canina-dark animate-pulse inline" />
|
||
{announcementText}
|
||
</span>
|
||
<span className="flex items-center gap-1.5 px-3">
|
||
<Sparkles className="w-3 h-3 text-canina-dark animate-pulse inline" />
|
||
{announcementText}
|
||
</span>
|
||
<span className="flex items-center gap-1.5 px-3">
|
||
<Sparkles className="w-3 h-3 text-canina-dark animate-pulse inline" />
|
||
{announcementText}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Desktop: Full-width ticker banner as before */}
|
||
<div className="hidden lg:block text-xs font-black py-1.5 overflow-hidden relative">
|
||
<div className="flex items-center gap-2 whitespace-nowrap animate-marquee">
|
||
<span className="flex items-center gap-2 px-4">
|
||
<Sparkles className="w-3.5 h-3.5 text-canina-dark animate-pulse inline" />
|
||
{announcementText}
|
||
</span>
|
||
<span className="flex items-center gap-2 px-4">
|
||
<Sparkles className="w-3.5 h-3.5 text-canina-dark animate-pulse inline" />
|
||
{announcementText}
|
||
</span>
|
||
<span className="flex items-center gap-2 px-4">
|
||
<Sparkles className="w-3.5 h-3.5 text-canina-dark animate-pulse inline" />
|
||
{announcementText}
|
||
</span>
|
||
<span className="flex items-center gap-2 px-4">
|
||
<Sparkles className="w-3.5 h-3.5 text-canina-dark animate-pulse inline" />
|
||
{announcementText}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|