191 lines
11 KiB
TypeScript
191 lines
11 KiB
TypeScript
import { Box, Image, Text, Flex, Accordion } from '@chakra-ui/react'
|
||
import { colors } from '../colors';
|
||
import { motion, useInView } from 'framer-motion';
|
||
import { useRef } from 'react';
|
||
const MotionBox = motion(Box);
|
||
const questions = [
|
||
{
|
||
image: '/images/q1.png',
|
||
question: "煮餸落少啲油，甚至唔落油就等於健康？",
|
||
answer: "錯！油脂是身體合成荷爾蒙的重要材料，若完全不攝取油脂，可能會導致皮膚變乾、容易脫髮，對女生來說更可能影響生理週期。簡單來說，身體需要「好脂肪」來幫助吸收營養，適量攝取優質油脂更有助維持細胞健康！"
|
||
},
|
||
{
|
||
image: '/images/q2.png',
|
||
question: "用橄欖油煮食就一定最健康？",
|
||
answer: "未必！橄欖油雖富含單元不飽和脂肪酸如Omega-9，但人體可自行合成，而其 Omega-3 和 Omega-6 含量偏低，脂肪酸比例並不均衡，對小孩及孕婦來說，長期單一使用可能無法滿足他們對營養素的需求。而初榨橄欖油煙點低（約190°C），高溫煮食容易產生有害物質，反成健康負擔。"
|
||
},
|
||
{
|
||
image: '/images/q3.png',
|
||
question: "使用單一油種的食用油較好？",
|
||
answer: "未必！ 長期只用一種食油，猶如「偏食」，容易導致脂肪酸攝取失衡，影響健康。不同食油各有優缺點，例如米糠油、橄欖油、葵花籽油Omega-3偏低，不適合發育中的小孩、孕婦及哺乳中的婦女長期單一使用；初榨橄欖油與初榨亞麻籽油不耐高溫；花生油與牛油果油的飽和脂肪偏高，增加心血管堵塞的風險。"
|
||
},
|
||
{
|
||
image: '/images/q4.png',
|
||
question: "貴價油 = 健康油？",
|
||
answer: `錯！健康關鍵在於「脂肪酸比例」，而非價格！
|
||
不同脂肪酸對健康影響各異：
|
||
• 單元不飽和脂肪酸（MUFA / 例如Omega-9） – 有助降低壞膽固醇。
|
||
• 多元不飽和脂肪酸（PUFA / 例如Omega-3、6） – 為人體必需脂肪酸，身體不能合成製造，必須從食物中吸收；但人體無法自行合成，需攝取適當比例，Omega-6 過多會造成身體慢性發炎1
|
||
• 飽和脂肪（SFA） – 過量攝取會提升壞膽固醇，影響心血管健康。`
|
||
},
|
||
{
|
||
image: '/images/q5.png',
|
||
question: "食油種類太多，點揀先唔會中伏？",
|
||
answer: `市面上的食油種類繁多，從花生油、粟米油、芥花籽油、橄欖油、米糠油到牛油果油，每種油都有不同的營養價值和適用範圍。要選擇真正健康和適合日常使用的食油，只需記住 3 個關鍵原則：
|
||
|
||
看煙點：高溫煎炸選用煙點高於200°C的食油，可減少有害物質產生
|
||
看脂肪酸比例：單元不飽和脂肪酸（MUFA）與多元不飽和脂肪酸（PUFA）比例，確保均衡攝取營養
|
||
看認證：符合國際營養機構推薦，如世界衛生組織（WHO）建議的脂肪酸攝取比例`
|
||
}
|
||
]
|
||
|
||
function Qa() {
|
||
const formatText = (text: string, questionIndex: number) => {
|
||
const boldPhrases = ["錯！", "未必！", " • 單元不飽和脂肪酸", " • 多元不飽和脂肪酸", " • 飽和脂肪", "看煙點：", "看脂肪酸比例：", "看認證："];
|
||
|
||
return text.split('\n').map((line, i) => {
|
||
const matchingPhrase = boldPhrases.find(phrase => line.startsWith(phrase));
|
||
const hasBoldPhrase = !!matchingPhrase;
|
||
const boldPart = hasBoldPhrase ? matchingPhrase : "";
|
||
const restOfLine = hasBoldPhrase ? line.substring(matchingPhrase.length) : line;
|
||
|
||
return (
|
||
<Box key={i}
|
||
color={colors.textColor}
|
||
fontSize='lg'
|
||
ml={1}
|
||
className='font-noto-sans font-regular'
|
||
>
|
||
{hasBoldPhrase && (
|
||
<Text as="span" className='font-noto-sans font-black'>
|
||
{boldPart}
|
||
</Text>
|
||
)}
|
||
{restOfLine.split('\t').map((segment, j) => {
|
||
// Special handling for superscript in question index 3
|
||
if (questionIndex === 3) {
|
||
const parts = segment.split(/(\d+)$/);
|
||
if (parts.length > 1) {
|
||
return (
|
||
<Text as="span" ml={j === 0 ? 0 : 4} key={j}>
|
||
{parts[0]}
|
||
<Text as="sup" fontSize="xs">{parts[1]}</Text>
|
||
</Text>
|
||
);
|
||
}
|
||
}
|
||
return (
|
||
<Text as="span" ml={j === 0 ? 0 : 4} key={j}>
|
||
{segment}
|
||
</Text>
|
||
);
|
||
})}
|
||
{i < text.split('\n').length - 1 && <br />}
|
||
</Box>
|
||
);
|
||
});
|
||
};
|
||
|
||
|
||
return (
|
||
<Box
|
||
w="100%"
|
||
position="relative"
|
||
>
|
||
<Accordion.Root variant="plain" multiple={true} >
|
||
{questions.map((item, index) => {
|
||
// Create a ref for each question item
|
||
const questionRef = useRef(null);
|
||
// Use useInView with once:true to trigger animation only once when scrolled into view
|
||
const isInView = useInView(questionRef, {
|
||
once: true, // Only trigger once
|
||
amount: 0.3 // Trigger when 30% of element is in viewport
|
||
});
|
||
|
||
return (
|
||
<MotionBox
|
||
ref={questionRef}
|
||
key={index}
|
||
initial={{ opacity: 0, y: 30 }}
|
||
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
|
||
transition={{
|
||
duration: 0.6,
|
||
delay: index * 0.15,
|
||
ease: "easeOut"
|
||
}}
|
||
>
|
||
<Accordion.Item value={item.question} width={'full'} bgColor='white'>
|
||
<Accordion.ItemTrigger
|
||
_hover={{
|
||
boxShadow: 'none',
|
||
outline: 'none',
|
||
border: 'none'
|
||
}}
|
||
_focus={{
|
||
boxShadow: 'none',
|
||
outline: 'none',
|
||
border: 'none'
|
||
}}
|
||
_active={{
|
||
boxShadow: 'none',
|
||
outline: 'none',
|
||
border: 'none'
|
||
}}
|
||
bgColor={index % 2 == 0 ? 'white' : '#FBFCF3'} height='auto'
|
||
justifyContent='center'
|
||
w='full'
|
||
alignItems={'center'}>
|
||
<Flex w={{ base: '95%', sm: '95%', md: '80%', lg: '70%', xl: '50%' }}
|
||
direction={{ base: 'column', sm: "column", md: 'row' }}
|
||
marginY={4}
|
||
>
|
||
<Flex w={{ base: '15%', sm: '15%', md: '10%', lg: '10%', xl: '10%' }}
|
||
justifyContent={{ base: 'flex-start', sm: 'flex-start', md: 'flex-end' }}
|
||
alignItems='center'>
|
||
<Image src={item.image}
|
||
mt={2.5}
|
||
mr={{ base: 0, sm: 0, md: 1.5 }}
|
||
w={{ base: '70px', sm: '70px', md: '45px', lg: '45px', xl: '45px' }}
|
||
/>
|
||
</Flex>
|
||
<Flex w='90%'
|
||
alignItems={'center'}>
|
||
<Text
|
||
color={colors.textColor}
|
||
fontSize='2xl'
|
||
className='font-noto-sans font-black'
|
||
>{item.question}</Text>
|
||
</Flex>
|
||
</Flex>
|
||
</Accordion.ItemTrigger>
|
||
<Accordion.ItemContent>
|
||
<Accordion.ItemBody
|
||
bgColor={index % 2 == 0 ? 'white' : '#FBFCF3'}
|
||
justifyItems={'center'}>
|
||
<Flex w={{ base: '95%', sm: '95%', md: '80%', lg: '70%', xl: '50%' }}>
|
||
<Flex w={{ base: '3%', sm: '2%', md: '10%', lg: '10%', xl: '10%' }}
|
||
justifyContent={{ base: 'flex-start', sm: 'flex-start', md: 'flex-end' }}
|
||
alignItems='center'>
|
||
</Flex>
|
||
<Flex w={{ base: '97%', sm: '98%', md: '90%', lg: '90%', xl: '90%' }}
|
||
direction={'column'}>
|
||
{formatText(item.answer, index)}
|
||
{index == 3 ? (
|
||
<Text mt={5} color={colors.textColor} fontSize={'xs'} className='font-noto-sans font-regular'>
|
||
<Box as="sup" fontSize="0.6em" mr="1px">1</Box>
|
||
{" Omega-6不飽和脂肪酸在體內代謝會產生花生四烯酸，進而產生促發炎的前列腺素，導致血管收縮及慢性發炎。"}
|
||
</Text>
|
||
) : (<Flex />)}
|
||
</Flex>
|
||
</Flex>
|
||
</Accordion.ItemBody>
|
||
</Accordion.ItemContent>
|
||
</Accordion.Item>
|
||
</MotionBox>
|
||
);
|
||
})}
|
||
</Accordion.Root>
|
||
</Box>
|
||
);
|
||
}
|
||
export default Qa; |