Skip to content

Implement Ant Design Components for Figma Design #36

@bryanwong8

Description

@bryanwong8

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Figma Design

  • User Component

Screen Shot 2020-05-17 at 7 19 51 PM

  • User List

Screen Shot 2020-05-17 at 7 31 54 PM

  • ArticleCard

Screen Shot 2020-05-17 at 9 47 11 PM

  • Header

Screen Shot 2020-05-17 at 9 53 35 PM

Screen Shot 2020-05-17 at 9 53 42 PM

  • Followers

Screen Shot 2020-05-17 at 9 59 52 PM

Screen Shot 2020-05-17 at 9 59 44 PM

Screen Shot 2020-05-17 at 10 00 47 PM

Screen Shot 2020-05-17 at 10 00 39 PM

  • Settings

Screen Shot 2020-05-17 at 10 04 07 PM

Screen Shot 2020-05-17 at 10 04 29 PM

Screen Shot 2020-05-17 at 10 04 33 PM

Component Details

  • Create a file called User.js in src/components/global and create the User component. Use the List.Item and List.Item.Meta object from ant design to implement it, https://codesandbox.io/s/5d8fk.
  • Create a file called UserList.js in src/components/global and create the User List component. Use the List object from ant design https://codesandbox.io/s/5d8fk.
  • We need to create an ArticleCard component to display information for a particular Article. The component be able to adjust to the all the Figma designs. Should take Use the Card component from ant design, https://ant.design/components/card/
  • Implement the Header component to display data about Users or Organizations
  • Implement Followers component with the List component from Ant Design, https://ant.design/components/list/
  • Implement Setting components to adjust for User, Organization, and Tag settings. I would recommend looking at some of Ant design's components to see if you can use them. If not create your own.

Metadata

Metadata

Assignees

Labels

frontendfrontend feature

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions