Make emoji reaction component #49

New Issue

2020-10-27T22:18:59+01:00

Irev-Dev commented

2020-10-27 22:18:59 +01:00

(Migrated from github.com)

The page needs the following component

For this issue you need to:

Make a react component for the above
It should have 2 props 1) emotes: array (more info below) 2) callback that returns an emoji
when the user clicks an existing emoji it should fire the callback, if the click the three dot menu should open a small emoji selector (this will also fire the callback when an emoji from the menu is selected)
materialUI is already included in the project, so use that for the dropdown/popover menu
Style with tailwind css
dots can be found here by search for dots-vertical and should be added to Svg.js

emotes array is:

   emotes: {
      emojii: string,
      count: number,
   }[] // basically an array of objects with an emojii and count properties

and example data would be:

   emotes: [
      {
         emojii: '❤️',
         count: 3,
      },
      {
         emojii: '😁',
         count: 2,
      },
   ]

Design can be found here
Context of where this will go:

The page needs the following component ![image](https://user-images.githubusercontent.com/29681384/97361113-3463b000-18f3-11eb-8c15-968d8c7b65b1.png) ![image](https://user-images.githubusercontent.com/29681384/97362454-2878ed80-18f5-11eb-8457-0ae096d9f9c1.png) For this issue you need to: - Make a react component for the above - It should have 2 props 1) emotes: array (more info below) 2) callback that returns an emoji - when the user clicks an existing emoji it should fire the callback, if the click the three dot menu should open a small emoji selector (this will also fire the callback when an emoji from the menu is selected) - materialUI is already included in the project, so use that for the dropdown/popover menu - Style with tailwind css - dots can be found [here](https://heroicons.com/) by search for `dots-vertical` and should be added to [Svg.js](https://github.com/Irev-Dev/cadhub/blob/main/web/src/components/Svg/Svg.js) emotes array is: ```typescript emotes: { emojii: string, count: number, }[] // basically an array of objects with an emojii and count properties ``` and example data would be: ```javascript emotes: [ { emojii: '❤️', count: 3, }, { emojii: '😁', count: 2, }, ] ``` Design can be [found here](https://www.figma.com/file/VUh53RdncjZ7NuFYj0RGB9/CadHub?node-id=159%3A0) Context of where this will go: ![image](https://user-images.githubusercontent.com/29681384/97360221-ffa32900-18f1-11eb-8431-0060494b710e.png)

mvarrieur commented

2020-10-28 01:00:45 +01:00

(Migrated from github.com)

Can I take this one?

👍 1 😕 2

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: h3n3/cadhub#49