add input field to profile section list

src/screens/profile-section/ProfileSectionScreen.js

@@ -3,9 +3,10 @@ import Layout from "../../components/Layout";
 import {useParams} from "react-router-dom";
 import readJson from "../../utilities/readJson";
 import ProfileSectionContext from "./components/ProfileSectionContext";
+import ProfileSectionList from "./components/ProfileSectionList";
 
 const ProfileSectionScreen = () => {
-    const { id } = useParams();
+    const {id} = useParams();
     const [profileSectionData, setProfileSectionData] = useState();
 
 
@@ -31,7 +32,10 @@ const ProfileSectionScreen = () => {
     return (
         <Layout>
             {profileSectionData ? (
-                    <ProfileSectionContext title={profileSectionData.title} infoBox={id==='about-you'}/>)
+                <>
+                    <ProfileSectionContext title={profileSectionData.title} infoBox={id === 'about-you'}/>
+                    <ProfileSectionList profileSectionData={profileSectionData}/>
+                </>)
                 :
                 null
             }

src/screens/profile-section/components/ProfileSectionContext.js

@@ -8,8 +8,8 @@ import HStack from "../../../components/HStack";
 const ProfileSectionContext = ({title, infoBox}) => {
 
     return (
-        <VStack>
-            <VStack gap={1} alignItems={'flex-start'}>
+        <VStack sx={{width: '100%'}}>
+            <VStack gap={1}>
                 <HStack>
                     <Typography variant="h4" gutterBottom sx={styles.titleText}>
                         {title}

src/screens/profile-section/components/ProfileSectionList.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import {Card, CardContent, TextField, Typography} from '@mui/material';
+import VStack from "../../../components/VStack";
+import HStack from "../../../components/HStack";
+import {yellow} from "@mui/material/colors";
+
+const ProfileSectionList = ({profileSectionData}) => {
+
+    return (
+        <VStack sx={{width: '100%'}}>
+            <VStack gap={1}>
+                {
+                    profileSectionData.fields.map((section) => {
+                        return (
+                            <VStack gap={1}>
+                            <HStack>
+                                <Card sx={styles.infoCard} data-testid="card">
+                                    <CardContent sx={styles.infoCardContent} data-testid="card-content">
+                                        <Typography variant="body1" gutterBottom sx={styles.titleText}>
+                                            {section.title}
+                                        </Typography>
+                                    </CardContent>
+                                </Card>
+                            </HStack>
+                                <TextField
+                                    label="Username"
+                                    variant="outlined"
+                                    fullWidth
+                                />
+                            </VStack>
+                        )
+                    })
+                }
+            </VStack>
+        </VStack>
+    );
+};
+
+const styles = {
+    titleText: {
+        fontWeight: 'bold',
+        margin: '0px'
+    },
+    infoCard: {
+        width: '100%',
+        borderRadius: '15px',
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: yellow[200],
+        boxShadow: 'none',
+    },
+    infoCardContent: {
+        padding: '16px',
+        "&:last-child": {
+            paddingBottom: '16px',
+        }
+    },
+};
+
+export default ProfileSectionList;