xlibs-components/dist/components/ui/button-hover-test.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 { UnifiedButton } from '../../components/magicui/unified-button.js';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../components/ui/card.js';
export function ButtonHoverTest() {
    return (_jsx("div", { className: "space-y-8 p-6", children: _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Button Hover Text Visibility Test" }), _jsx(CardDescription, { children: "All buttons should have visible text on hover. Test each variant by hovering over the buttons." })] }), _jsxs(CardContent, { className: "space-y-6", children: [_jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "Shadcn/UI Button Variants" }), _jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsx(Button, { variant: "default", children: "Default" }), _jsx(Button, { variant: "destructive", children: "Destructive" }), _jsx(Button, { variant: "outline", children: "Outline" }), _jsx(Button, { variant: "secondary", children: "Secondary" }), _jsx(Button, { variant: "ghost", children: "Ghost" }), _jsx(Button, { variant: "link", children: "Link" })] })] }), _jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "UnifiedButton Variants" }), _jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsx(UnifiedButton, { variant: "default", children: "Default" }), _jsx(UnifiedButton, { variant: "destructive", children: "Destructive" }), _jsx(UnifiedButton, { variant: "outline", children: "Outline" }), _jsx(UnifiedButton, { variant: "secondary", children: "Secondary" }), _jsx(UnifiedButton, { variant: "ghost", children: "Ghost" }), _jsx(UnifiedButton, { variant: "link", children: "Link" }), _jsx(UnifiedButton, { variant: "magic", children: "Magic" }), _jsx(UnifiedButton, { variant: "glass", children: "Glass" }), _jsx(UnifiedButton, { variant: "neon", children: "Neon" }), _jsx(UnifiedButton, { variant: "shiny", children: "Shiny" }), _jsx(UnifiedButton, { variant: "pulsating", children: "Pulsating" }), _jsx(UnifiedButton, { variant: "interactive", children: "Interactive" })] })] }), _jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "Button Sizes" }), _jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [_jsx(Button, { size: "sm", children: "Small" }), _jsx(Button, { size: "default", children: "Default" }), _jsx(Button, { size: "lg", children: "Large" }), _jsx(Button, { size: "icon", children: "\uD83D\uDD0D" })] })] }), _jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "UnifiedButton Sizes" }), _jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [_jsx(UnifiedButton, { size: "sm", children: "Small" }), _jsx(UnifiedButton, { size: "default", children: "Default" }), _jsx(UnifiedButton, { size: "lg", children: "Large" }), _jsx(UnifiedButton, { size: "magic", children: "Magic" }), _jsx(UnifiedButton, { size: "xl", children: "Extra Large" }), _jsx(UnifiedButton, { size: "icon", children: "\uD83D\uDD0D" })] })] }), _jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "UnifiedButton Effects" }), _jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsx(UnifiedButton, { effect: "ripple", children: "Ripple" }), _jsx(UnifiedButton, { effect: "shine", children: "Shine" }), _jsx(UnifiedButton, { effect: "pulse", children: "Pulse" }), _jsx(UnifiedButton, { effect: "glow", children: "Glow" }), _jsx(UnifiedButton, { effect: "scale", children: "Scale" }), _jsx(UnifiedButton, { effect: "bounce", children: "Bounce" })] })] }), _jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "Loading States" }), _jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsx(UnifiedButton, { loading: true, children: "Loading" }), _jsx(UnifiedButton, { variant: "outline", loading: true, children: "Loading" }), _jsx(UnifiedButton, { variant: "ghost", loading: true, children: "Loading" })] })] })] })] }) }));
}