button updated
This commit is contained in:
@@ -56,13 +56,12 @@ function Info() {
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<Flex
|
<Flex
|
||||||
gap={{ base: 2, sm: 2, md: 3, lg: 4, xl: 4 }}
|
gap={{ base: 2, sm: 2, md: 3, lg: 4, xl: 2 }}
|
||||||
flexWrap="wrap"
|
flexWrap="wrap"
|
||||||
justifyContent="center"
|
justifyContent="center"
|
||||||
px={{ base: 4, sm: 4, md: 0, lg: 0, xl: 0 }}
|
px={{ base: 4, sm: 4, md: 0, lg: 0, xl: 0 }}
|
||||||
>
|
>
|
||||||
{infoData.map((info) => (
|
{infoData.map((info) => (
|
||||||
// buttons
|
|
||||||
<Box
|
<Box
|
||||||
key={info.id}
|
key={info.id}
|
||||||
w={{ base: '42vw', sm: '42vw', md: '18vw', lg: '12vw', xl: '8vw' }}
|
w={{ base: '42vw', sm: '42vw', md: '18vw', lg: '12vw', xl: '8vw' }}
|
||||||
@@ -70,7 +69,7 @@ function Info() {
|
|||||||
cursor="pointer"
|
cursor="pointer"
|
||||||
onClick={() => setSelectedInfo(info.id)}
|
onClick={() => setSelectedInfo(info.id)}
|
||||||
bg={selectedInfo === info.id ? '#3D6741' : '#D4D4D4'}
|
bg={selectedInfo === info.id ? '#3D6741' : '#D4D4D4'}
|
||||||
border="4px solid #99BF35"
|
border={selectedInfo === info.id ? "4px solid #99BF35" : "none"}
|
||||||
borderRadius={{ base: '20px', sm: '20px', md: '18px', lg: '16px', xl: '14px' }}
|
borderRadius={{ base: '20px', sm: '20px', md: '18px', lg: '16px', xl: '14px' }}
|
||||||
display="flex"
|
display="flex"
|
||||||
alignItems="center"
|
alignItems="center"
|
||||||
@@ -83,6 +82,7 @@ function Info() {
|
|||||||
lineHeight="1.2"
|
lineHeight="1.2"
|
||||||
transition="all 0.3s ease"
|
transition="all 0.3s ease"
|
||||||
px={2}
|
px={2}
|
||||||
|
boxShadow="inset 9px 3px 9px rgba(0,0,0,0.3), inset -3px 3px 6px rgba(0,0,0,0.3), inset 3px -3px 6px rgba(0,0,0,0.3), 4px 4px 10px rgba(0,0,0,0.45)"
|
||||||
>
|
>
|
||||||
{info.title}
|
{info.title}
|
||||||
</Box>
|
</Box>
|
||||||
|
|||||||
Reference in New Issue
Block a user