xlibs-components/dist/components/ui/login-page.js

Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications

"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from "react";
import { LoginForm } from '../../components/login-form.js';
import { cn } from '../../lib/utils.js';
const LoginPage = React.forwardRef(({ className, children, showLogo = false, logo, title = "Welcome back", subtitle = "Sign in to your account", maxWidth = "3xl", background = "default", backgroundImage, showBackgroundImage = false, ...props }, ref) => {
    const backgroundClasses = {
        default: "bg-muted",
        gradient: "bg-gradient-to-br from-blue-50 via-white to-purple-50",
        pattern: "bg-muted bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-sky-400 to-blue-800"
    };
    const maxWidthClasses = {
        sm: "max-w-sm",
        md: "max-w-md",
        lg: "max-w-lg",
        xl: "max-w-xl",
        "2xl": "max-w-2xl",
        "3xl": "max-w-3xl",
        "4xl": "max-w-4xl",
        "5xl": "max-w-5xl",
        "6xl": "max-w-6xl",
        "7xl": "max-w-7xl"
    };
    return (_jsxs("div", { ref: ref, className: cn("flex min-h-svh flex-col items-center justify-center p-4 md:p-6 relative", backgroundClasses[background], className), ...props, children: [showBackgroundImage && (_jsxs("div", { className: "absolute inset-0 z-0", children: [_jsx("img", { src: backgroundImage || "https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2015&q=80", alt: "Background", className: "w-full h-full object-cover opacity-20" }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-blue-50/80 via-white/80 to-purple-50/80" })] })), _jsxs("div", { className: cn("w-full relative z-10", maxWidthClasses[maxWidth]), children: [showLogo && (_jsxs("div", { className: "mb-4 text-center", children: [logo ? (_jsx("div", { className: "flex justify-center mb-2", children: logo })) : (_jsxs("div", { className: "flex items-center justify-center gap-3 mb-2", children: [_jsx("div", { className: "w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center shadow-lg", children: _jsx("span", { className: "text-white font-bold text-base", children: "\uD83D\uDD37" }) }), _jsx("h1", { className: "text-xl font-bold text-gray-900", children: "Enterprise BI" })] })), _jsx("p", { className: "text-sm text-gray-600", children: subtitle })] })), children || _jsx(LoginForm, {})] })] }));
});
LoginPage.displayName = "LoginPage";
export { LoginPage };