[FEAT] External Dynamic Pages >Career Page > create the career card component

[kleenpulse]

Description

Develop a reusable career card component to display individual job listings on the Career Page. This component should present key job information in a clear, attractive, and consistent format.

Acceptance Criteria

• The career card component accurately summarizes all required job information.
• The design is responsive and maintains visual consistency across different screen sizes.
• The component includes interactive elements that function correctly.

Requirements

The career card should include the following elements:

• Company location
• Tags for job type (e.g., "Remote") and department
• Brief job description or responsibilities
• Salary range
• "View details" button

Tests

• Verify that the component renders correctly with all required information.
• Test the responsiveness of the card across various device sizes.
• Ensure the "View details" button functions as expected.
• Check that long text (e.g., job titles or descriptions) is handled appropriately.

Tasks

• Design the career card component based on the provided example and requirements.
• Implement the component structure using semantic HTML.
• Create props or data structure to populate the card with dynamic content.
• Add hover and focus states for interactive elements.
• Implement loading states or skeletons for when data is being fetched.

LINKS

FIGMA LINK.

IMAGES

[EniolaCodes]

I would like this issue to be assigned to me.

[kleenpulse]

whomever is working on this should make sure to use shadcn and tailwind, DO NOT USE ANY OTHER UI LIB @YeeshaDev @EniolaCodes

[EniolaCodes]

Can two of us work on the same issue? @kleenpulse

[YeeshaDev]

Noted

On Thu, 18 Jul 2024 at 15:49, Vxrcel @.***> wrote:

whomever is working on this should make sure to use shadcn and tailwind, DO NOT USE ANY OTHER UI LIB @YeeshaDev https://github.com/YeeshaDev @EniolaCodes https://github.com/EniolaCodes

— Reply to this email directly, view it on GitHub https://github.com/hngprojects/hng_boilerplate_nextjs/issues/88#issuecomment-2236774691, or unsubscribe https://github.com/notifications/unsubscribe-auth/AYGGLGUP2DXWYLTZXW3A47TZM7IZHAVCNFSM6AAAAABLA43KNCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMZWG43TINRZGE . You are receiving this because you were mentioned.Message ID: @.***>

[kleenpulse]

This can be handled by one dev

[YeeshaDev]

I don’t think so but I already assigned this to myself

On Thu, 18 Jul 2024 at 15:51, EniolaCodes @.***> wrote:

Can two of us work on the same issue? @kleenpulse https://github.com/kleenpulse

— Reply to this email directly, view it on GitHub https://github.com/hngprojects/hng_boilerplate_nextjs/issues/88#issuecomment-2236777059, or unsubscribe https://github.com/notifications/unsubscribe-auth/AYGGLGXKSECW7DGXS7P7LZTZM7I5PAVCNFSM6AAAAABLA43KNCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMZWG43TOMBVHE . You are receiving this because you were mentioned.Message ID: @.***>

[EniolaCodes]

I commented on it first, it should be given to me.

[YeeshaDev]

Sorry but We were told to assign not comment

[kleenpulse]

@YeeshaDev Note: other devs need this component for their task, this should be done by 9pm, or I'll assign it to someone else

[YeeshaDev]

Please give me till 10pm please I will start it as soon as I get home. Thanks🙏

On Thu, 18 Jul 2024 at 15:52, Aisha Agunbiade @.***> wrote:

I don’t think so but I already assigned this to myself

On Thu, 18 Jul 2024 at 15:51, EniolaCodes @.***> wrote:

Can two of us work on the same issue? @kleenpulse https://github.com/kleenpulse

— Reply to this email directly, view it on GitHub https://github.com/hngprojects/hng_boilerplate_nextjs/issues/88#issuecomment-2236777059, or unsubscribe https://github.com/notifications/unsubscribe-auth/AYGGLGXKSECW7DGXS7P7LZTZM7I5PAVCNFSM6AAAAABLA43KNCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMZWG43TOMBVHE . You are receiving this because you were mentioned.Message ID: @.***>

[YeeshaDev]

@kleenpulse please i cannot find the figma design on the link you added in the comment. i checked the external dynamic page folder on figma

[kleenpulse]

@YeeshaDev fixed