feat(ui): add sliding announcement marquee ticker banner to header [TASK-16.1]
This commit is contained in:
parent
d52d1e57f2
commit
ce36d7ab38
@ -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;
|
||||||
|
}
|
||||||
|
|||||||
@ -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 */}
|
||||||
|
|||||||
35
frontend/application/components/TickerBanner.tsx
Normal file
35
frontend/application/components/TickerBanner.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user