Friend list

[mhenriette]

Objective:

Create the friends list component. The list depicts the friends' list and the user uses it to choose who can see his activity.

Description:

• Create the friends component under the /component/list/Friends.tsx folder
• Add the title Who can see, and use the Typography component created in ticket #3 with the appropriate props to match the Figma design.

• Add the list of friends

  • Each list item should include a checkbox and the friend's name

    • Use the checkbox component created in the ticket #7
    • Use the Typography component created in ticket #3 with the correct props to ensure it follows the Figma design

  • When an item is clicked, update the list data to add isChecked to the corresponding item.

  • Pass the isChecked value as a prop to the Checkbox component so it applies the correct styles, as specified in the Figma design and the #7 ticket.

  • Follow the spacing styles as designed in the Figma

  • Render the component in the editSignal screen

Acceptance Criteria:

• The component is created and located in the folder specified in the description.
• The component displays the title Who can see and the friendsList
• When an item is checked in the friends' list, it should have the same styles and changes as is in the Figma
• The component follows the styles in the Figma
• The component is rendered in the EditSignal screen

Design:

Figma: https://www.figma.com/design/ZcPlin9PqvfVKaeM8VfUov/SocialApp?node-id=304-16366&t=37pBx5Q5Mag7el4U-4

[AnasAlamin]

@mhenriette this should be inside editSignal screen. the settings screen shall be empty for now since we don't have a design for that cc: @darioaschero