/Realhub-React-Feature

Implementation of a generic comment notification feature for Realhub

Primary LanguageJavaScript

Realhub React Project

Task Description

Using React.js and ES6 build the ArtworkComments component. Please review the screenshot and .mov file to see how the component should look and function.

Requirements

  • Component is built using React.js
  • Component uses ES6 syntax and features
  • Component is built as a Functional Component
  • Uses React Hooks
  • Comments are ordered in reverse chronological order (newest comments first).
  • Ability to mark comments as "seen" / acknowledged
  • If there are unseen comments the button is blue
  • Once all comments are marked as "seen" / acknowledged the button returns to its default state
  • Deployed online

Bonus

  • A unseen comment count bubble/icon
  • Simple and elegant animation

Colours

  • Blue - #02b7e2
  • Dark Grey - #404041
  • Light Grey - #8c8c8e
  • Line Colour - #d8d9d9