68 lines
2.0 KiB
TypeScript
68 lines
2.0 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Fab, Tooltip, Box, Typography } from '@mui/material';
|
|
import { IoLogoWhatsapp } from 'react-icons/io';
|
|
|
|
export const WhatsAppButton: React.FC = () => {
|
|
const [hovered, setHovered] = useState(false);
|
|
const phoneNumber = '919999999999'; // Simulated brand WhatsApp contact
|
|
const message = encodeURIComponent(
|
|
'Hi Mani Candles! I am browsing your digital store and would like to inquire about B2C candle delivery or B2B corporate catalogs.'
|
|
);
|
|
const whatsappUrl = `https://wa.me/${phoneNumber}?text=${message}`;
|
|
|
|
return (
|
|
<Box
|
|
onMouseEnter={() => setHovered(true)}
|
|
onMouseLeave={() => setHovered(false)}
|
|
sx={{
|
|
position: 'fixed',
|
|
bottom: 24,
|
|
right: { xs: 24, md: 80 }, // Shifted on desktop to make room for the scroll candle
|
|
zIndex: 1000,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 1.5,
|
|
}}
|
|
>
|
|
{hovered && (
|
|
<Box
|
|
sx={{
|
|
backgroundColor: 'background.paper',
|
|
py: 1,
|
|
px: 2,
|
|
borderRadius: 4,
|
|
boxShadow: '0 4px 15px rgba(0,0,0,0.06)',
|
|
border: '1px solid #E6DFD5',
|
|
transition: 'all 0.3s ease',
|
|
}}
|
|
>
|
|
<Typography variant="caption" sx={{ fontWeight: 500, color: 'secondary.main', letterSpacing: '0.05em' }}>
|
|
Inquire on WhatsApp
|
|
</Typography>
|
|
</Box>
|
|
)}
|
|
<Tooltip title="" placement="left">
|
|
<Fab
|
|
color="success"
|
|
href={whatsappUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
sx={{
|
|
backgroundColor: '#25D366',
|
|
color: '#FFFFFF',
|
|
boxShadow: '0 4px 20px rgba(37, 211, 102, 0.4)',
|
|
'&:hover': {
|
|
backgroundColor: '#128C7E',
|
|
boxShadow: '0 8px 30px rgba(18, 140, 126, 0.6)',
|
|
},
|
|
}}
|
|
>
|
|
<IoLogoWhatsapp size={26} />
|
|
</Fab>
|
|
</Tooltip>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default WhatsAppButton;
|