123 lines
5.6 KiB
TypeScript
123 lines
5.6 KiB
TypeScript
import { Box, Stack, Image, Flex, Text } from '@chakra-ui/react'
|
||
import { useState } from 'react'
|
||
|
||
interface InfoData {
|
||
id: number
|
||
title: string
|
||
image: string
|
||
description: string
|
||
}
|
||
|
||
const infoData: InfoData[] = [
|
||
{
|
||
id: 1,
|
||
title: '膽固醇\n超標',
|
||
image: '/images/new/info_1.webp',
|
||
description: '長期攝取過多飽和脂肪及反式脂肪（例如牛油、加工食品、或重複使用煎炸油），會令體內壞膽固醇（LDL）上升、好膽固醇（HDL）下降，導致膽固醇積聚喺血管內壁，形成血塊塞血管，有機會引致中風、心肌梗塞，甚至心臟病等嚴重後果。'
|
||
},
|
||
{
|
||
id: 2,
|
||
title: '中央肥胖\n脂肪肝',
|
||
image: '/images/new/info_2.webp',
|
||
description: '長期攝取過多飽和脂肪及反式脂肪（例如牛油、加工食品、或重複使用煎炸油），會令體內壞膽固醇（LDL）上升、好膽固醇（HDL）下降，導致膽固醇積聚喺血管內壁，形成血塊塞血管，有機會引致中風、心肌梗塞，甚至心臟病等嚴重後果。'
|
||
},
|
||
{
|
||
id: 3,
|
||
title: '皮膚暗啞\n容易脫髮',
|
||
image: '/images/new/info_3.webp',
|
||
description: '長期攝取過多飽和脂肪及反式脂肪（例如牛油、加工食品、或重複使用煎炸油），會令體內壞膽固醇（LDL）上升、好膽固醇（HDL）下降，導致膽固醇積聚喺血管內壁，形成血塊塞血管，有機會引致中風、心肌梗塞，甚至心臟病等嚴重後果。'
|
||
},
|
||
{
|
||
id: 4,
|
||
title: '經常容易\n覺得疲倦',
|
||
image: '/images/new/info_4.webp',
|
||
description: '長期攝取過多飽和脂肪及反式脂肪（例如牛油、加工食品、或重複使用煎炸油），會令體內壞膽固醇（LDL）上升、好膽固醇（HDL）下降，導致膽固醇積聚喺血管內壁，形成血塊塞血管，有機會引致中風、心肌梗塞，甚至心臟病等嚴重後果。'
|
||
}
|
||
]
|
||
|
||
function Info() {
|
||
const [selectedInfo, setSelectedInfo] = useState<number>(1)
|
||
|
||
return (
|
||
<Box
|
||
position="relative"
|
||
w="100%"
|
||
minH={{ base: "163vw", sm: "163vw", md: "75vw", lg: "50vw", xl: "45vw" }}
|
||
bgColor="#4E8C36"
|
||
zIndex={3}
|
||
overflow="hidden"
|
||
justifyItems={'center'}
|
||
>
|
||
<Stack alignItems={'center'} gap={{ base: 4, sm: 4, md: 6, lg: 8, xl: 8 }}>
|
||
<Image
|
||
src='/images/new/info_title.webp'
|
||
w={{ base: '90vw', sm: '90vw', md: '34vw', lg: '22vw', xl: '22vw' }}
|
||
mt={'50px'}
|
||
/>
|
||
|
||
<Flex
|
||
gap={{ base: 2, sm: 2, md: 3, lg: 4, xl: 4 }}
|
||
flexWrap="wrap"
|
||
justifyContent="center"
|
||
px={{ base: 4, sm: 4, md: 0, lg: 0, xl: 0 }}
|
||
>
|
||
{infoData.map((info) => (
|
||
// buttons
|
||
<Box
|
||
key={info.id}
|
||
w={{ base: '42vw', sm: '42vw', md: '18vw', lg: '12vw', xl: '8vw' }}
|
||
h={{ base: '20vw', sm: '20vw', md: '9vw', lg: '6vw', xl: '5vw' }}
|
||
cursor="pointer"
|
||
onClick={() => setSelectedInfo(info.id)}
|
||
bg={selectedInfo === info.id ? '#3D6741' : '#D4D4D4'}
|
||
border="4px solid #99BF35"
|
||
borderRadius={{ base: '20px', sm: '20px', md: '18px', lg: '16px', xl: '14px' }}
|
||
display="flex"
|
||
alignItems="center"
|
||
justifyContent="center"
|
||
textAlign="center"
|
||
className="font-melle font-xbold"
|
||
fontSize={{ base: '4vw', sm: '4vw', md: '1.8vw', lg: '1.2vw', xl: '1vw' }}
|
||
color={selectedInfo === info.id ? '#FFFFFF' : '#333333'}
|
||
whiteSpace="pre-line"
|
||
lineHeight="1.2"
|
||
transition="all 0.3s ease"
|
||
px={2}
|
||
>
|
||
{info.title}
|
||
</Box>
|
||
))}
|
||
</Flex>
|
||
|
||
<Box
|
||
w={{ base: '85vw', sm: '85vw', md: '60vw', lg: '45vw', xl: '40vw' }}
|
||
bg="white"
|
||
borderRadius="20px"
|
||
overflow="hidden"
|
||
mb={{ base: 8, sm: 8, md: 12, lg: 16, xl: 16 }}
|
||
boxShadow="0 4px 20px rgba(0,0,0,0.15)"
|
||
border="3px solid #E5E5E5"
|
||
>
|
||
<Image
|
||
src={infoData.find(info => info.id === selectedInfo)?.image}
|
||
w="100%"
|
||
transition="all 0.3s ease"
|
||
/>
|
||
<Box p={{ base: 5, sm: 5, md: 6, lg: 8, xl: 8 }}>
|
||
<Text
|
||
className="font-melle font-medium"
|
||
fontSize={{ base: '3.5vw', sm: '3.5vw', md: '1.5vw', lg: '1.1vw', xl: '1vw' }}
|
||
color="#333333"
|
||
lineHeight="1.8"
|
||
textAlign="left"
|
||
>
|
||
{infoData.find(info => info.id === selectedInfo)?.description}
|
||
</Text>
|
||
</Box>
|
||
</Box>
|
||
</Stack>
|
||
</Box >
|
||
)
|
||
}
|
||
|
||
export default Info; |