-
Notifications
You must be signed in to change notification settings - Fork 123
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: create a reuseable dialog component #181
feat: create a reuseable dialog component #181
Conversation
You have conflicts |
Resolve the conflicts |
app/components/Dialog/Dialog.tsx
Outdated
<header className="flex flex-col gap-2"> | ||
<h2 className="text-lg font-semibold text-primary">{headerText}</h2> | ||
{description && ( | ||
<p className="font-normal text-sm leading-[1.05rem] text-muted-foreground text-pretty"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why are you creating your own dialog? Weren't you told to use ShadCN dialog component?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In the issue requirements, I wasn't asked to use Shadcn-UI.
The Shadcn-UI Dialog component requires a close icon to close the dialog and a trigger button to display it, but these were not mentioned in the requirements and also not in the figma file.
I have attached the figma link for the component in the PR description for your reference.
Should I still go ahead and implement them anyway?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Meet @SirhmVFX on slack to install it. he's @fullstackmechanic on slack
…com/Adelosoye-dev/hng_boilerplate_remix into feat/49-create-dialog-box-component
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Still didn't fix what was requested. Use Shadcn
i have made the changes |
Description
Add a Dialog Box component that includes a header with text and description, and a footer that accepts multiple buttons.
Closes #49
Changes Proposed
Create a Dialog Box component that includes a header with text and description, and a footer that accepts multiple buttons.
Requirements
The Dialog Box component should support the following props:
headerText: string - Required text to be displayed in the header.
description?: string - Optional description to be displayed under the header text.
buttons: React.ReactNode[] - An array of button components to be displayed in the footer.
What were you told to do?
[FEAT] - Component → Dialogbox
Create a Dialog Box component that includes a header with text and description, and a footer that accepts multiple buttons.
What did you do?
The Dialog component is a customizable alert dialog box built using the AlertDialog components from Shadcn and a Button component. It provides a way to display a modal dialog with a title, description, and footer actions.
Component Props
The AlertDialogDemo component accepts the following props:
DialogProperties
headerText
(string): The text to display in the header of the dialog.description
(string, optional): The text to display as the description in the dialog.footer
(React.ReactNode[]): An array of React nodes to be displayed as actions in the footer of the dialog.triggerText
(string): The text to display on the button that triggers the dialog.variants
(Variants): The variant of the button triggering the dialog. Possible values are:"default"
"destructive"
"outline"
"link"
"ghost"
"secondary"
Usage Example
Below is an example of how to use the Dialog component:
https://www.figma.com/design/VEItfX6St5NSAqqNHImcxD/HNG-Boilerplate-Designs?node-id=2225-7657&t=XOIp4pqGzAyZNcxj-4