From db402505f8ab1e15c58a1a62d382f671127d78dc Mon Sep 17 00:00:00 2001 From: lilbobb Date: Mon, 22 Jul 2024 17:30:46 +0100 Subject: [PATCH 1/9] feat: add alert, form button from shadcn and create new template with html page --- app/components/ui/alert.tsx | 58 ++++++++++++ app/components/ui/form.tsx | 180 ++++++++++++++++++++++++++++++++++++ 2 files changed, 238 insertions(+) create mode 100644 app/components/ui/alert.tsx create mode 100644 app/components/ui/form.tsx diff --git a/app/components/ui/alert.tsx b/app/components/ui/alert.tsx new file mode 100644 index 00000000..c7e6269d --- /dev/null +++ b/app/components/ui/alert.tsx @@ -0,0 +1,58 @@ +import { cn } from "app/lib/utils/cn"; +import { cva, type VariantProps } from "class-variance-authority"; +import * as React from "react"; + +const alertVariants = cva( + "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", + { + variants: { + variant: { + default: "bg-background text-foreground", + destructive: + "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", + }, + }, + defaultVariants: { + variant: "default", + }, + }, +); + +const Alert = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes & VariantProps +>(({ className, variant, ...properties }, reference) => ( +
+)); +Alert.displayName = "Alert"; + +const AlertTitle = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...properties }, reference) => ( +
+)); +AlertTitle.displayName = "AlertTitle"; + +const AlertDescription = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...properties }, reference) => ( +
+)); +AlertDescription.displayName = "AlertDescription"; + +export { Alert, AlertTitle, AlertDescription }; diff --git a/app/components/ui/form.tsx b/app/components/ui/form.tsx new file mode 100644 index 00000000..86972146 --- /dev/null +++ b/app/components/ui/form.tsx @@ -0,0 +1,180 @@ +"use client"; + +import * as LabelPrimitive from "@radix-ui/react-label"; +import { Slot } from "@radix-ui/react-slot"; +import { Label } from "app/components/ui/label"; +import { cn } from "app/lib/utils/cn"; +import * as React from "react"; +import { + Controller, + ControllerProps, + FieldPath, + FieldValues, + FormProvider, + useFormContext, +} from "react-hook-form"; + +const Form = FormProvider; + +type FormFieldContextValue< + TFieldValues extends FieldValues = FieldValues, + TName extends FieldPath = FieldPath, +> = { + name: TName; +}; + +const FormFieldContext = React.createContext( + {} as FormFieldContextValue, +); + +const FormField = < + TFieldValues extends FieldValues = FieldValues, + TName extends FieldPath = FieldPath, +>({ + ...properties +}: ControllerProps) => { + return ( + + + + ); +}; + +const useFormField = () => { + const fieldContext = React.useContext(FormFieldContext); + const itemContext = React.useContext(FormItemContext); + const { getFieldState, formState } = useFormContext(); + + const fieldState = getFieldState(fieldContext.name, formState); + + if (!fieldContext) { + throw new Error("useFormField should be used within "); + } + + const { id } = itemContext; + + return { + id, + name: fieldContext.name, + formItemId: `${id}-form-item`, + formDescriptionId: `${id}-form-item-description`, + formMessageId: `${id}-form-item-message`, + ...fieldState, + }; +}; + +type FormItemContextValue = { + id: string; +}; + +const FormItemContext = React.createContext( + {} as FormItemContextValue, +); + +const FormItem = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...properties }, reference) => { + const id = React.useId(); + + return ( + +
+ + ); +}); +FormItem.displayName = "FormItem"; + +const FormLabel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...properties }, reference) => { + const { error, formItemId } = useFormField(); + + return ( +
@@ -70,7 +72,9 @@ const PaymentForm = (properties: PaymentFormProperties) => { value={"Paypal"} className="h-5 w-5 border accent-primary checked:bg-white" /> - +
@@ -158,6 +162,13 @@ const PaymentForm = (properties: PaymentFormProperties) => {
+ + Your subscription will renew automatically every month as one payment + of $800.
+ Cancel it anytime from your subscription settings. By clicking + "Confirm and Pay", you agree to the + Terms and Conditions +
); diff --git a/app/routes/pricing.payment.tsx b/app/routes/pricing.payment.tsx index 63ae5dd8..cbb7630b 100644 --- a/app/routes/pricing.payment.tsx +++ b/app/routes/pricing.payment.tsx @@ -2,15 +2,14 @@ import { useState } from "react"; import DetailsForm from "~/components/DetailsForm"; import PaymentForm from "~/components/PaymentForm"; -import PricingPaymentBreadCrumb from "~/components/PricingPaymentBreadCrumb"; const Payment = () => { const [showSecondForm, setShowSecondForm] = useState(false); return (
-
- +
+
@@ -32,7 +31,7 @@ const Payment = () => {

Payment Method

{showSecondForm ? ( -
+
) : ( @@ -43,6 +42,9 @@ const Payment = () => {
+
+
+
); }; From d14e020ca34048771e602121a27ac064dad5cd0a Mon Sep 17 00:00:00 2001 From: OWK50GA Date: Mon, 22 Jul 2024 12:22:23 +0100 Subject: [PATCH 3/9] changes made --- app/routes/pricing.payment.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/app/routes/pricing.payment.tsx b/app/routes/pricing.payment.tsx index cbb7630b..e1cf8a3f 100644 --- a/app/routes/pricing.payment.tsx +++ b/app/routes/pricing.payment.tsx @@ -8,9 +8,6 @@ const Payment = () => { return (
-
-
-
@@ -42,9 +39,6 @@ const Payment = () => {
-
-
-
); }; From 7a8a5e539c6b31f63974a9fa0d9908b08d075b60 Mon Sep 17 00:00:00 2001 From: OWK50GA Date: Mon, 22 Jul 2024 15:16:52 +0100 Subject: [PATCH 4/9] breadcrubms --- app/components/PaymentForm.tsx | 2 +- app/routes/pricing.payment.tsx | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/app/components/PaymentForm.tsx b/app/components/PaymentForm.tsx index 419c1d3a..c6c75e7b 100644 --- a/app/components/PaymentForm.tsx +++ b/app/components/PaymentForm.tsx @@ -57,7 +57,7 @@ const PaymentForm = (properties: PaymentFormProperties) => { name="radioGroup" id="" value={"Debit/Credit Card"} - className="h-5 w-5 border bg-white checked:border-primary checked:accent-primary" + className="h-5 w-5 border accent-primary checked:bg-transparent" />