c649f055d8
- Added main application entry point (app.jsx) and bootstrap file for React setup. - Created Wiki index page (Index.jsx) for documentation and file management. - Implemented utility functions for formatting and status handling in utils.js. - Set up Blade template (app.blade.php) for Inertia.js integration. - Defined API routes for metrics and terminal access in api.php. - Established console commands for scheduled tasks in console.php. - Created web routes for various application features including authentication, hypervisors, containers, cloud accounts, security, backups, and wiki management in web.php. - Developed setup scripts for Windows (setup.ps1) and Linux (setup.sh) environments. - Configured Tailwind CSS for styling with custom themes and animations in tailwind.config.js. - Set up Vite for asset bundling and development server in vite.config.js.
43 lines
1.8 KiB
JavaScript
43 lines
1.8 KiB
JavaScript
import { motion } from 'framer-motion';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export function Button({ children, variant = 'primary', size = 'md', className, loading, icon: Icon, ...props }) {
|
|
const variants = {
|
|
primary: 'bg-cyan-500 hover:bg-cyan-400 text-black font-semibold shadow-[0_0_20px_rgba(0,212,255,0.3)] hover:shadow-[0_0_30px_rgba(0,212,255,0.5)]',
|
|
secondary: 'bg-white/10 hover:bg-white/15 text-white border border-white/20',
|
|
danger: 'bg-red-500/20 hover:bg-red-500/30 text-red-400 border border-red-500/30',
|
|
ghost: 'hover:bg-white/5 text-white/70 hover:text-white',
|
|
outline: 'border border-cyan-500/50 text-cyan-400 hover:bg-cyan-500/10',
|
|
};
|
|
const sizes = {
|
|
sm: 'h-7 px-3 text-xs gap-1.5',
|
|
md: 'h-9 px-4 text-sm gap-2',
|
|
lg: 'h-11 px-6 text-base gap-2',
|
|
icon: 'h-9 w-9 p-0',
|
|
};
|
|
|
|
return (
|
|
<motion.button
|
|
whileTap={{ scale: 0.97 }}
|
|
className={cn(
|
|
'inline-flex items-center justify-center rounded-lg transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
|
|
variants[variant],
|
|
sizes[size],
|
|
className
|
|
)}
|
|
disabled={loading || props.disabled}
|
|
{...props}
|
|
>
|
|
{loading ? (
|
|
<svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
|
</svg>
|
|
) : Icon ? (
|
|
<Icon className="w-4 h-4" />
|
|
) : null}
|
|
{size !== 'icon' && children}
|
|
</motion.button>
|
|
);
|
|
}
|