feat: forum post component

[priyanshisharma]

Fixes #190

Description

Created a forum post component according to the figma design as per the scss module approach i.e. currently in use.

Screenshots

Web View

Mobile View

Addition Information (if any)

The horizontal line doesn't span across the entire width, when the component is used in a wider space.

[salil-naik]

Hi @priyanshisharma. Good job with the component. It's around 70% pixel perfect.

I saw a few errors in the way the markup is structured. Please refer to the image below. It will give you an idea of how things should be divided.

Blue/Orange blocks are the man blocks. Red are the inner divisions.

If you refer to the Figma design, you will see that we have used auto-layout (similar to display flex) in the main blocks. So in the first block, the padding will be 20px, gutter space (space b/w the red blocks) is going to be 17px. The horizontal line can be the border-bottom of the first block.

If you fix your markup, you won't have to use <br /> tags anywhere. It's not a good practice to use <br /> tags for spacing btw.

[salil-naik]

Hi. Please refer to the comment and do the necessary changes. 😄

[priyanshisharma]

Thanks for such a well written review @salil-naik ! I've made the corresponding changes, the component appears as follows now. 😄

[pkspyder007]

@priyanshisharma Could you just add the component to /forum route so it could be viewed in the browser in the buil preview?

[pkspyder007]

@priyanshisharma I think the reason why these icons are not looking good is that they are small resolution images taken from figma design. Replacing them will svg icons would be a better solution so they don't get pixelated.

Both the icons social and action ones.

[priyanshisharma]

@pkspyder007 where can I get the svg files for the action buttons from? 😅

[pkspyder007]

@priyanshisharma check out this site https://feathericons.com/