import { Box, HStack, Image, Stack, Text, Link, Flex } from '@chakra-ui/react' import { motion, useInView } from 'framer-motion' import { useEffect, useRef } from 'react'; const MotionBox = motion.create(Box) const MotionStack = motion.create(Stack) const MotionHStack = motion.create(HStack) const MotionText = motion.create(Text) const MotionImage = motion.create(Image) const MotionFlex = motion.create(Flex) const truthItems = [ { id: 1, image: '/images/new/ans_step1.webp', desc: '**出街食飯死亡率大增近五成!**即睇營養師拆解「油」之迷思。' }, { id: 2, image: '/images/new/ans_step2.webp', desc: '**三高年輕化警號!**營養師揭港人隱形致肥陷阱!一支好油決定血管命運。' }, { id: 3, image: '/images/new/ans_step3.webp', desc: '**三高人士同樣啱食!**營養師教你自製健康手撕蔥油雞髀。' }, { id: 4, image: '/images/new/ans_step4.webp', desc: '**BBC認證豬油是健康食材?**混合食油等於垃圾油?純正食油一定最好? 各種食油迷思可能正在誤導你,由營養學家為你拆解多數人不知道的真相!' }, ] const renderDescription = (text: string) => { const parts = text.split(/(\*\*.*?\*\*)/) return parts.map((part, index) => { if (part.startsWith('**') && part.endsWith('**')) { return ( {part.slice(2, -2)} ) } return {part} }) } function Truth() { const shopImages = [ { image: '/images/pp.webp', link: 'https://www.pns.hk/en/all-brands/b/112546/lion-globe', }, { image: '/images/we.webp', link: 'https://www.wellcome.com.hk/zh-hant/search?keyword=%E7%8D%85%E7%90%83%E5%98%9C&page=1', }, { image: '/images/hk.webp', link: 'https://www.hktvmall.com/hktv/zh/main/%E7%8D%85%E7%90%83%E5%98%9C%E6%97%97%E8%89%A6%E5%BA%97/s/H1261001', }, ] const fbContainerRef = useRef(null); const mainRef = useRef(null); const titleRef = useRef(null); const isMainInView = useInView(mainRef, { once: true }); 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 ( 想知道更多食用油健康真相? {truthItems.map((item, index) => ( {renderDescription(item.desc)} ))} 點擊以下銷售點連結 {shopImages.map((image, index) => ( ))} ) } export default Truth;