Create an interface for a media player.
In this exercise you will create a media player using React and TypeScript.
Before you start, you must run a npm install in this folder in order to install all the dependencies. Then you do a npm run dev in order to start the application. NO "Live Server" usage here as Vite will fire up a development server for you.
The point of this exercise is to create this media player with as many valid components as possible, just to get comfortable working with a React mindset. Look at the images that are available in the assets folder and derive from there what components you will need.
Use flexbox or grid for layout and material icons for icons. Colors, fonts and backgrounds are something that you are free to choose on your own. It doesn't even have to display music, it could be movies as well. The images are just suggestions. Use them as a base for your UI.
Remember, this is not a application to play actual media files. It's just a presentation application that displays images and icons and so on.
- At least one array with objects should be rendered with the
.map()method. - Usage of TypeScript is mandatory.
- At least eight different pieces of media content must be visible.
- Make the application responsive.
This is the link to Google fonts: Google Fonts.
This is the link to Material icons: Material Icons
Material Icons are applied to your application by adding this link to your <head> element:
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />Then it's used like this inside your components:
<span className="material-symbols-outlined"> play_arrow </span>The "play-arrow" can of course be change to any other text belonging to an icon.
