59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Box, Typography } from '@mui/material';
|
|
|
|
const messages = [
|
|
'Free complimentary shipping across India on B2C orders above ₹999',
|
|
'Corporate Gifting & Wedding return favors: Custom branding & wholesale prices available',
|
|
'Design your own olfactory signature with our Custom Candle Builder',
|
|
'Sustainable luxury: 100% natural hand-poured soy wax candles'
|
|
];
|
|
|
|
export const AnnouncementBar: React.FC = () => {
|
|
const [currentMessageIndex, setCurrentMessageIndex] = useState(0);
|
|
const [fade, setFade] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const rotateInterval = setInterval(() => {
|
|
setFade(false);
|
|
setTimeout(() => {
|
|
setCurrentMessageIndex((prevIndex) => (prevIndex + 1) % messages.length);
|
|
setFade(true);
|
|
}, 500); // match transition duration
|
|
}, 5000);
|
|
|
|
return () => clearInterval(rotateInterval);
|
|
}, []);
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
backgroundColor: 'secondary.main',
|
|
color: '#F5EFEB',
|
|
py: 0.8,
|
|
px: 2,
|
|
textAlign: 'center',
|
|
position: 'relative',
|
|
zIndex: 1201,
|
|
borderBottom: '1px solid rgba(255, 255, 255, 0.05)'
|
|
}}
|
|
>
|
|
<Typography
|
|
variant="caption"
|
|
sx={{
|
|
display: 'block',
|
|
fontSize: '0.75rem',
|
|
letterSpacing: '0.08em',
|
|
fontWeight: 400,
|
|
textTransform: 'uppercase',
|
|
opacity: fade ? 1 : 0,
|
|
transition: 'opacity 0.5s ease-in-out',
|
|
}}
|
|
>
|
|
{messages[currentMessageIndex]}
|
|
</Typography>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default AnnouncementBar;
|