xlibs-components/dist/components/magicui/border-beam-example.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 { Button } from '../../components/ui/button.js';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from '../../components/ui/card.js';
import { Input } from '../../components/ui/input.js';
import { Label } from '../../components/ui/label.js';
import { BorderBeam } from "./border-beam";
// Basic usage - matches your original code
export function BasicBorderBeamExample() {
    return (_jsxs(Card, { className: "relative w-[350px] overflow-hidden", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Login" }), _jsx(CardDescription, { children: "Enter your credentials to access your account." })] }), _jsx(CardContent, { children: _jsx("form", { children: _jsxs("div", { className: "grid w-full items-center gap-4", children: [_jsxs("div", { className: "flex flex-col space-y-1.5", children: [_jsx(Label, { htmlFor: "email", children: "Email" }), _jsx(Input, { id: "email", type: "email", placeholder: "Enter your email" })] }), _jsxs("div", { className: "flex flex-col space-y-1.5", children: [_jsx(Label, { htmlFor: "password", children: "Password" }), _jsx(Input, { id: "password", type: "password", placeholder: "Enter your password" })] })] }) }) }), _jsxs(CardFooter, { className: "flex justify-between", children: [_jsx(Button, { variant: "outline", children: "Register" }), _jsx(Button, { children: "Login" })] }), _jsx(BorderBeam, { duration: 8, size: 100 })] }));
}
// Fast animation with custom color
export function FastBorderBeamExample() {
    return (_jsxs(Card, { className: "relative w-[350px] overflow-hidden", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Quick Login" }), _jsx(CardDescription, { children: "Fast and secure authentication." })] }), _jsx(CardContent, { children: _jsx("form", { children: _jsxs("div", { className: "grid w-full items-center gap-4", children: [_jsxs("div", { className: "flex flex-col space-y-1.5", children: [_jsx(Label, { htmlFor: "email", children: "Email" }), _jsx(Input, { id: "email", type: "email", placeholder: "Enter your email" })] }), _jsxs("div", { className: "flex flex-col space-y-1.5", children: [_jsx(Label, { htmlFor: "password", children: "Password" }), _jsx(Input, { id: "password", type: "password", placeholder: "Enter your password" })] })] }) }) }), _jsxs(CardFooter, { className: "flex justify-between", children: [_jsx(Button, { variant: "outline", children: "Register" }), _jsx(Button, { children: "Login" })] }), _jsx(BorderBeam, { duration: 2, color: "#10b981", borderWidth: 3, delay: 1 })] }));
}
// Purple theme with custom border radius
export function PurpleBorderBeamExample() {
    return (_jsxs(Card, { className: "relative w-[350px] overflow-hidden", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Premium Login" }), _jsx(CardDescription, { children: "Access premium features and content." })] }), _jsx(CardContent, { children: _jsx("form", { children: _jsxs("div", { className: "grid w-full items-center gap-4", children: [_jsxs("div", { className: "flex flex-col space-y-1.5", children: [_jsx(Label, { htmlFor: "email", children: "Email" }), _jsx(Input, { id: "email", type: "email", placeholder: "Enter your email" })] }), _jsxs("div", { className: "flex flex-col space-y-1.5", children: [_jsx(Label, { htmlFor: "password", children: "Password" }), _jsx(Input, { id: "password", type: "password", placeholder: "Enter your password" })] })] }) }) }), _jsxs(CardFooter, { className: "flex justify-between", children: [_jsx(Button, { variant: "outline", children: "Register" }), _jsx(Button, { children: "Login" })] }), _jsx(BorderBeam, { duration: 6, color: "#8b5cf6", borderRadius: 16, borderWidth: 2 })] }));
}
// Orange theme with slow animation
export function OrangeBorderBeamExample() {
    return (_jsxs(Card, { className: "relative w-[350px] overflow-hidden", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Enterprise Login" }), _jsx(CardDescription, { children: "Secure enterprise authentication system." })] }), _jsx(CardContent, { children: _jsx("form", { children: _jsxs("div", { className: "grid w-full items-center gap-4", children: [_jsxs("div", { className: "flex flex-col space-y-1.5", children: [_jsx(Label, { htmlFor: "email", children: "Email" }), _jsx(Input, { id: "email", type: "email", placeholder: "Enter your email" })] }), _jsxs("div", { className: "flex flex-col space-y-1.5", children: [_jsx(Label, { htmlFor: "password", children: "Password" }), _jsx(Input, { id: "password", type: "password", placeholder: "Enter your password" })] })] }) }) }), _jsxs(CardFooter, { className: "flex justify-between", children: [_jsx(Button, { variant: "outline", children: "Register" }), _jsx(Button, { children: "Login" })] }), _jsx(BorderBeam, { duration: 12, color: "#f59e0b", borderWidth: 1, delay: 2 })] }));
}