npm - wexts - Versions diffs - 2.0.6 → 2.0.8 - Mend

wexts 2.0.6 → 2.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (110) hide show

package/dist/chunk-63MTCWU2.mjs +361 -0
package/dist/chunk-63MTCWU2.mjs.map +1 -0
package/dist/chunk-67IJ6H4J.mjs +44 -0
package/dist/chunk-67IJ6H4J.mjs.map +1 -0
package/dist/chunk-7NSRDJ5C.mjs +1 -0
package/dist/chunk-7NSRDJ5C.mjs.map +1 -0
package/dist/chunk-ASDXAK6G.js +44 -0
package/dist/chunk-ASDXAK6G.js.map +1 -0
package/dist/chunk-CKZ4VSCB.mjs +18 -0
package/dist/chunk-CKZ4VSCB.mjs.map +1 -0
package/dist/chunk-DW6GOKMF.js +57 -0
package/dist/chunk-DW6GOKMF.js.map +1 -0
package/dist/chunk-GKVPGKAH.js +66 -0
package/dist/chunk-GKVPGKAH.js.map +1 -0
package/dist/chunk-HSFLZUJN.mjs +57 -0
package/dist/chunk-HSFLZUJN.mjs.map +1 -0
package/dist/chunk-HU63F22V.js +361 -0
package/dist/chunk-HU63F22V.js.map +1 -0
package/dist/chunk-JMBD6DOP.js +225 -0
package/dist/chunk-JMBD6DOP.js.map +1 -0
package/dist/chunk-K7EIJSYQ.js +1 -0
package/dist/chunk-K7EIJSYQ.js.map +1 -0
package/dist/chunk-OTBYRUBE.mjs +225 -0
package/dist/chunk-OTBYRUBE.mjs.map +1 -0
package/dist/chunk-WMHVXEYQ.mjs +66 -0
package/dist/chunk-WMHVXEYQ.mjs.map +1 -0
package/dist/cli/index.js +91 -43
package/dist/cli/index.js.map +1 -1
package/dist/cli/index.mjs +62 -12
package/dist/cli/index.mjs.map +1 -1
package/dist/client/index.js +2 -2
package/dist/client/index.mjs +2 -2
package/dist/codegen/index.d.mts +1 -0
package/dist/codegen/index.d.ts +1 -0
package/dist/codegen/index.js +13 -0
package/dist/codegen/index.js.map +1 -0
package/dist/codegen/index.mjs +13 -0
package/dist/codegen/index.mjs.map +1 -0
package/dist/dev-server/index.d.mts +1 -0
package/dist/dev-server/index.d.ts +1 -0
package/dist/dev-server/index.js +13 -0
package/dist/dev-server/index.js.map +1 -0
package/dist/dev-server/index.mjs +13 -0
package/dist/dev-server/index.mjs.map +1 -0
package/dist/index-SjUaHgFr.d.mts +75 -0
package/dist/index-SjUaHgFr.d.ts +75 -0
package/dist/index-tFGPFVfQ.d.mts +67 -0
package/dist/index-tFGPFVfQ.d.ts +67 -0
package/dist/index.d.mts +83 -164
package/dist/index.d.ts +83 -164
package/dist/index.js +89 -22
package/dist/index.js.map +1 -1
package/dist/index.mjs +76 -9
package/dist/index.mjs.map +1 -1
package/dist/nest/index.js +2 -2
package/dist/nest/index.mjs +2 -2
package/dist/next/index.d.mts +61 -3
package/dist/next/index.d.ts +61 -3
package/dist/next/index.js +140 -7
package/dist/next/index.js.map +1 -1
package/dist/next/index.mjs +102 -7
package/dist/next/index.mjs.map +1 -1
package/dist/types/index.js +1 -1
package/dist/types/index.mjs +2 -1
package/package.json +1 -1
package/templates/nestjs-api/package-lock.json +5623 -0
package/templates/nestjs-api/package.json +21 -19
package/templates/nestjs-api/prisma/migrations/20251123205437_init/migration.sql +24 -0
package/templates/nestjs-api/prisma/migrations/migration_lock.toml +3 -0
package/templates/nestjs-api/src/auth/auth.controller.ts +5 -5
package/templates/nestjs-api/src/main.ts +1 -1
package/templates/nestjs-api/src/todos/todos.controller.ts +7 -7
package/templates/nestjs-api/src/users/users.controller.ts +3 -3
package/templates/nestjs-api/tsconfig.json +20 -1
package/templates/nextjs-web/app/actions/auth.ts +79 -0
package/templates/nextjs-web/app/dashboard/error.tsx +39 -0
package/templates/nextjs-web/app/dashboard/loading.tsx +14 -0
package/templates/nextjs-web/app/dashboard/page.tsx +2 -172
package/templates/nextjs-web/app/globals.css +80 -15
package/templates/nextjs-web/app/layout.tsx +7 -5
package/templates/nextjs-web/app/login/page.tsx +2 -104
package/templates/nextjs-web/app/page.tsx +1 -1
package/templates/nextjs-web/app/register/page.tsx +2 -127
package/templates/nextjs-web/components/ui/button.tsx +56 -0
package/templates/nextjs-web/components/ui/card.tsx +79 -0
package/templates/nextjs-web/components/ui/input.tsx +25 -0
package/templates/nextjs-web/components/ui/label.tsx +24 -0
package/templates/nextjs-web/features/auth/LoginForm.tsx +140 -0
package/templates/nextjs-web/features/auth/RegisterForm.tsx +159 -0
package/templates/nextjs-web/features/auth/api.ts +35 -0
package/templates/nextjs-web/features/auth/index.ts +3 -0
package/templates/nextjs-web/features/dashboard/DashboardView.tsx +204 -0
package/templates/nextjs-web/features/dashboard/api.ts +9 -0
package/templates/nextjs-web/features/dashboard/components.tsx +74 -0
package/templates/nextjs-web/features/dashboard/index.ts +3 -0
package/templates/nextjs-web/hooks/index.ts +4 -0
package/templates/nextjs-web/lib/api-client.ts +89 -0
package/templates/nextjs-web/lib/axios-global-config.ts +17 -0
package/templates/nextjs-web/lib/utils.ts +6 -0
package/templates/nextjs-web/lib/wexts-client.ts +4 -0
package/templates/nextjs-web/next-env.d.ts +6 -0
package/templates/nextjs-web/next.config.ts +20 -0
package/templates/nextjs-web/package-lock.json +3254 -0
package/templates/nextjs-web/package.json +23 -14
package/templates/nextjs-web/postcss.config.js +6 -0
package/templates/nextjs-web/tailwind.config.ts +55 -1
package/templates/nextjs-web/tsconfig.json +41 -39
package/templates/nestjs-api/.env.example +0 -4
package/templates/nextjs-web/next.config.mjs +0 -4
/package/templates/nextjs-web/{.env.local.example → .env} +0 -0

package/templates/nextjs-web/app/layout.tsx CHANGED Viewed

@@ -1,13 +1,14 @@
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
-import { FusionProvider } from 'wexts/next';
+import { WextsProvider } from '@/lib/wexts-client';
+import { Toaster } from 'react-hot-toast';
 import './globals.css';
 const inter = Inter({ subsets: ['latin'] });
 export const metadata: Metadata = {
-    title: 'Fusion App',
-    description: 'Built with wexts',
+    title: 'wexts Web App',
+    description: 'Modern web application built with wexts',
 };
 export default function RootLayout({
@@ -18,9 +19,10 @@ export default function RootLayout({
     return (
         <html lang="en">
             <body className={inter.className}>
-                <FusionProvider baseUrl={process.env.NEXT_PUBLIC_API_URL || 'http://localhost:5050'}>
+                <WextsProvider baseUrl={process.env.NEXT_PUBLIC_API_URL || 'http://localhost:5050'}>
                     {children}
-                </FusionProvider>
+                    <Toaster position="top-center" />
+                </WextsProvider>
             </body>
         </html>
     );

package/templates/nextjs-web/app/login/page.tsx CHANGED Viewed

@@ -1,107 +1,5 @@
-'use client';
-import { useState, FormEvent } from 'react';
-import { useAuth } from 'wexts/next';
-import { useRouter } from 'next/navigation';
-import Link from 'next/link';
+import { LoginForm } from '@/features/auth';
 export default function LoginPage() {
-    const [email, setEmail] = useState('');
-    const [password, setPassword] = useState('');
-    const [error, setError] = useState('');
-    const [loading, setLoading] = useState(false);
-    const { login } = useAuth();
-    const router = useRouter();
-    const handleSubmit = async (e: FormEvent) => {
-        e.preventDefault();
-        setError('');
-        setLoading(true);
-        try {
-            await login(email, password);
-            router.push('/dashboard');
-        } catch (err: any) {
-            setError(err.message || 'Login failed');
-        } finally {
-            setLoading(false);
-        }
-    };
-    return (
-        <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-violet-50 to-purple-100 dark:from-gray-900 dark:to-gray-800 px-4">
-            <div className="max-w-md w-full space-y-8 bg-white dark:bg-gray-800 p-10 rounded-2xl shadow-xl">
-                <div>
-                    <h2 className="text-center text-4xl font-bold text-gray-900 dark:text-white">
-                        Welcome Back
-                    </h2>
-                    <p className="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">
-                        Sign in to your account
-                    </p>
-                </div>
-                <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
-                    {error && (
-                        <div className="rounded-lg bg-red-50 dark:bg-red-900/20 p-4 text-sm text-red-600 dark:text-red-400">
-                            {error}
-                        </div>
-                    )}
-                    <div className="space-y-4">
-                        <div>
-                            <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                                Email
-                            </label>
-                            <input
-                                id="email"
-                                name="email"
-                                type="email"
-                                autoComplete="email"
-                                required
-                                value={email}
-                                onChange={(e) => setEmail(e.target.value)}
-                                className="appearance-none relative block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent bg-white dark:bg-gray-700 transition"
-                                placeholder="you@example.com"
-                            />
-                        </div>
-                        <div>
-                            <label htmlFor="password" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                                Password
-                            </label>
-                            <input
-                                id="password"
-                                name="password"
-                                type="password"
-                                autoComplete="current-password"
-                                required
-                                value={password}
-                                onChange={(e) => setPassword(e.target.value)}
-                                className="appearance-none relative block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent bg-white dark:bg-gray-700 transition"
-                                placeholder="••••••••"
-                            />
-                        </div>
-                    </div>
-                    <div>
-                        <button
-                            type="submit"
-                            disabled={loading}
-                            className="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-semibold rounded-lg text-white bg-violet-600 hover:bg-violet-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-violet-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
-                        >
-                            {loading ? 'Signing in...' : 'Sign in'}
-                        </button>
-                    </div>
-                    <div className="text-center text-sm">
-                        <span className="text-gray-600 dark:text-gray-400">Don't have an account? </span>
-                        <Link href="/register" className="font-medium text-violet-600 hover:text-violet-500 dark:text-violet-400">
-                            Sign up
-                        </Link>
-                    </div>
-                </form>
-            </div>
-        </div>
-    );
+    return <LoginForm />;
 }

package/templates/nextjs-web/app/page.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 'use client';
-import { useAuth } from 'wexts/next';
+import { useAuth } from '@/lib/wexts-client';
 import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';

package/templates/nextjs-web/app/register/page.tsx CHANGED Viewed

@@ -1,130 +1,5 @@
-'use client';
-import { useState, FormEvent } from 'react';
-import { useFusion } from 'wexts/next';
-import { useRouter } from 'next/navigation';
-import Link from 'next/link';
+import { RegisterForm } from '@/features/auth';
 export default function RegisterPage() {
-    const [email, setEmail] = useState('');
-    const [password, setPassword] = useState('');
-    const [name, setName] = useState('');
-    const [error, setError] = useState('');
-    const [loading, setLoading] = useState(false);
-    const { client } = useFusion();
-    const router = useRouter();
-    const handleSubmit = async (e: FormEvent) => {
-        e.preventDefault();
-        setError('');
-        setLoading(true);
-        try {
-            const response = await client.post<{ token: string; user: any }>('/auth/register', {
-                email,
-                password,
-                name,
-            });
-            localStorage.setItem('fusion_token', response.token);
-            router.push('/dashboard');
-        } catch (err: any) {
-            setError(err.message || 'Registration failed');
-        } finally {
-            setLoading(false);
-        }
-    };
-    return (
-        <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-violet-50 to-purple-100 dark:from-gray-900 dark:to-gray-800 px-4">
-            <div className="max-w-md w-full space-y-8 bg-white dark:bg-gray-800 p-10 rounded-2xl shadow-xl">
-                <div>
-                    <h2 className="text-center text-4xl font-bold text-gray-900 dark:text-white">
-                        Create Account
-                    </h2>
-                    <p className="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">
-                        Get started with Fusion
-                    </p>
-                </div>
-                <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
-                    {error && (
-                        <div className="rounded-lg bg-red-50 dark:bg-red-900/20 p-4 text-sm text-red-600 dark:text-red-400">
-                            {error}
-                        </div>
-                    )}
-                    <div className="space-y-4">
-                        <div>
-                            <label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                                Name (optional)
-                            </label>
-                            <input
-                                id="name"
-                                name="name"
-                                type="text"
-                                value={name}
-                                onChange={(e) => setName(e.target.value)}
-                                className="appearance-none relative block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent bg-white dark:bg-gray-700 transition"
-                                placeholder="John Doe"
-                            />
-                        </div>
-                        <div>
-                            <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                                Email
-                            </label>
-                            <input
-                                id="email"
-                                name="email"
-                                type="email"
-                                autoComplete="email"
-                                required
-                                value={email}
-                                onChange={(e) => setEmail(e.target.value)}
-                                className="appearance-none relative block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent bg-white dark:bg-gray-700 transition"
-                                placeholder="you@example.com"
-                            />
-                        </div>
-                        <div>
-                            <label htmlFor="password" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                                Password
-                            </label>
-                            <input
-                                id="password"
-                                name="password"
-                                type="password"
-                                autoComplete="new-password"
-                                required
-                                value={password}
-                                onChange={(e) => setPassword(e.target.value)}
-                                className="appearance-none relative block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent bg-white dark:bg-gray-700 transition"
-                                placeholder="••••••••"
-                            />
-                            <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">Minimum 6 characters</p>
-                        </div>
-                    </div>
-                    <div>
-                        <button
-                            type="submit"
-                            disabled={loading}
-                            className="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-semibold rounded-lg text-white bg-violet-600 hover:bg-violet-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-violet-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
-                        >
-                            {loading ? 'Creating account...' : 'Sign up'}
-                        </button>
-                    </div>
-                    <div className="text-center text-sm">
-                        <span className="text-gray-600 dark:text-gray-400">Already have an account? </span>
-                        <Link href="/login" className="font-medium text-violet-600 hover:text-violet-500 dark:text-violet-400">
-                            Sign in
-                        </Link>
-                    </div>
-                </form>
-            </div>
-        </div>
-    );
+    return <RegisterForm />;
 }

package/templates/nextjs-web/components/ui/button.tsx ADDED Viewed

@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+const buttonVariants = cva(
+    "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+    {
+        variants: {
+            variant: {
+                default: "bg-primary text-primary-foreground hover:bg-primary/90",
+                destructive:
+                    "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+                outline:
+                    "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+                secondary:
+                    "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+                ghost: "hover:bg-accent hover:text-accent-foreground",
+                link: "text-primary underline-offset-4 hover:underline",
+            },
+            size: {
+                default: "h-10 px-4 py-2",
+                sm: "h-9 rounded-md px-3",
+                lg: "h-11 rounded-md px-8",
+                icon: "h-10 w-10",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            size: "default",
+        },
+    }
+)
+export interface ButtonProps
+    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+    asChild?: boolean
+}
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+    ({ className, variant, size, asChild = false, ...props }, ref) => {
+        const Comp = asChild ? Slot : "button"
+        return (
+            <Comp
+                className={cn(buttonVariants({ variant, size, className }))}
+                ref={ref}
+                {...props}
+            />
+        )
+    }
+)
+Button.displayName = "Button"
+export { Button, buttonVariants }

package/templates/nextjs-web/components/ui/card.tsx ADDED Viewed

@@ -0,0 +1,79 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+const Card = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn(
+            "rounded-lg border bg-card text-card-foreground shadow-sm",
+            className
+        )}
+        {...props}
+    />
+))
+Card.displayName = "Card"
+const CardHeader = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn("flex flex-col space-y-1.5 p-6", className)}
+        {...props}
+    />
+))
+CardHeader.displayName = "CardHeader"
+const CardTitle = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+    <h3
+        ref={ref}
+        className={cn(
+            "text-2xl font-semibold leading-none tracking-tight",
+            className
+        )}
+        {...props}
+    />
+))
+CardTitle.displayName = "CardTitle"
+const CardDescription = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+    <p
+        ref={ref}
+        className={cn("text-sm text-muted-foreground", className)}
+        {...props}
+    />
+))
+CardDescription.displayName = "CardDescription"
+const CardContent = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+const CardFooter = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn("flex items-center p-6 pt-0", className)}
+        {...props}
+    />
+))
+CardFooter.displayName = "CardFooter"
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

package/templates/nextjs-web/components/ui/input.tsx ADDED Viewed

@@ -0,0 +1,25 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+export interface InputProps
+    extends React.InputHTMLAttributes<HTMLInputElement> { }
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+    ({ className, type, ...props }, ref) => {
+        return (
+            <input
+                type={type}
+                className={cn(
+                    "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+                    className
+                )}
+                ref={ref}
+                {...props}
+            />
+        )
+    }
+)
+Input.displayName = "Input"
+export { Input }

package/templates/nextjs-web/components/ui/label.tsx ADDED Viewed

@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+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"
+)
+const Label = React.forwardRef<
+    React.ElementRef<typeof LabelPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+    <LabelPrimitive.Root
+        ref={ref}
+        className={cn(labelVariants(), className)}
+        {...props}
+    />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+export { Label }

package/templates/nextjs-web/features/auth/LoginForm.tsx ADDED Viewed

@@ -0,0 +1,140 @@
+'use client';
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { login } from './api';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import Link from 'next/link';
+import { Zap, Mail, Lock, ArrowRight, Loader2 } from 'lucide-react';
+export function LoginForm() {
+    const router = useRouter();
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState('');
+    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        setLoading(true);
+        setError('');
+        const formData = new FormData(e.currentTarget);
+        const data = Object.fromEntries(formData.entries());
+        try {
+            await login(data);
+            router.push('/dashboard');
+        } catch (err: any) {
+            console.error(err);
+            setError(err.response?.data?.message || 'Login failed. Please check your credentials.');
+        } finally {
+            setLoading(false);
+        }
+    };
+    return (
+        <div className="min-h-screen flex items-center justify-center relative overflow-hidden bg-background">
+            {/* Animated Background Elements */}
+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
+                <div className="absolute -top-[20%] -left-[10%] w-[50%] h-[50%] rounded-full bg-primary/20 blur-[100px] animate-float" />
+                <div className="absolute top-[40%] -right-[10%] w-[40%] h-[40%] rounded-full bg-indigo-500/20 blur-[100px] animate-float" style={{ animationDelay: '2s' }} />
+                <div className="absolute -bottom-[10%] left-[20%] w-[30%] h-[30%] rounded-full bg-violet-500/20 blur-[100px] animate-float" style={{ animationDelay: '4s' }} />
+            </div>
+            <div className="w-full max-w-md p-8 relative z-10">
+                <Card className="glass border-white/20 shadow-2xl backdrop-blur-xl">
+                    <CardHeader className="text-center">
+                        <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-primary/10 mb-6 mx-auto text-primary">
+                            <Zap className="w-8 h-8" />
+                        </div>
+                        <CardTitle className="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-indigo-600">
+                            Welcome Back
+                        </CardTitle>
+                        <CardDescription>
+                            Sign in to continue to wexts
+                        </CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                        <form onSubmit={handleSubmit} className="space-y-6">
+                            {error && (
+                                <div className="p-4 rounded-xl bg-destructive/10 text-destructive text-sm font-medium border border-destructive/20 animate-pulse-slow flex items-center gap-2">
+                                    <span className="text-lg">⚠️</span>
+                                    {error}
+                                </div>
+                            )}
+                            <div className="space-y-4">
+                                <div className="space-y-2">
+                                    <Label htmlFor="email">Email Address</Label>
+                                    <div className="relative">
+                                        <Mail className="absolute left-3 top-3 w-4 h-4 text-muted-foreground" />
+                                        <Input
+                                            id="email"
+                                            name="email"
+                                            type="email"
+                                            placeholder="name@example.com"
+                                            required
+                                            className="pl-10 bg-secondary/50 border-transparent focus:border-primary/50 focus:bg-background transition-all"
+                                        />
+                                    </div>
+                                </div>
+                                <div className="space-y-2">
+                                    <div className="flex items-center justify-between">
+                                        <Label htmlFor="password">Password</Label>
+                                        <Link href="#" className="text-xs font-medium text-primary hover:text-primary/80 transition-colors">
+                                            Forgot password?
+                                        </Link>
+                                    </div>
+                                    <div className="relative">
+                                        <Lock className="absolute left-3 top-3 w-4 h-4 text-muted-foreground" />
+                                        <Input
+                                            id="password"
+                                            name="password"
+                                            type="password"
+                                            placeholder="••••••••"
+                                            required
+                                            className="pl-10 bg-secondary/50 border-transparent focus:border-primary/50 focus:bg-background transition-all"
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                            <Button
+                                type="submit"
+                                disabled={loading}
+                                className="w-full bg-gradient-to-r from-primary to-indigo-600 hover:from-primary/90 hover:to-indigo-600/90 shadow-lg shadow-primary/25 group"
+                            >
+                                {loading ? (
+                                    <>
+                                        <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                                        Signing in...
+                                    </>
+                                ) : (
+                                    <>
+                                        Sign in
+                                        <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
+                                    </>
+                                )}
+                            </Button>
+                        </form>
+                    </CardContent>
+                    <CardFooter className="justify-center">
+                        <div className="text-center text-sm text-muted-foreground">
+                            Don't have an account?{' '}
+                            <Link href="/register" className="font-semibold text-primary hover:text-primary/80 transition-colors">
+                                Create account
+                            </Link>
+                        </div>
+                    </CardFooter>
+                </Card>
+                <p className="text-center mt-8 text-xs text-muted-foreground/60">
+                    &copy; 2025 wexts Inc. All rights reserved.
+                </p>
+            </div>
+        </div>
+    );
+}