alexrobaina/frontend_petsLove

Create ContactCard Component

alexrobaina opened this issue · 9 comments

alexrobaina commented

As part of our ongoing efforts to modularize the UI components, there is a requirement to create a new component named ContactCard. This component will be responsible for displaying user contact information such as Name, Role, and Avatar.

Suggested Implementation

<div class="flex w-full items-center justify-between space-x-6 p-6">
  <div class="flex-1 truncate">
    <div class="flex items-center space-x-3">
      <h3 class="truncate text-sm font-medium text-gray-900">Jane Cooper</h3>
      <span class="inline-flex flex-shrink-0 items-center rounded-full bg-green-50 px-1.5 py-0.5 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">Admin</span>
    </div>
    <p class="mt-1 truncate text-sm text-gray-500">Regional Paradigm Technician</p>
  </div>
  <img class="h-10 w-10 flex-shrink-0 rounded-full bg-gray-300" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60" alt="">
</div>
Screen Shot 2023-09-21 at 22 13 01

###Acceptance Criteria
[] Create a new functional component named ContactCard
[] The component should have props for Name, Role, Avatar URL, and a Status (Admin/Regular User).
[] The component should match the visual style of the suggested implementation provided above.
[] Unit tests should be written to ensure the component behaves as expected.
[] Update documentation with the new component usage.

Additional Context

The proposed implementation is a mere suggestion and open for discussion. Please feel free to comment on the code and suggest improvements if needed. The goal is to have a component that is reusable, modular, and accessible.

How to Test

Once the component is developed, it should be tested using different sets of prop values to ensure it works as expected and does not break the existing UI.

Shubhcoder commented

Hi, there. Can I take this up as my initial contribution to this project?

alexrobaina commented

Hi, @Shubhcoder. Yes, of course.

I have a question. Do you select this issue for the hacktoberfest?

Shubhcoder commented

Hi, @alexrobaina. Yes (but I will continue working on other stuffs inside the project).

  • ❤️1
alexrobaina commented

Okay perfect. I ask you because I will merge this issue when start the hacktoberfest. If a make merge now it will not be valid.

Happy code.

  • 👍1
Shubhcoder commented

Okay, got it.

Thank you very much. 😃

Shubhcoder commented

Hi, @alexrobaina

Do you want all the props to be mandatory?

As, I think alt-text is something we can have a default alt value, if not provided. Also, we can render the "IconUser" svg if in case image source is not there.

Looking forward to your comments on this.

alexrobaina commented

Hi @Shubhcoder. 🤔
I think is a good idea to render "IconUser" if don't have an image
I mean:
Interface Props { image?: string role?: string name: string status?: string }

What do you think?

Shubhcoder commented

Hi @Shubhcoder. 🤔 I think is a good idea to render "IconUser" if don't have an image I mean: Interface Props { image?: string role?: string name: string status?: string }

What do you think?

Hey,

  • status I think we can have it either "Admin" or "Regular User" i.e., {status: 'Admin' | 'Regular User'}. Unless there are other options that exists.
  • role we can keep it mandatory. As, I believe it is something we must have to identify whom to reach out if anything arises.
  • And for image I was using key avatar_url, so shall I change it to image?

Looking forward to your view.

alexrobaina commented

I would use image; this component could be used not only for users.
And "role" can be changed to "description" (A more general name) and status it's okay

Thanks 😄

  • 👍1