# Chips

**File Name:** Chips.tsx

**Imports:**
- Chip from Material-UI: [Chip Doc](https://material-ui.com/components/chips/#chip)
- Chip from '@material-ui/core/Chip: [Chip API](https://material-ui.com/api/chip/#chip-api)

**Example:** 
- Under Skills in the User Profile page
- Under Skills in the Create User page
- Under Skills in the Edit User page
- Under Skills in the View Time Slot page

**Description:**
- Pages:
    - User Profile page
    - Create User page
    - Edit User page
    - View Time Slot page
- For users, the skills are displayed as chips and are uneditable.
- For admins, the skills are displayed as editable chip elements.
- Chip elements can only be edited in the Create User and Edit User pages.

**I/O:** 
- As an admin, a skill chip element can be removed by clicking the x icon on it 
- As an admin, a skill chip element can be added by selecting skill or typing in the code for an existing skill.

**User Profile**

<img src="../../images/components/Chips-UserProfile.png" width="700"/>

**Create User**

<img src="../../images/components/Chips-CreateUser.png" width="700"/>