From 61e6957f4b8846d63ada216095eae039b97174d6 Mon Sep 17 00:00:00 2001 From: Akash Shaw Date: Sat, 9 Mar 2024 16:50:27 +0530 Subject: [PATCH 01/10] chore: adding otp validation form --- apps/web/app/signup/components/otp.tsx | 87 +++++++++++++++++++ apps/web/app/signup/page.tsx | 115 ++++++++++++++++--------- 2 files changed, 160 insertions(+), 42 deletions(-) create mode 100644 apps/web/app/signup/components/otp.tsx diff --git a/apps/web/app/signup/components/otp.tsx b/apps/web/app/signup/components/otp.tsx new file mode 100644 index 00000000..8cb8b972 --- /dev/null +++ b/apps/web/app/signup/components/otp.tsx @@ -0,0 +1,87 @@ +"use client" + +import { zodResolver } from "@hookform/resolvers/zod" +import { useForm } from "react-hook-form" +import { z } from "zod" + +import { Button } from "@/components/ui/button" +import { + Form, + FormControl, + FormDescription, + FormField, + FormItem, + FormLabel, + FormMessage, +} from "@/components/ui/form" +import { + InputOTP, + InputOTPGroup, + InputOTPSlot, + InputOTPSeparator, +} from "@/components/ui/input-otp" +import { toast } from "@/components/ui/use-toast" +import React from "react" + +const FormSchema = z.object({ + pin: z.string().min(6, { + message: "Your one-time password must be 6 characters.", + }), +}) + +export function OTPForm() { + const form = useForm>({ + resolver: zodResolver(FormSchema), + defaultValues: { + pin: "", + }, + }) + + function onSubmit(data: z.infer) { + toast({ + title: "You submitted the following values:", + description: ( + 
+                    {JSON.stringify(data, null, 2)}
+
+ ), + }) + } + + return ( +
+ + ( + + + ( + + {slots.map((slot, index) => ( + + + {index !== slots.length - 1 && } + + ))}{" "} + + )} + {...field} + /> + + + Please enter the six digit one-time passcode sent to your phone or email by @Paybox. + + + + )} + /> + + + + + ) +} diff --git a/apps/web/app/signup/page.tsx b/apps/web/app/signup/page.tsx index 9c5f6205..993f3833 100644 --- a/apps/web/app/signup/page.tsx +++ b/apps/web/app/signup/page.tsx @@ -6,6 +6,10 @@ import { cn } from "@/lib/utils"; import { buttonVariants } from "@/components/ui/button"; import { ClientSignupForm } from "@/app/signup/user-auth-signup-form"; import { Checkbox } from "@/components/ui/checkbox"; +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" +import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"; +import { Label } from "@/components/ui/label"; +import { OTPForm } from "./components/otp"; export const metadata: Metadata = { title: "Signup | PayBox", @@ -31,16 +35,16 @@ export default function AuthenticationPage() { className="hidden dark:block" /> -
- + {/* Signin - + */}
@@ -68,44 +72,71 @@ export default function AuthenticationPage() {
-
-
-
-

- Create an account -

-

- Enter your email below to create your account -

-
- -
- - -
-

- By clicking continue, you agree to our{" "} - - Terms of Service - {" "} - and{" "} - - Privacy Policy - - . -

-
+
+ + + Signup Details + Validations + + + + + Create Your Account + + Be Sure to add Legit Details as its gonna validate you. + + + + + + +
+ + +
+

+ By clicking continue, you agree to our{" "} + + Terms of Service + {" "} + and{" "} + + Privacy Policy + + . +

+ + + + + + + One Time Passcode.. + + Check your email or message for the OTP. + + + + + + + + + + + +
From 3641ed2e877407651784d0f1a447da0eff8a770d Mon Sep 17 00:00:00 2001 From: Akash Shaw Date: Sat, 9 Mar 2024 16:52:57 +0530 Subject: [PATCH 02/10] chore: adding paybox animations --- apps/web/app/components/Client/sparkle.tsx | 50 +++ apps/web/app/page.tsx | 20 +- apps/web/components/ui/input-otp.tsx | 64 +++ apps/web/components/ui/sparklecore.tsx | 434 +++++++++++++++++++++ apps/web/utils/cn.ts | 6 + 5 files changed, 566 insertions(+), 8 deletions(-) create mode 100644 apps/web/app/components/Client/sparkle.tsx create mode 100644 apps/web/components/ui/input-otp.tsx create mode 100644 apps/web/components/ui/sparklecore.tsx create mode 100644 apps/web/utils/cn.ts diff --git a/apps/web/app/components/Client/sparkle.tsx b/apps/web/app/components/Client/sparkle.tsx new file mode 100644 index 00000000..e155d631 --- /dev/null +++ b/apps/web/app/components/Client/sparkle.tsx @@ -0,0 +1,50 @@ +"use client"; +import { SparklesCore } from "@/components/ui/sparklecore"; +import React from "react"; + +interface SparklesProps { + classname: string; + background: string; + minSize: number; + maxSize: number; + body: string; + particleColor?: string | "#FFFFFF"; +} + +const Sparkles = ({ + classname, + background, + minSize, + maxSize, + particleColor, + body, +}: SparklesProps) => { + return ( +
+

+ {body} +

+
+ {/* Gradients */} +
+
+
+
+ + {/* Core component */} + + +
+
+
+ ); +}; + +export default Sparkles; diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx index 4792684b..c342efbd 100644 --- a/apps/web/app/page.tsx +++ b/apps/web/app/page.tsx @@ -2,20 +2,24 @@ import { getServerSession } from "next-auth"; import Image from "next/image"; import Link from "next/link"; import { authOptions } from "./api/auth/[...nextauth]/util"; +import { SparklesCore } from "@/components/ui/sparklecore"; +import Sparkles from "./components/Client/sparkle"; export default async function Home() { const session = await getServerSession(authOptions); console.log(session?.user); return ( <> - { - //@ts-ignore - session?.user?.firstname ? ( -
{session?.user?.email}
- ) : ( -
Not logged in
- ) - } +
+ +
); } diff --git a/apps/web/components/ui/input-otp.tsx b/apps/web/components/ui/input-otp.tsx new file mode 100644 index 00000000..6229e3cb --- /dev/null +++ b/apps/web/components/ui/input-otp.tsx @@ -0,0 +1,64 @@ +"use client" + +import * as React from "react" +import { DashIcon } from "@radix-ui/react-icons" +import { OTPInput, SlotProps } from "input-otp" + +import { cn } from "@/lib/utils" + +const InputOTP = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +InputOTP.displayName = "InputOTP" + +const InputOTPGroup = React.forwardRef< + React.ElementRef<"div">, + React.ComponentPropsWithoutRef<"div"> +>(({ className, ...props }, ref) => ( +
+)) +InputOTPGroup.displayName = "InputOTPGroup" + +const InputOTPSlot = React.forwardRef< + React.ElementRef<"div">, + SlotProps & React.ComponentPropsWithoutRef<"div"> +>(({ char, hasFakeCaret, isActive, className, ...props }, ref) => { + return ( +
+ {char} + {hasFakeCaret && ( +
+
+
+ )} +
+ ) +}) +InputOTPSlot.displayName = "InputOTPSlot" + +const InputOTPSeparator = React.forwardRef< + React.ElementRef<"div">, + React.ComponentPropsWithoutRef<"div"> +>(({ ...props }, ref) => ( +
+ +
+)) +InputOTPSeparator.displayName = "InputOTPSeparator" + +export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } diff --git a/apps/web/components/ui/sparklecore.tsx b/apps/web/components/ui/sparklecore.tsx new file mode 100644 index 00000000..8a0aac9f --- /dev/null +++ b/apps/web/components/ui/sparklecore.tsx @@ -0,0 +1,434 @@ +"use client"; +import React from "react"; +import { useEffect, useState } from "react"; +import Particles, { initParticlesEngine } from "@tsparticles/react"; +import type { Container, SingleOrMultiple } from "@tsparticles/engine"; +import { loadSlim } from "@tsparticles/slim"; +import { cn } from "@/utils/cn"; +import { motion, useAnimation } from "framer-motion"; + +type ParticlesProps = { + id?: string; + className?: string; + background?: string; + particleSize?: number; + minSize?: number; + maxSize?: number; + speed?: number; + particleColor?: string; + particleDensity?: number; +}; +export const SparklesCore = (props: ParticlesProps) => { + const { + id, + className, + background, + minSize, + maxSize, + speed, + particleColor, + particleDensity, + } = props; + const [init, setInit] = useState(false); + useEffect(() => { + initParticlesEngine(async (engine) => { + await loadSlim(engine); + }).then(() => { + setInit(true); + }); + }, []); + const controls = useAnimation(); + + const particlesLoaded = async (container?: Container) => { + if (container) { + console.log(container); + controls.start({ + opacity: 1, + transition: { + duration: 1, + }, + }); + } + }; + + return ( + + {init && ( + | undefined, + }, + groups: {}, + move: { + angle: { + offset: 0, + value: 90, + }, + attract: { + distance: 200, + enable: false, + rotate: { + x: 3000, + y: 3000, + }, + }, + center: { + x: 50, + y: 50, + mode: "percent", + radius: 0, + }, + decay: 0, + distance: {}, + direction: "none", + drift: 0, + enable: true, + gravity: { + acceleration: 9.81, + enable: false, + inverse: false, + maxSpeed: 50, + }, + path: { + clamp: true, + delay: { + value: 0, + }, + enable: false, + options: {}, + }, + outModes: { + default: "out", + }, + random: false, + size: false, + speed: { + min: 0.1, + max: 1, + }, + spin: { + acceleration: 0, + enable: false, + }, + straight: false, + trail: { + enable: false, + length: 10, + fill: {}, + }, + vibrate: false, + warp: false, + }, + number: { + density: { + enable: true, + width: 400, + height: 400, + }, + limit: { + mode: "delete", + value: 0, + }, + value: particleDensity || 120, + }, + opacity: { + value: { + min: 0.1, + max: 1, + }, + animation: { + count: 0, + enable: true, + speed: speed || 4, + decay: 0, + delay: 0, + sync: false, + mode: "auto", + startValue: "random", + destroy: "none", + }, + }, + reduceDuplicates: false, + shadow: { + blur: 0, + color: { + value: "#000", + }, + enable: false, + offset: { + x: 0, + y: 0, + }, + }, + shape: { + close: true, + fill: true, + options: {}, + type: "circle", + }, + size: { + value: { + min: minSize || 1, + max: maxSize || 3, + }, + animation: { + count: 0, + enable: false, + speed: 5, + decay: 0, + delay: 0, + sync: false, + mode: "auto", + startValue: "random", + destroy: "none", + }, + }, + stroke: { + width: 0, + }, + zIndex: { + value: 0, + opacityRate: 1, + sizeRate: 1, + velocityRate: 1, + }, + destroy: { + bounds: {}, + mode: "none", + split: { + count: 1, + factor: { + value: 3, + }, + rate: { + value: { + min: 4, + max: 9, + }, + }, + sizeOffset: true, + }, + }, + roll: { + darken: { + enable: false, + value: 0, + }, + enable: false, + enlighten: { + enable: false, + value: 0, + }, + mode: "vertical", + speed: 25, + }, + tilt: { + value: 0, + animation: { + enable: false, + speed: 0, + decay: 0, + sync: false, + }, + direction: "clockwise", + enable: false, + }, + twinkle: { + lines: { + enable: false, + frequency: 0.05, + opacity: 1, + }, + particles: { + enable: false, + frequency: 0.05, + opacity: 1, + }, + }, + wobble: { + distance: 5, + enable: false, + speed: { + angle: 50, + move: 10, + }, + }, + life: { + count: 0, + delay: { + value: 0, + sync: false, + }, + duration: { + value: 0, + sync: false, + }, + }, + rotate: { + value: 0, + animation: { + enable: false, + speed: 0, + decay: 0, + sync: false, + }, + direction: "clockwise", + path: false, + }, + orbit: { + animation: { + count: 0, + enable: false, + speed: 1, + decay: 0, + delay: 0, + sync: false, + }, + enable: false, + opacity: 1, + rotation: { + value: 45, + }, + width: 1, + }, + links: { + blink: false, + color: { + value: "#fff", + }, + consent: false, + distance: 100, + enable: false, + frequency: 1, + opacity: 1, + shadow: { + blur: 5, + color: { + value: "#000", + }, + enable: false, + }, + triangles: { + enable: false, + frequency: 1, + }, + width: 1, + warp: false, + }, + repulse: { + value: 0, + enabled: false, + distance: 1, + duration: 1, + factor: 1, + speed: 1, + }, + }, + detectRetina: true, + }} + /> + )} + + ); +}; diff --git a/apps/web/utils/cn.ts b/apps/web/utils/cn.ts new file mode 100644 index 00000000..cec6ac9e --- /dev/null +++ b/apps/web/utils/cn.ts @@ -0,0 +1,6 @@ +import { ClassValue, clsx } from "clsx"; +import { twMerge } from "tailwind-merge"; + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)); +} From 3c355f56cb58976463d5c01146c0e4731dff70a7 Mon Sep 17 00:00:00 2001 From: Akash Shaw Date: Sat, 9 Mar 2024 16:53:16 +0530 Subject: [PATCH 03/10] chore: formating the apps/web --- apps/web/app/components/Client/Card.tsx | 83 ----- .../profile/appearance/appearance-form.tsx | 2 +- .../app/profile/components/sidebar-nav.tsx | 4 +- apps/web/app/profile/display/display-form.tsx | 4 +- apps/web/app/signin/page.tsx | 2 +- apps/web/app/signin/user-auth-signin-form.tsx | 4 +- apps/web/app/signup/user-auth-signup-form.tsx | 4 +- apps/web/app/txn/components/columns.tsx | 22 +- .../components/data-table-faceted-filter.tsx | 4 +- .../components/data-table-view-options.tsx | 2 +- apps/web/app/txn/components/data-table.tsx | 6 +- apps/web/app/txn/page.tsx | 4 +- apps/web/app/txn/scan/page.tsx | 14 +- apps/web/app/txn/scan/qrcodeInput.tsx | 10 +- apps/web/app/txn/scan/qrcodeScanner.tsx | 136 ++++---- apps/web/app/txn/send/components/txnSend.tsx | 11 +- apps/web/app/users/page.tsx | 25 +- apps/web/components/ui/alert-dialog.tsx | 10 +- apps/web/components/ui/alert.tsx | 2 +- apps/web/components/ui/avatar.tsx | 4 +- apps/web/components/ui/badge.tsx | 2 +- apps/web/components/ui/button.tsx | 4 +- apps/web/components/ui/calendar.tsx | 6 +- apps/web/components/ui/card.tsx | 2 +- apps/web/components/ui/checkbox.tsx | 2 +- apps/web/components/ui/cluster-combobox.tsx | 195 ++++++----- apps/web/components/ui/combobox.tsx | 2 +- apps/web/components/ui/command.tsx | 10 +- apps/web/components/ui/dialog.tsx | 10 +- apps/web/components/ui/dropdown-menu.tsx | 14 +- apps/web/components/ui/form.tsx | 8 +- apps/web/components/ui/hover-card.tsx | 2 +- apps/web/components/ui/input.tsx | 4 +- apps/web/components/ui/label.tsx | 2 +- apps/web/components/ui/nav.tsx | 12 +- apps/web/components/ui/navigation-menu.tsx | 12 +- apps/web/components/ui/popover.tsx | 2 +- apps/web/components/ui/progress.tsx | 2 +- apps/web/components/ui/radio-group.tsx | 2 +- apps/web/components/ui/select.tsx | 12 +- apps/web/components/ui/separator.tsx | 6 +- apps/web/components/ui/switch.tsx | 4 +- apps/web/components/ui/table.tsx | 8 +- apps/web/components/ui/tabs.tsx | 55 ++++ apps/web/components/ui/textarea.tsx | 4 +- apps/web/components/ui/toast.tsx | 8 +- apps/web/components/ui/use-toast.ts | 4 +- apps/web/package.json | 11 +- apps/web/tailwind.config.js | 5 + apps/web/tailwind.config.ts | 5 + yarn.lock | 308 +++++++++++++++++- 51 files changed, 717 insertions(+), 359 deletions(-) delete mode 100644 apps/web/app/components/Client/Card.tsx create mode 100644 apps/web/components/ui/tabs.tsx diff --git a/apps/web/app/components/Client/Card.tsx b/apps/web/app/components/Client/Card.tsx deleted file mode 100644 index 75cc3698..00000000 --- a/apps/web/app/components/Client/Card.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import * as React from "react"; - -import { cn } from "@/lib/utils"; - -const Card = React.forwardRef< - HTMLDivElement, - React.HTMLAttributes ->(({ className, ...props }, ref) => ( -
-)); -Card.displayName = "Card"; - -const CardHeader = React.forwardRef< - HTMLDivElement, - React.HTMLAttributes ->(({ className, ...props }, ref) => ( -
-)); -CardHeader.displayName = "CardHeader"; - -const CardTitle = React.forwardRef< - HTMLParagraphElement, - React.HTMLAttributes ->(({ className, ...props }, ref) => ( -

-)); -CardTitle.displayName = "CardTitle"; - -const CardDescription = React.forwardRef< - HTMLParagraphElement, - React.HTMLAttributes ->(({ className, ...props }, ref) => ( -

-)); -CardDescription.displayName = "CardDescription"; - -const CardContent = React.forwardRef< - HTMLDivElement, - React.HTMLAttributes ->(({ className, ...props }, ref) => ( -

-)); -CardContent.displayName = "CardContent"; - -const CardFooter = React.forwardRef< - HTMLDivElement, - React.HTMLAttributes ->(({ className, ...props }, ref) => ( -
-)); -CardFooter.displayName = "CardFooter"; - -export { - Card, - CardHeader, - CardFooter, - CardTitle, - CardDescription, - CardContent, -}; diff --git a/apps/web/app/profile/appearance/appearance-form.tsx b/apps/web/app/profile/appearance/appearance-form.tsx index e3f21fd3..a0f22e15 100644 --- a/apps/web/app/profile/appearance/appearance-form.tsx +++ b/apps/web/app/profile/appearance/appearance-form.tsx @@ -67,7 +67,7 @@ export function AppearanceForm() {
- ) -} \ No newline at end of file + ); +} diff --git a/apps/web/app/txn/scan/qrcodeScanner.tsx b/apps/web/app/txn/scan/qrcodeScanner.tsx index 00286d93..05a2ce05 100644 --- a/apps/web/app/txn/scan/qrcodeScanner.tsx +++ b/apps/web/app/txn/scan/qrcodeScanner.tsx @@ -1,77 +1,81 @@ "use client"; -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useState } from "react"; import { Html5QrcodeScanner, Html5Qrcode } from "html5-qrcode"; import { - Card, - CardContent, - CardDescription, - CardFooter, - CardHeader, - CardTitle, -} from "@/components/ui/card" -import { useRouter } from 'next/navigation'; -import { toast } from 'sonner'; + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/components/ui/card"; +import { useRouter } from "next/navigation"; +import { toast } from "sonner"; const QRScanner = () => { - const router = useRouter(); - const [result, setResult] = useState(null); - - useEffect(() => { - const scanner = new Html5QrcodeScanner("qr-reader", { - qrbox: { - width: 250, - height: 250 - }, - fps: 10, - }, false); + const router = useRouter(); + const [result, setResult] = useState(null); - const onSuccess = async (decodedText: string) => { - console.log(`QR code decoded: ${decodedText}`); - router.push(`${decodedText}`); - setResult(decodedText); - }; - const onError = (errorMessage: string) => { - toast.error(errorMessage); - }; + useEffect(() => { + const scanner = new Html5QrcodeScanner( + "qr-reader", + { + qrbox: { + width: 250, + height: 250, + }, + fps: 10, + }, + false + ); - scanner.render(onSuccess, onError); - return () => { - scanner.clear(); - } - }, []); + const onSuccess = async (decodedText: string) => { + console.log(`QR code decoded: ${decodedText}`); + router.push(`${decodedText}`); + setResult(decodedText); + }; + const onError = (errorMessage: string) => { + toast.error(errorMessage); + }; + scanner.render(onSuccess, onError); + return () => { + scanner.clear(); + }; + }, []); - return ( - - - Scan the Qrcode - Qrcode scanner for transaction - - - {result ? -
Scan Success
: -
- } - - -
- - - - Paybox -
- - - ); -} + return ( + + + Scan the Qrcode + Qrcode scanner for transaction + + + {result ? ( +
Scan Success
+ ) : ( +
+ )} + + +
+ + + + Paybox +
+ + + ); +}; export default QRScanner; diff --git a/apps/web/app/txn/send/components/txnSend.tsx b/apps/web/app/txn/send/components/txnSend.tsx index 58dc3852..31feb0b6 100644 --- a/apps/web/app/txn/send/components/txnSend.tsx +++ b/apps/web/app/txn/send/components/txnSend.tsx @@ -93,7 +93,10 @@ export function PaymentCard({ }).then((res) => res.json()); toast({ title: `Transaction Successful`, - description: network == Network.Sol ? `Transaction Hash: ${response.signature.transaction.signatures[0]}` : `Transaction Hash: ${response.hash}`, + description: + network == Network.Sol + ? `Transaction Hash: ${response.signature.transaction.signatures[0]}` + : `Transaction Hash: ${response.hash}`, }); router.push("/txn"); setIsLoading(false); @@ -197,7 +200,6 @@ export function PaymentCard({
-
{ - console.log(cluster) + console.log(cluster); form.setValue("cluster", cluster); - } - } + }} /> diff --git a/apps/web/app/users/page.tsx b/apps/web/app/users/page.tsx index 3502dc82..979e89d2 100644 --- a/apps/web/app/users/page.tsx +++ b/apps/web/app/users/page.tsx @@ -1,7 +1,26 @@ +"use client"; +import { SparklesCore } from "@/components/ui/sparklecore"; import React from "react"; -const User = () => { - return
User
; +const SparklesPreview = () => { + return ( +
+
+ +
+

+ Build great products +

+
+ ); }; -export default User; +export default SparklesPreview; diff --git a/apps/web/components/ui/alert-dialog.tsx b/apps/web/components/ui/alert-dialog.tsx index f69596f1..03d375ec 100644 --- a/apps/web/components/ui/alert-dialog.tsx +++ b/apps/web/components/ui/alert-dialog.tsx @@ -19,7 +19,7 @@ const AlertDialogOverlay = React.forwardRef< @@ -52,7 +52,7 @@ const AlertDialogHeader = ({
@@ -66,7 +66,7 @@ const AlertDialogFooter = ({
@@ -119,7 +119,7 @@ const AlertDialogCancel = React.forwardRef< className={cn( buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", - className, + className )} {...props} /> diff --git a/apps/web/components/ui/alert.tsx b/apps/web/components/ui/alert.tsx index 1df04368..b068396f 100644 --- a/apps/web/components/ui/alert.tsx +++ b/apps/web/components/ui/alert.tsx @@ -16,7 +16,7 @@ const alertVariants = cva( defaultVariants: { variant: "default", }, - }, + } ); const Alert = React.forwardRef< diff --git a/apps/web/components/ui/avatar.tsx b/apps/web/components/ui/avatar.tsx index 09cd14df..d260623d 100644 --- a/apps/web/components/ui/avatar.tsx +++ b/apps/web/components/ui/avatar.tsx @@ -13,7 +13,7 @@ const Avatar = React.forwardRef< ref={ref} className={cn( "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", - className, + className )} {...props} /> @@ -40,7 +40,7 @@ const AvatarFallback = React.forwardRef< ref={ref} className={cn( "flex h-full w-full items-center justify-center rounded-full bg-muted", - className, + className )} {...props} /> diff --git a/apps/web/components/ui/badge.tsx b/apps/web/components/ui/badge.tsx index f7959805..fd92f29c 100644 --- a/apps/web/components/ui/badge.tsx +++ b/apps/web/components/ui/badge.tsx @@ -20,7 +20,7 @@ const badgeVariants = cva( defaultVariants: { variant: "default", }, - }, + } ); export interface BadgeProps diff --git a/apps/web/components/ui/button.tsx b/apps/web/components/ui/button.tsx index 225e1138..f3f13c09 100644 --- a/apps/web/components/ui/button.tsx +++ b/apps/web/components/ui/button.tsx @@ -31,7 +31,7 @@ const buttonVariants = cva( variant: "default", size: "default", }, - }, + } ); export interface ButtonProps @@ -50,7 +50,7 @@ const Button = React.forwardRef( {...props} /> ); - }, + } ); Button.displayName = "Button"; diff --git a/apps/web/components/ui/calendar.tsx b/apps/web/components/ui/calendar.tsx index 0868c9de..a24a1f5e 100644 --- a/apps/web/components/ui/calendar.tsx +++ b/apps/web/components/ui/calendar.tsx @@ -27,7 +27,7 @@ function Calendar({ nav: "space-x-1 flex items-center", nav_button: cn( buttonVariants({ variant: "outline" }), - "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100", + "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100" ), nav_button_previous: "absolute left-1", nav_button_next: "absolute right-1", @@ -40,11 +40,11 @@ function Calendar({ "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md", props.mode === "range" ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md" - : "[&:has([aria-selected])]:rounded-md", + : "[&:has([aria-selected])]:rounded-md" ), day: cn( buttonVariants({ variant: "ghost" }), - "h-8 w-8 p-0 font-normal aria-selected:opacity-100", + "h-8 w-8 p-0 font-normal aria-selected:opacity-100" ), day_range_start: "day-range-start", day_range_end: "day-range-end", diff --git a/apps/web/components/ui/card.tsx b/apps/web/components/ui/card.tsx index 75cc3698..ad694b76 100644 --- a/apps/web/components/ui/card.tsx +++ b/apps/web/components/ui/card.tsx @@ -10,7 +10,7 @@ const Card = React.forwardRef< ref={ref} className={cn( "rounded-xl border bg-card text-card-foreground shadow", - className, + className )} {...props} /> diff --git a/apps/web/components/ui/checkbox.tsx b/apps/web/components/ui/checkbox.tsx index 6d36331c..6ffbcef1 100644 --- a/apps/web/components/ui/checkbox.tsx +++ b/apps/web/components/ui/checkbox.tsx @@ -14,7 +14,7 @@ const Checkbox = React.forwardRef< ref={ref} className={cn( "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground", - className, + className )} {...props} > diff --git a/apps/web/components/ui/cluster-combobox.tsx b/apps/web/components/ui/cluster-combobox.tsx index f476ea48..f5f22013 100644 --- a/apps/web/components/ui/cluster-combobox.tsx +++ b/apps/web/components/ui/cluster-combobox.tsx @@ -1,94 +1,117 @@ -"use client" +"use client"; -import * as React from "react" -import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons" +import * as React from "react"; +import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons"; -import { cn } from "@/lib/utils" -import { Button } from "@/components/ui/button" +import { cn } from "@/lib/utils"; +import { Button } from "@/components/ui/button"; import { - Command, - CommandEmpty, - CommandGroup, - CommandInput, - CommandItem, -} from "@/components/ui/command" + Command, + CommandEmpty, + CommandGroup, + CommandInput, + CommandItem, +} from "@/components/ui/command"; import { - Popover, - PopoverContent, - PopoverTrigger, -} from "@/components/ui/popover" -import { BitcoinCluster, ClusterObject, EthCluster, Network, SolCluster, USDCCluster, enumToClustersArray } from "@paybox/common" + Popover, + PopoverContent, + PopoverTrigger, +} from "@/components/ui/popover"; +import { + BitcoinCluster, + ClusterObject, + EthCluster, + Network, + SolCluster, + USDCCluster, + enumToClustersArray, +} from "@paybox/common"; -export function ClusterCombo( - { network, selectCluster }: - { network: Network, selectCluster: (cluster: EthCluster | SolCluster | BitcoinCluster | USDCCluster) => void } -) { - const [open, setOpen] = React.useState(false); - const [value, setValue] = React.useState(""); - const [clustersArray, setClusters] = React.useState(enumToClustersArray(SolCluster)); +export function ClusterCombo({ + network, + selectCluster, +}: { + network: Network; + selectCluster: ( + cluster: EthCluster | SolCluster | BitcoinCluster | USDCCluster + ) => void; +}) { + const [open, setOpen] = React.useState(false); + const [value, setValue] = React.useState(""); + const [clustersArray, setClusters] = React.useState( + enumToClustersArray(SolCluster) + ); - React.useEffect(() => { - switch (network) { - case Network.Sol: - setClusters(enumToClustersArray(SolCluster)); - break; - case Network.Eth: - setClusters(enumToClustersArray(EthCluster)); - break; - case Network.Bitcoin: - setClusters(enumToClustersArray(BitcoinCluster)); - break; - case Network.USDC: - setClusters(enumToClustersArray(USDCCluster)); - break; - default: - setClusters([]); - break; - } - }, [network]) + React.useEffect(() => { + switch (network) { + case Network.Sol: + setClusters(enumToClustersArray(SolCluster)); + break; + case Network.Eth: + setClusters(enumToClustersArray(EthCluster)); + break; + case Network.Bitcoin: + setClusters(enumToClustersArray(BitcoinCluster)); + break; + case Network.USDC: + setClusters(enumToClustersArray(USDCCluster)); + break; + default: + setClusters([]); + break; + } + }, [network]); - return ( - - - - - - - - No Cluster found. - - {clustersArray?.map((clusterObject) => ( - { - setValue(currentValue === value ? "" : currentValue) - setOpen(false) - selectCluster(currentValue as EthCluster | SolCluster | BitcoinCluster | USDCCluster); - }} - > - {clusterObject.label} - - - ))} - - - - - ) + return ( + + + + + + + + No Cluster found. + + {clustersArray?.map((clusterObject) => ( + { + setValue(currentValue === value ? "" : currentValue); + setOpen(false); + selectCluster( + currentValue as + | EthCluster + | SolCluster + | BitcoinCluster + | USDCCluster + ); + }} + > + {clusterObject.label} + + + ))} + + + + + ); } diff --git a/apps/web/components/ui/combobox.tsx b/apps/web/components/ui/combobox.tsx index 4bbff72e..76b199ff 100644 --- a/apps/web/components/ui/combobox.tsx +++ b/apps/web/components/ui/combobox.tsx @@ -62,7 +62,7 @@ export function NetworkSelect({ diff --git a/apps/web/components/ui/command.tsx b/apps/web/components/ui/command.tsx index 0fc00166..f68e98ac 100644 --- a/apps/web/components/ui/command.tsx +++ b/apps/web/components/ui/command.tsx @@ -16,7 +16,7 @@ const Command = React.forwardRef< ref={ref} className={cn( "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", - className, + className )} {...props} /> @@ -47,7 +47,7 @@ const CommandInput = React.forwardRef< ref={ref} className={cn( "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", - className, + className )} {...props} /> @@ -90,7 +90,7 @@ const CommandGroup = React.forwardRef< ref={ref} className={cn( "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground", - className, + className )} {...props} /> @@ -118,7 +118,7 @@ const CommandItem = React.forwardRef< ref={ref} className={cn( "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", - className, + className )} {...props} /> @@ -134,7 +134,7 @@ const CommandShortcut = ({ diff --git a/apps/web/components/ui/dialog.tsx b/apps/web/components/ui/dialog.tsx index 3db2a7dd..3b370fc5 100644 --- a/apps/web/components/ui/dialog.tsx +++ b/apps/web/components/ui/dialog.tsx @@ -22,7 +22,7 @@ const DialogOverlay = React.forwardRef< ref={ref} className={cn( "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", - className, + className )} {...props} /> @@ -39,7 +39,7 @@ const DialogContent = React.forwardRef< ref={ref} className={cn( "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", - className, + className )} {...props} > @@ -60,7 +60,7 @@ const DialogHeader = ({
@@ -74,7 +74,7 @@ const DialogFooter = ({
@@ -89,7 +89,7 @@ const DialogTitle = React.forwardRef< ref={ref} className={cn( "text-lg font-semibold leading-none tracking-tight", - className, + className )} {...props} /> diff --git a/apps/web/components/ui/dropdown-menu.tsx b/apps/web/components/ui/dropdown-menu.tsx index 9dc361e0..748fd95c 100644 --- a/apps/web/components/ui/dropdown-menu.tsx +++ b/apps/web/components/ui/dropdown-menu.tsx @@ -33,7 +33,7 @@ const DropdownMenuSubTrigger = React.forwardRef< className={cn( "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent", inset && "pl-8", - className, + className )} {...props} > @@ -52,7 +52,7 @@ const DropdownMenuSubContent = React.forwardRef< ref={ref} className={cn( "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", - className, + className )} {...props} /> @@ -71,7 +71,7 @@ const DropdownMenuContent = React.forwardRef< className={cn( "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", - className, + className )} {...props} /> @@ -90,7 +90,7 @@ const DropdownMenuItem = React.forwardRef< className={cn( "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", - className, + className )} {...props} /> @@ -105,7 +105,7 @@ const DropdownMenuCheckboxItem = React.forwardRef< ref={ref} className={cn( "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", - className, + className )} checked={checked} {...props} @@ -129,7 +129,7 @@ const DropdownMenuRadioItem = React.forwardRef< ref={ref} className={cn( "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", - className, + className )} {...props} > @@ -154,7 +154,7 @@ const DropdownMenuLabel = React.forwardRef< className={cn( "px-2 py-1.5 text-sm font-semibold", inset && "pl-8", - className, + className )} {...props} /> diff --git a/apps/web/components/ui/form.tsx b/apps/web/components/ui/form.tsx index 670c3258..93fd3deb 100644 --- a/apps/web/components/ui/form.tsx +++ b/apps/web/components/ui/form.tsx @@ -17,18 +17,18 @@ const Form = FormProvider; type FormFieldContextValue< TFieldValues extends FieldValues = FieldValues, - TName extends FieldPath = FieldPath, + TName extends FieldPath = FieldPath > = { name: TName; }; const FormFieldContext = React.createContext( - {} as FormFieldContextValue, + {} as FormFieldContextValue ); const FormField = < TFieldValues extends FieldValues = FieldValues, - TName extends FieldPath = FieldPath, + TName extends FieldPath = FieldPath >({ ...props }: ControllerProps) => { @@ -67,7 +67,7 @@ type FormItemContextValue = { }; const FormItemContext = React.createContext( - {} as FormItemContextValue, + {} as FormItemContextValue ); const FormItem = React.forwardRef< diff --git a/apps/web/components/ui/hover-card.tsx b/apps/web/components/ui/hover-card.tsx index 9e8c62d3..d130a8bf 100644 --- a/apps/web/components/ui/hover-card.tsx +++ b/apps/web/components/ui/hover-card.tsx @@ -19,7 +19,7 @@ const HoverCardContent = React.forwardRef< sideOffset={sideOffset} className={cn( "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", - className, + className )} {...props} /> diff --git a/apps/web/components/ui/input.tsx b/apps/web/components/ui/input.tsx index 14fcc540..f6b24530 100644 --- a/apps/web/components/ui/input.tsx +++ b/apps/web/components/ui/input.tsx @@ -12,13 +12,13 @@ const Input = React.forwardRef( type={type} className={cn( "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", - className, + className )} ref={ref} {...props} /> ); - }, + } ); Input.displayName = "Input"; diff --git a/apps/web/components/ui/label.tsx b/apps/web/components/ui/label.tsx index 84f8b0c7..40378d43 100644 --- a/apps/web/components/ui/label.tsx +++ b/apps/web/components/ui/label.tsx @@ -7,7 +7,7 @@ import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; const labelVariants = cva( - "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", + "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" ); const Label = React.forwardRef< diff --git a/apps/web/components/ui/nav.tsx b/apps/web/components/ui/nav.tsx index 877d3953..5c5a78b8 100644 --- a/apps/web/components/ui/nav.tsx +++ b/apps/web/components/ui/nav.tsx @@ -147,7 +147,11 @@ const SignButton: React.FC = () => { return signOut(); } else { router.push( - `/${pathname.includes("/signup") ? SignType.Signin.toLowerCase() : SignType.Signup.toLowerCase()}`, + `/${ + pathname.includes("/signup") + ? SignType.Signin.toLowerCase() + : SignType.Signup.toLowerCase() + }` ); } }} @@ -155,8 +159,8 @@ const SignButton: React.FC = () => { {session?.user?.email ? SignType.Signout : pathname.includes("/signup") - ? SignType.Signin - : SignType.Signup} + ? SignType.Signin + : SignType.Signup} ); @@ -173,7 +177,7 @@ const ListItem = React.forwardRef< ref={ref} className={cn( "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground", - className, + className )} {...props} > diff --git a/apps/web/components/ui/navigation-menu.tsx b/apps/web/components/ui/navigation-menu.tsx index 7c8186f0..93770992 100644 --- a/apps/web/components/ui/navigation-menu.tsx +++ b/apps/web/components/ui/navigation-menu.tsx @@ -13,7 +13,7 @@ const NavigationMenu = React.forwardRef< ref={ref} className={cn( "relative z-10 flex max-w-max flex-1 items-center justify-center", - className, + className )} {...props} > @@ -31,7 +31,7 @@ const NavigationMenuList = React.forwardRef< ref={ref} className={cn( "group flex flex-1 list-none items-center justify-center space-x-1", - className, + className )} {...props} /> @@ -41,7 +41,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName; const NavigationMenuItem = NavigationMenuPrimitive.Item; const navigationMenuTriggerStyle = cva( - "cursor-pointer group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50", + "cursor-pointer group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50" ); const NavigationMenuTrigger = React.forwardRef< @@ -70,7 +70,7 @@ const NavigationMenuContent = React.forwardRef< ref={ref} className={cn( "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ", - className, + className )} {...props} /> @@ -87,7 +87,7 @@ const NavigationMenuViewport = React.forwardRef< diff --git a/apps/web/components/ui/popover.tsx b/apps/web/components/ui/popover.tsx index bd495013..b7a19e9d 100644 --- a/apps/web/components/ui/popover.tsx +++ b/apps/web/components/ui/popover.tsx @@ -22,7 +22,7 @@ const PopoverContent = React.forwardRef< sideOffset={sideOffset} className={cn( "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", - className, + className )} {...props} /> diff --git a/apps/web/components/ui/progress.tsx b/apps/web/components/ui/progress.tsx index adeec5d6..0dd2b10d 100644 --- a/apps/web/components/ui/progress.tsx +++ b/apps/web/components/ui/progress.tsx @@ -13,7 +13,7 @@ const Progress = React.forwardRef< ref={ref} className={cn( "relative h-1 w-full overflow-hidden rounded-full bg-primary/20", - className, + className )} {...props} > diff --git a/apps/web/components/ui/radio-group.tsx b/apps/web/components/ui/radio-group.tsx index f5640670..f64a95ec 100644 --- a/apps/web/components/ui/radio-group.tsx +++ b/apps/web/components/ui/radio-group.tsx @@ -29,7 +29,7 @@ const RadioGroupItem = React.forwardRef< ref={ref} className={cn( "aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", - className, + className )} {...props} > diff --git a/apps/web/components/ui/select.tsx b/apps/web/components/ui/select.tsx index 11fc181b..f93f34b0 100644 --- a/apps/web/components/ui/select.tsx +++ b/apps/web/components/ui/select.tsx @@ -25,7 +25,7 @@ const SelectTrigger = React.forwardRef< ref={ref} className={cn( "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", - className, + className )} {...props} > @@ -45,7 +45,7 @@ const SelectScrollUpButton = React.forwardRef< ref={ref} className={cn( "flex cursor-default items-center justify-center py-1", - className, + className )} {...props} > @@ -62,7 +62,7 @@ const SelectScrollDownButton = React.forwardRef< ref={ref} className={cn( "flex cursor-default items-center justify-center py-1", - className, + className )} {...props} > @@ -83,7 +83,7 @@ const SelectContent = React.forwardRef< "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", - className, + className )} position={position} {...props} @@ -93,7 +93,7 @@ const SelectContent = React.forwardRef< className={cn( "p-1", position === "popper" && - "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]", + "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]" )} > {children} @@ -124,7 +124,7 @@ const SelectItem = React.forwardRef< ref={ref} className={cn( "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", - className, + className )} {...props} > diff --git a/apps/web/components/ui/separator.tsx b/apps/web/components/ui/separator.tsx index 9ac3b95f..5b6774dc 100644 --- a/apps/web/components/ui/separator.tsx +++ b/apps/web/components/ui/separator.tsx @@ -11,7 +11,7 @@ const Separator = React.forwardRef< >( ( { className, orientation = "horizontal", decorative = true, ...props }, - ref, + ref ) => ( - ), + ) ); Separator.displayName = SeparatorPrimitive.Root.displayName; diff --git a/apps/web/components/ui/switch.tsx b/apps/web/components/ui/switch.tsx index d692565e..b35a4081 100644 --- a/apps/web/components/ui/switch.tsx +++ b/apps/web/components/ui/switch.tsx @@ -12,14 +12,14 @@ const Switch = React.forwardRef< diff --git a/apps/web/components/ui/table.tsx b/apps/web/components/ui/table.tsx index d109c2ae..467315c2 100644 --- a/apps/web/components/ui/table.tsx +++ b/apps/web/components/ui/table.tsx @@ -44,7 +44,7 @@ const TableFooter = React.forwardRef< ref={ref} className={cn( "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", - className, + className )} {...props} /> @@ -59,7 +59,7 @@ const TableRow = React.forwardRef< ref={ref} className={cn( "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", - className, + className )} {...props} /> @@ -74,7 +74,7 @@ const TableHead = React.forwardRef< ref={ref} className={cn( "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", - className, + className )} {...props} /> @@ -89,7 +89,7 @@ const TableCell = React.forwardRef< ref={ref} className={cn( "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", - className, + className )} {...props} /> diff --git a/apps/web/components/ui/tabs.tsx b/apps/web/components/ui/tabs.tsx new file mode 100644 index 00000000..0f4caebb --- /dev/null +++ b/apps/web/components/ui/tabs.tsx @@ -0,0 +1,55 @@ +"use client" + +import * as React from "react" +import * as TabsPrimitive from "@radix-ui/react-tabs" + +import { cn } from "@/lib/utils" + +const Tabs = TabsPrimitive.Root + +const TabsList = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +TabsList.displayName = TabsPrimitive.List.displayName + +const TabsTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +TabsTrigger.displayName = TabsPrimitive.Trigger.displayName + +const TabsContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +TabsContent.displayName = TabsPrimitive.Content.displayName + +export { Tabs, TabsList, TabsTrigger, TabsContent } diff --git a/apps/web/components/ui/textarea.tsx b/apps/web/components/ui/textarea.tsx index 0e546bbf..2fb96905 100644 --- a/apps/web/components/ui/textarea.tsx +++ b/apps/web/components/ui/textarea.tsx @@ -11,13 +11,13 @@ const Textarea = React.forwardRef(