147 lines
5.0 KiB
TypeScript
147 lines
5.0 KiB
TypeScript
import { Box, Stack, Image, Text, Flex, Link } from '@chakra-ui/react'
|
|
import { colors } from '../colors';
|
|
import { useEffect, useRef } from 'react';
|
|
import { motion, useInView } from 'framer-motion'
|
|
|
|
function Salespoint() {
|
|
const shopImages = [
|
|
{
|
|
image: '/images/pp.png',
|
|
link: 'https://www.pns.hk/zh-hk/all-brands/b/112546/%E7%8D%85%E7%90%83%E5%98%9C',
|
|
},
|
|
{
|
|
image: '/images/we.png',
|
|
link: 'https://www.wellcome.com.hk/zh-hant/search?keyword=%E7%8D%85%E7%90%83%E5%98%9C&page=1',
|
|
},
|
|
{
|
|
image: '/images/hk.png',
|
|
link: 'https://www.hktvmall.com/hktv/zh/search_a?keyword=%E7%8D%85%E7%90%83%E5%98%9C',
|
|
},
|
|
]
|
|
|
|
const fbContainerRef = useRef<HTMLDivElement>(null);
|
|
const titleRef = useRef<HTMLDivElement>(null);
|
|
const isTitleInView = useInView(titleRef, { once: true });
|
|
|
|
|
|
// Load Facebook SDK and initialize the plugin
|
|
useEffect(() => {
|
|
// Add Facebook SDK if it doesn't exist
|
|
if (!document.getElementById('facebook-jssdk')) {
|
|
const script = document.createElement('script');
|
|
script.id = 'facebook-jssdk';
|
|
script.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v18.0';
|
|
script.async = true;
|
|
script.defer = true;
|
|
document.body.appendChild(script);
|
|
}
|
|
|
|
// Parse XFBML when SDK is loaded
|
|
const handleSDKLoad = () => {
|
|
if ((window as any).FB && fbContainerRef.current) {
|
|
(window as any).FB.XFBML.parse(fbContainerRef.current);
|
|
}
|
|
};
|
|
|
|
// Check if FB is already loaded
|
|
if ((window as any).FB) {
|
|
handleSDKLoad();
|
|
} else {
|
|
// Listen for SDK load
|
|
(window as any).fbAsyncInit = handleSDKLoad;
|
|
}
|
|
|
|
return () => {
|
|
// Clean up
|
|
(window as any).fbAsyncInit = undefined;
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<Stack
|
|
position="relative"
|
|
w="100%"
|
|
overflow="hidden"
|
|
align={'center'}
|
|
>
|
|
<motion.div
|
|
ref={titleRef}
|
|
initial={{ opacity: 0, y: 50 }}
|
|
animate={isTitleInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
|
|
transition={{ duration: 0.7 }}
|
|
>
|
|
<Stack
|
|
w='100%'
|
|
justify={'center'}
|
|
align={'center'}
|
|
>
|
|
<Text
|
|
className='font-melle font-xbold'
|
|
color={colors.textColor}
|
|
fontSize={'4xl'}
|
|
>
|
|
銷售點
|
|
</Text>
|
|
</Stack>
|
|
</motion.div>
|
|
|
|
<Flex
|
|
gap={12}
|
|
direction={{ base: 'column', sm: 'column', md: 'row' }}
|
|
justify="center"
|
|
>
|
|
{shopImages.map((image, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5, delay: index * 0.2 }}
|
|
>
|
|
<Stack
|
|
w='250px'
|
|
justify={'flex-end'}
|
|
>
|
|
<Link href={image.link}>
|
|
<Image src={image.image} cursor="pointer" />
|
|
</Link>
|
|
</Stack>
|
|
</motion.div>
|
|
))}
|
|
</Flex>
|
|
|
|
{/* Facebook Page Plugin */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.7, delay: 0.3 }}
|
|
>
|
|
<Box
|
|
ref={fbContainerRef}
|
|
className="fb-page-container"
|
|
w="100%"
|
|
maxW="500px"
|
|
bgColor='red'
|
|
justifyItems={'center'}
|
|
my={4}
|
|
h="auto" // Add a minimum height so there's space for the plugin to render
|
|
>
|
|
<div id="fb-root"></div>
|
|
<div
|
|
className="fb-page"
|
|
data-href="https://www.facebook.com/hoehinwhiteflower/" // Use a valid Facebook page URL
|
|
data-width="600" // Increased from 500px to 600px
|
|
data-height="700" // Increased from 230px to 400px
|
|
data-hide-cover="false"
|
|
data-show-facepile="false"
|
|
data-tabs="timeline"
|
|
></div>
|
|
</Box>
|
|
</motion.div>
|
|
</Stack>
|
|
)
|
|
}
|
|
|
|
export default Salespoint;
|