Hello Artur Bień,

Tag Component

This is the Tag Component. I tried to make the UI as similar as the SS you have tagged in the issue.

Tags Container Component - Extra Component

This is made with the purpose of Containing the tags at one place.

How I approached

Tag Size

I tried taking the height of the tag as 28px by enlarging Window95 UI to the height of the screen and then measuring the respective size of the tag.

Tag Content Management

I passed an Array of content to the component, which will be basically about the type of content.

[
 { type: 'text', content: 'Microsoft' },
 {
 type: 'image',
 content: MsnImage,
 alt: 'microsoft'
 }
 ]

Screenshot

• Actual Implementation
  image

• Story Book Implementation
  image

Features

• Users can create Tags in different formats (as in the SS) by the different ordering of the contents passed in the contentArray.
• Users can also give different colors and background colors to the tags by passing them as props.

Note : These are the minimal features that I think (since haven't seen UI in real) should be there. Please guide me what to add more to make the component more interesting.

Bugs

• Don't know why but the original preview and the preview in the Story Books seem to be different despite having the same Styling. It is my first time with the Story Book so I can't exactly figure it out.
• Can't Pass SVGs as React Component in the Image in Story Book implementation. Same is working when done by simple implementation.

Todos:

• Adding .mdx file
• Adding .specs.js file