Skip to content

Commit

Permalink
Merge branch 'feat/HNG-82-develop-waitlist-form-to-add-user' of https…
Browse files Browse the repository at this point in the history
…://github.com/toonami2907/hng_boilerplate_remix into feat/HNG-82-develop-waitlist-form-to-add-user
  • Loading branch information
toonami2907 committed Jul 21, 2024
2 parents 1bd5fb2 + 46d325e commit 2f0ce40
Show file tree
Hide file tree
Showing 55 changed files with 1,888 additions and 69 deletions.
5 changes: 4 additions & 1 deletion .vscode/settings.json
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"
},
}
4 changes: 2 additions & 2 deletions app/components/WaitListForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Form, useActionData } from "@remix-run/react";
import { CheckCircle2, Mail, ThumbsUp } from "lucide-react";
import React, { useEffect, useState } from "react";

import { Input } from "./ui/input"; // Adjust the import path accordingly
import { Input } from "./ui/input";

Check failure on line 6 in app/components/WaitListForm.tsx

View workflow job for this annotation

GitHub Actions / eslint

Delete `·`

interface ActionData {
error?: string;
Expand Down Expand Up @@ -48,7 +48,7 @@ const WaitlistForm: React.FC = () => {
if (!name) {
setError("Your Name is required to proceed");
} else if (validateEmail(email)) {

Check failure on line 50 in app/components/WaitListForm.tsx

View workflow job for this annotation

GitHub Actions / eslint

Delete `⏎······`
// If form is valid, allow form submission

return true;
} else {
setError("Please input a valid email address");
Expand Down
40 changes: 40 additions & 0 deletions app/components/accordionComponent.tsx
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>
);
}
117 changes: 117 additions & 0 deletions app/components/customButton/customButton.tsx
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;
Loading

0 comments on commit 2f0ce40

Please sign in to comment.