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/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/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() { +
+
+ + + + )} + /> + ( + + + Email + + +
+
+ +
+
+ + + + )} + /> +
+ + +
+ + +
+ + + + + + + + ) +} diff --git a/apps/web/app/signup/page.tsx b/apps/web/app/signup/page.tsx index 9c5f6205..5ef47f22 100644 --- a/apps/web/app/signup/page.tsx +++ b/apps/web/app/signup/page.tsx @@ -6,6 +6,11 @@ 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"; +import { ResendOtp } from "./components/resendOtp"; export const metadata: Metadata = { title: "Signup | PayBox", @@ -31,16 +36,16 @@ export default function AuthenticationPage() { className="hidden dark:block" />
-
- + {/* Signin - + */}
@@ -64,48 +69,76 @@ export default function AuthenticationPage() { “Introducing PayBox, the ultimate app for tracking and indexing blockchain transactions in real-time.”

-
Akash Shaw
+
Shaws
-
-
-
-

- 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. + + + + + + + Haven't Received the OTP? + + + + + +
diff --git a/apps/web/app/signup/user-auth-signup-form.tsx b/apps/web/app/signup/user-auth-signup-form.tsx index 350f5a75..bd8f536a 100644 --- a/apps/web/app/signup/user-auth-signup-form.tsx +++ b/apps/web/app/signup/user-auth-signup-form.tsx @@ -251,7 +251,7 @@ export function ClientSignupForm({ onClick={() => { setIsLoading(true); signIn("github", { callbackUrl: "/profile" }).then(() => - setIsLoading(false), + setIsLoading(false) ); }} > @@ -269,7 +269,7 @@ export function ClientSignupForm({ onClick={() => { setIsLoading(true); signIn("google", { callbackUrl: "/profile" }).then((_) => - setIsLoading(false), + setIsLoading(false) ); }} > diff --git a/apps/web/app/txn/components/columns.tsx b/apps/web/app/txn/components/columns.tsx index 463a1233..106df764 100644 --- a/apps/web/app/txn/components/columns.tsx +++ b/apps/web/app/txn/components/columns.tsx @@ -10,7 +10,13 @@ import { DataTableColumnHeader } from "./data-table-column-header"; import { DataTableRowActions } from "./data-table-row-actions"; import { format } from "date-fns"; import { CalendarIcon, ClockIcon } from "@radix-ui/react-icons"; -import { SOLSCAN_ACCOUNT_URL, SOLSCAN_TXN_URL, TxnType, getAccountUrl, getTransactionUrl } from "@paybox/common"; +import { + SOLSCAN_ACCOUNT_URL, + SOLSCAN_TXN_URL, + TxnType, + getAccountUrl, + getTransactionUrl, +} from "@paybox/common"; import Link from "next/link"; import { get } from "http"; @@ -49,7 +55,11 @@ export const columns: ColumnDef[] = [ // make the cluster dynamic
Txn-{(row.getValue("id") as string).split("-")[1]} @@ -66,7 +76,7 @@ export const columns: ColumnDef[] = [ ), cell: ({ row }) => { const label = labels.find( - (label) => label.value === row.original.network, + (label) => label.value === row.original.network ); // Give the label as Network type and fill the sender address or his name return ( @@ -74,7 +84,11 @@ export const columns: ColumnDef[] = [ {label && {label.label}} {row.getValue("from")} diff --git a/apps/web/app/txn/components/data-table-faceted-filter.tsx b/apps/web/app/txn/components/data-table-faceted-filter.tsx index 917c0050..b14d5328 100644 --- a/apps/web/app/txn/components/data-table-faceted-filter.tsx +++ b/apps/web/app/txn/components/data-table-faceted-filter.tsx @@ -99,7 +99,7 @@ export function DataTableFacetedFilter({ } const filterValues = Array.from(selectedValues); column?.setFilterValue( - filterValues.length ? filterValues : undefined, + filterValues.length ? filterValues : undefined ); }} > @@ -108,7 +108,7 @@ export function DataTableFacetedFilter({ "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary", isSelected ? "bg-primary text-primary-foreground" - : "opacity-50 [&_svg]:invisible", + : "opacity-50 [&_svg]:invisible" )} > diff --git a/apps/web/app/txn/components/data-table-view-options.tsx b/apps/web/app/txn/components/data-table-view-options.tsx index 9134db38..01eff4a2 100644 --- a/apps/web/app/txn/components/data-table-view-options.tsx +++ b/apps/web/app/txn/components/data-table-view-options.tsx @@ -39,7 +39,7 @@ export function DataTableViewOptions({ .getAllColumns() .filter( (column) => - typeof column.accessorFn !== "undefined" && column.getCanHide(), + typeof column.accessorFn !== "undefined" && column.getCanHide() ) .map((column) => { return ( diff --git a/apps/web/app/txn/components/data-table.tsx b/apps/web/app/txn/components/data-table.tsx index 2dac1985..64e7d304 100644 --- a/apps/web/app/txn/components/data-table.tsx +++ b/apps/web/app/txn/components/data-table.tsx @@ -41,7 +41,7 @@ export function DataTable({ const [columnVisibility, setColumnVisibility] = React.useState({}); const [columnFilters, setColumnFilters] = React.useState( - [], + [] ); const [sorting, setSorting] = React.useState([]); @@ -82,7 +82,7 @@ export function DataTable({ ? null : flexRender( header.column.columnDef.header, - header.getContext(), + header.getContext() )} ); @@ -101,7 +101,7 @@ export function DataTable({ {flexRender( cell.column.columnDef.cell, - cell.getContext(), + cell.getContext() )} ))} diff --git a/apps/web/app/txn/page.tsx b/apps/web/app/txn/page.tsx index c123c9a5..0f8bd2a1 100644 --- a/apps/web/app/txn/page.tsx +++ b/apps/web/app/txn/page.tsx @@ -16,9 +16,7 @@ export const metadata: Metadata = { description: "Transactions Table for Client of PayBox", }; -const getTxns = async ( - jwt: string, -): Promise => { +const getTxns = async (jwt: string): Promise => { try { const apiUrl = `${BACKEND_URL}/txn/getAll`; const { status, txns }: { txns: TxnType[]; status: responseStatus } = diff --git a/apps/web/app/txn/scan/page.tsx b/apps/web/app/txn/scan/page.tsx index 2ed3fc30..71f62a53 100644 --- a/apps/web/app/txn/scan/page.tsx +++ b/apps/web/app/txn/scan/page.tsx @@ -1,10 +1,10 @@ import QRScanner from "./qrcodeScanner"; export default async function ScanPage() { - return ( -
-

Scan Page

- -
- ); -} \ No newline at end of file + return ( +
+

Scan Page

+ +
+ ); +} diff --git a/apps/web/app/txn/scan/qrcodeInput.tsx b/apps/web/app/txn/scan/qrcodeInput.tsx index bf345c72..6ac17883 100644 --- a/apps/web/app/txn/scan/qrcodeInput.tsx +++ b/apps/web/app/txn/scan/qrcodeInput.tsx @@ -1,11 +1,11 @@ -import { Input } from "@/components/ui/input" -import { Label } from "@/components/ui/label" - +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; + export function InputFile() { return (
- ) -} \ 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/newuser/page.tsx b/apps/web/app/users/newuser/page.tsx deleted file mode 100644 index 82ea881a..00000000 --- a/apps/web/app/users/newuser/page.tsx +++ /dev/null @@ -1,45 +0,0 @@ -//server component -import AddToCart from "@/app/components/Client/AddToCart"; -import { - Card, - CardContent, - CardDescription, - CardFooter, - CardHeader, - CardTitle, -} from "@/app/components/Client/Card"; -import Users from "@/app/components/Client/Users"; -import { User } from "@/app/types/interface"; -import React from "react"; - -export type CardProps = React.ComponentProps; - -const NewUser = async () => { - /** - * Caching: - * by default nextjs renders statically and cached it unless - * cache is no-store. - * Axios doesn't provides caching so use fetch - */ - const res = await fetch("https://jsonplaceholder.typicode.com/users", { - headers: { - "Content-Type": "applications/json", - }, - cache: "no-store", // to cache the response from api, - // next: { revalidate: 10 } // fetches the api again in 10 seconds of time in background - }); - const users: User[] = await res.json(); - return ( - <> - -

Users

-
-
- -
-
- - ); -}; - -export default NewUser; 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-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/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/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/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(