-
Notifications
You must be signed in to change notification settings - Fork 125
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'feat/HNG-82-develop-waitlist-form-to-add-user' of https…
…://github.com/toonami2907/hng_boilerplate_remix into feat/HNG-82-develop-waitlist-form-to-add-user
- Loading branch information
Showing
55 changed files
with
1,888 additions
and
69 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,9 +1,12 @@ | ||
{ | ||
"[javascript][javascriptreact][typescript][typescriptreact]": { | ||
"editor.formatOnSave": false, | ||
"editor.formatOnSave": true, | ||
"editor.defaultFormatter": "vscode.typescript-language-features" | ||
}, | ||
"editor.codeActionsOnSave": { | ||
"source.fixAll.eslint": "always" | ||
}, | ||
"[typescriptreact]": { | ||
"editor.defaultFormatter": "esbenp.prettier-vscode" | ||
}, | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
import { | ||
Accordion, | ||
AccordionContent, | ||
AccordionItem, | ||
AccordionTrigger, | ||
} from "~/components/ui/accordion"; | ||
|
||
import "~/styles/global.css"; | ||
|
||
export function AccordionComponent() { | ||
return ( | ||
<Accordion | ||
type="single" | ||
collapsible | ||
className="w-full max-w-[588px] rounded-xl bg-primary/5 p-4" | ||
> | ||
<AccordionItem value="item-1"> | ||
<AccordionTrigger>What payment method do you accept?</AccordionTrigger> | ||
<AccordionContent> | ||
We accept payment using Visa, Mastercard and American Express. | ||
</AccordionContent> | ||
</AccordionItem> | ||
<AccordionItem value="item-2"> | ||
<AccordionTrigger> | ||
Is there a discount for annual subscriptions? | ||
</AccordionTrigger> | ||
<AccordionContent> | ||
Yes. There is a 20% discount for annual subscriptions. | ||
</AccordionContent> | ||
</AccordionItem> | ||
<AccordionItem value="item-3"> | ||
<AccordionTrigger>Do you offer a free trial?</AccordionTrigger> | ||
<AccordionContent> | ||
Yes, we offer a 14-day free trial for new users. You can explore all | ||
the features of our premium plan without any cost during this period. | ||
</AccordionContent> | ||
</AccordionItem> | ||
</Accordion> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,117 @@ | ||
import { Link } from "@remix-run/react"; | ||
import { LoaderCircle } from "lucide-react"; | ||
import React from "react"; | ||
|
||
type Variant = | ||
| "default" | ||
| "primary" | ||
| "destructive" | ||
| "subtle" | ||
| "loading" | ||
| "outline" | ||
| "secondary" | ||
| "ghost" | ||
| "link"; | ||
|
||
type Size = "default" | "sm" | "lg" | "link" | "icon" | "circle"; | ||
|
||
interface ButtonProperties { | ||
leftIcon?: React.ReactElement; | ||
rightIcon?: React.ReactElement; | ||
isLoading?: boolean; | ||
href?: string; | ||
variant?: Variant; | ||
size?: Size; | ||
icon?: React.ReactNode; | ||
children?: React.ReactNode; | ||
isIconOnly?: boolean; | ||
isLeftIconVisible?: boolean; | ||
isRightIconVisible?: boolean; | ||
isDisabled?: boolean; | ||
ariaLabel?: string; | ||
onClick?: () => void; | ||
className?: string; | ||
} | ||
|
||
const Button: React.FC<ButtonProperties> = ({ | ||
leftIcon, | ||
rightIcon, | ||
isLoading, | ||
href, | ||
variant = "default", | ||
size = "default", | ||
icon, | ||
children, | ||
isLeftIconVisible = true, | ||
isRightIconVisible = true, | ||
isDisabled, | ||
ariaLabel, | ||
onClick, | ||
className = "", | ||
}) => { | ||
const baseClasses = | ||
"inline-flex items-center justify-center px-[16px] py-[8px] gap-[8px] text-[14px] font-medium rounded-md"; | ||
const variantClasses = { | ||
default: "bg-primary text-primary-foreground hover:bg-primary/90", | ||
primary: "bg-primary text-[#FFFFFF] hover:bg-[#F97316]", | ||
destructive: | ||
"bg-destructive text-destructive-foreground hover:bg-destructive/90", | ||
subtle: "bg-[#F1F5F9] hover:bg-[#E2E8F0]", | ||
loading: "bg-[#0F172A] text-[#FFFFFF]", | ||
outline: | ||
"border border-input bg-background hover:bg-accent hover:text-accent-foreground", | ||
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", | ||
ghost: "hover:bg-accent hover:text-accent-foreground", | ||
link: "text-primary underline-offset-4 hover:underline", | ||
}; | ||
const sizeClasses = { | ||
default: "h-10 px-4 py-2", | ||
sm: "h-9 rounded-md px-3", | ||
lg: "h-11 rounded-md px-8", | ||
link: "h-auto px-0", | ||
icon: "h-10 w-10 !px-0", | ||
circle: "h-[40px] w-[40px] !rounded-full !px-0", | ||
}; | ||
const loadingClasses = "opacity-75 cursor-not-allowed"; | ||
const buttonClasses = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className} ${isLoading ? loadingClasses : ""}`; | ||
|
||
const content = ( | ||
<> | ||
{isLoading && <LoaderCircle />} | ||
{isLeftIconVisible && leftIcon && !isLoading && ( | ||
<span className="">{leftIcon}</span> | ||
)} | ||
{children || icon} | ||
{isRightIconVisible && rightIcon && ( | ||
<span className="text-primary">{rightIcon}</span> | ||
)} | ||
</> | ||
); | ||
|
||
if (href) { | ||
return ( | ||
<Link | ||
to={href} | ||
className={buttonClasses} | ||
aria-busy={isLoading} | ||
aria-label={ariaLabel} | ||
> | ||
{content} | ||
</Link> | ||
); | ||
} | ||
|
||
return ( | ||
<button | ||
className={buttonClasses} | ||
onClick={onClick} | ||
disabled={isLoading || isDisabled} | ||
aria-busy={isLoading} | ||
aria-label={ariaLabel} | ||
> | ||
{content} | ||
</button> | ||
); | ||
}; | ||
|
||
export default Button; |
Oops, something went wrong.