Friends component in Settings page improved

frontend/src/pages/Settings/Friends.jsx

@@ -1,9 +1,34 @@
+import { Button, Card, Flex, List, Stack, TextInput, Title } from '@mantine/core'
+import { IconSearch } from '@tabler/icons-react'
 import React from 'react'
 
 const Friends = () => {
-  return (
-    <div>Friends</div>
-  )
+    return (
+        <Card sx={{ backgroundColor: '#272623', textAlign: 'left' }} p='30px'>
+            <Title>Friends</Title>
+            <Flex direction='row' gap='lg' my='20px'>
+                <TextInput w='300px' sx={{ backgroundColor: '#272623' }} placeholder='Search username' icon={<IconSearch />} />
+                <Button color='gray'>Add friend</Button>
+            </Flex>
+            <Stack>
+                {
+                    friends.map(({ username }) => {
+                        return (
+                            <Flex ff='monospace'>
+                                {username}
+                            </Flex>
+                        )
+                    })
+                }
+            </Stack>
+        </Card>
+    )
 }
 
+const friends = [
+    { username: 'moonpatel' },
+    { username: 'user2' },
+    { username: 'user3' }
+]
+
 export default Friends

frontend/src/pages/Settings/Settings.jsx

@@ -1,4 +1,4 @@
-import { Flex, NavLink, Stack, Text, ThemeIcon, Title } from '@mantine/core'
+import { Box, Flex, NavLink, Stack, Text, ThemeIcon, Title } from '@mantine/core'
 import { ColorWheelIcon, GearIcon, GlobeIcon, LockOpen1Icon, LockOpen2Icon, PersonIcon } from '@radix-ui/react-icons'
 import React, { useState } from 'react'
 import { Link, Outlet } from 'react-router-dom';
@@ -6,7 +6,7 @@ import { Link, Outlet } from 'react-router-dom';
 const Settings = () => {
     const [active, setActive] = useState(null);
     return (
-        <>
+        <Box ml='45px'>
             <Flex align="center" my="lg">
                 <GearIcon style={{ scale: '1.8' }} width="45px" />
                 <Title order={1} sx={{ flexDirection: 'row' }} >
@@ -17,9 +17,11 @@ const Settings = () => {
                 <Flex w="300px" gap="3px" align="center" justify="start" direction="column">
                     {linksList.map((link, index) => <NavLink w="100%" p="10px" key={index} component={Link} sx={{ backgroundColor: '#262523' }} label={link.label} icon={link.icon} to={link.to} />)}
                 </Flex>
-                <Outlet />
+                <div style={{ width: '720px' }}>
+                    <Outlet />
+                </div>
             </Flex>
-        </>
+        </Box>
     )
 }