feat(ui): add sliding announcement marquee ticker banner to header [TASK-16.1]

This commit is contained in:
parsa aghaei 2026-08-03 11:48:40 +03:30
parent d52d1e57f2
commit ce36d7ab38
3 changed files with 57 additions and 5 deletions

View File

@ -175,3 +175,22 @@
.sleek-hscroll::-webkit-scrollbar-thumb:hover { .sleek-hscroll::-webkit-scrollbar-thumb:hover {
background: #003da6; background: #003da6;
} }
@keyframes marquee {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(50%);
}
}
.animate-marquee {
display: flex;
width: max-content;
animation: marquee 25s linear infinite;
}
.animate-marquee:hover {
animation-play-state: paused;
}

View File

@ -11,6 +11,7 @@ import { toast } from "sonner";
import HeaderButton from "./HeaderButton"; import HeaderButton from "./HeaderButton";
import AuthModal from "./AuthModal"; import AuthModal from "./AuthModal";
import PrescriptionUploadModal from "./PrescriptionUploadModal"; import PrescriptionUploadModal from "./PrescriptionUploadModal";
import TickerBanner from "./TickerBanner";
import { cn } from "../lib/utils"; import { cn } from "../lib/utils";
import { productService } from "../lib/services/productService"; import { productService } from "../lib/services/productService";
@ -132,11 +133,8 @@ export default function Header({
<PrescriptionUploadModal isOpen={isPrescriptionModalOpen} onClose={() => setIsPrescriptionModalOpen(false)} /> <PrescriptionUploadModal isOpen={isPrescriptionModalOpen} onClose={() => setIsPrescriptionModalOpen(false)} />
<div className="sticky top-0 z-50 w-full shadow-md font-vazir" dir="rtl"> <div className="sticky top-0 z-50 w-full shadow-md font-vazir" dir="rtl">
{/* Top Free Shipping Notice */} {/* Sliding Announcement Ticker Banner */}
<div className="bg-canina-gold text-canina-dark text-xs font-black py-1.5 text-center tracking-wider flex items-center justify-center gap-2"> <TickerBanner />
<span>🚚</span>
<span>{getText('shipping_notice', "ارسال رایگان برای سفارش‌های بالای ۱۵۰ هزار تومان — گارانتی اصالت کانینا آلمان")}</span>
</div>
<header className="bg-white border-b border-medical-gray-200"> <header className="bg-white border-b border-medical-gray-200">
{/* TOP ROW: Logo + Search + Primary Actions */} {/* TOP ROW: Logo + Search + Primary Actions */}

View File

@ -0,0 +1,35 @@
"use client";
import React from "react";
import { useSettingsStore } from "../lib/store/settingsStore";
import { Sparkles } from "lucide-react";
export default function TickerBanner() {
const getText = useSettingsStore((state) => state.getText);
const announcementText = getText(
"shipping_notice",
"ارسال رایگان برای سفارش‌های بالای ۱۵۰ هزار تومان — گارانتی اصالت کانینا آلمان — مشاوره تخصصی مکمل‌های دارویی سگ و گربه با کادر دامپزشکان مجرب"
);
return (
<div className="bg-canina-gold text-canina-dark text-xs font-black py-1.5 overflow-hidden relative shadow-xs border-b border-amber-300/40 select-none">
<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>
);
}