make profile section button conditional

Citizen-Knowledge-Graph · Jun 6, 2024 · e988b28 · e988b28
1 parent 6c187c8
commit e988b28
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git a/src/screens/onboarding-sections/components/OnboardingSectionsItem.js b/src/screens/onboarding-sections/components/OnboardingSectionsItem.js
@@ -9,7 +9,7 @@ import ButtonBase from "@mui/material/ButtonBase";
 import {yellow} from '@mui/material/colors';
 
 
-const onboardingSectionsItem = ({section, active}) => {
+const onboardingSectionsItem = ({section, active, first}) => {
     const backgroundColor = active ? yellow[500] : 'rgba(0, 0, 0, 0.1)'
 
     return (
@@ -23,9 +23,16 @@ const onboardingSectionsItem = ({section, active}) => {
                     </Card>
                     <Typography sx={styles.sectionTitle}>{section.title}</Typography>
                 </HStack>
-                <ButtonBase component={Link} to="/onboarding">
-                    <ArrowForwardIosOutlinedIcon/>
-                </ButtonBase>
+                {
+                    active ? (
+                        <ButtonBase component={Link} to="/onboarding">
+                            <HStack alignItems={'center'}>
+                                {first ? <Typography>Start</Typography> : null}
+                                <ArrowForwardIosOutlinedIcon/>
+                            </HStack>
+                        </ButtonBase>
+                    ) : null
+                }
             </HStack>
         </VStack>
     );

diff --git a/src/screens/onboarding-sections/components/OnboardingSectionsList.js b/src/screens/onboarding-sections/components/OnboardingSectionsList.js
@@ -16,9 +16,10 @@ const OnboardingSectionsList = ({onboardingSectionsData}) => {
                     Profilbereiche
                 </Typography>
             </VStack>
-            {onboardingSectionsData.personalisedData.map((section) => (
-                <OnboardingSectionsItem key={section.id} section={section} active={section.id === activeSection}/>
-            ))}
+            {onboardingSectionsData.personalisedData.map((section, index) => (
+                <OnboardingSectionsItem key={section.id} section={section} active={section.id === activeSection}
+                                        first={index === 0}/>
+                ))}
         </VStack>
     );
 }