![Screenshot 2024-08-19 at 13 23 57](https://private-user-images.githubusercontent.com/939866/359084393-7d3809fb-2076-4e5b-8ec7-e4cda5a2c78c.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ4MDE0OTEsIm5iZiI6MTcyNDgwMTE5MSwicGF0aCI6Ii85Mzk4NjYvMzU5MDg0MzkzLTdkMzgwOWZiLTIwNzYtNGU1Yi04ZWM3LWU0Y2RhNWEyYzc4Yy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODI3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyN1QyMzI2MzFaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0zNzAxNWFhYTZhNjYyNTIzNWZkZmIzYWY5NGViYjFlYTgwNzNkMjY2NmM1ZGVhNjk1NDIwNTVjOWUzYjIzMjNiJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.RyfMSqUv7IA-i3I9SAV9Ya23PUfTXtE_GMhAsh6o2qo)
Link to the Figma design file https://www.figma.com/design/xNFC23o2ez10gmGq2ZOLNN/Kevin-Lambert-Front-End-Developer-Task?node-id=0-1&t=bCzB4gl64RbDx1hi-1
Note: The hover background color has been lightened and the grey text darkened as it did not pass AA accessibility guidlines for small text
Below are a list of additional design elements that could be considered for the component
- Error states
- Success states
- Set up design tokens for colors, fonts, spacing increments
- Create reusable full select Figma component
This project was bootstrapped with Create React App.
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
ui-components
holds generic components that are context agnosticconnected-components
holds specific use case components that are connected to data
Component
- Search username as well
- Add unit and snapshot tests
- Pass value to select to set default value
- aria tags for accessiblity
- CSS colors, fonts and spacings to reference design tokens variables
- Add select dropdown arrow
- Keyboard navigation
- Spinner when data is loading
API
- Add caching
- Get user url from a config
- For larger datasets add search and paging to the api