miguel
cab84e15cb
- Updated the Dashboard component to simplify layout and styling. - Enhanced IconCircle component with improved CSS for better alignment and display. - Refactored global styles for consistency and clarity. - Improved LandingBody component to utilize Link for navigation. - Revamped Header component to manage navigation state more effectively. - Implemented a new LoginPage component for user authentication. - Introduced useSession hook for managing user session state. - Updated CargaArchivo component to use a consistent Button component. - Enhanced Consulta component for better error handling and display. - Cleaned up Footer component styling and structure.
93 lines
2.2 KiB
TypeScript
93 lines
2.2 KiB
TypeScript
// IconCircle.tsx
|
|
"use client";
|
|
import React from "react";
|
|
import { motion } from "framer-motion";
|
|
import "./IconCircle.css";
|
|
|
|
const iconClasses = [
|
|
"bi bi-graph-up",
|
|
"bi bi-lightning-fill",
|
|
"bi bi-currency-exchange",
|
|
"bi bi-globe2",
|
|
"bi bi-bar-chart-line-fill",
|
|
"bi bi-arrow-left-right",
|
|
"bi bi-bank",
|
|
"bi bi-boxes",
|
|
];
|
|
|
|
interface IconCircleProps {
|
|
delay?: number;
|
|
}
|
|
|
|
const IconCircle: React.FC<IconCircleProps> = ({ delay = 0 }) => {
|
|
return (
|
|
<div className="icon-circle">
|
|
{/* Icono central fijo */}
|
|
<motion.div
|
|
className="central-icon"
|
|
initial={{ scale: 0 }}
|
|
animate={{ scale: 1 }}
|
|
transition={{ duration: 1, delay }}
|
|
>
|
|
<i className="bi bi-stars"></i>
|
|
</motion.div>
|
|
|
|
{/* Contenedor que orbita con los iconos flotantes */}
|
|
<motion.div
|
|
className="orbiting-container"
|
|
animate={{ rotate: 360 }}
|
|
transition={{
|
|
duration: 30,
|
|
repeat: Infinity,
|
|
ease: "linear",
|
|
}}
|
|
>
|
|
{iconClasses.map((iconClass, i) => {
|
|
const angle = i * 45 * (Math.PI / 180); // Convertir a radianes
|
|
const radius = 130;
|
|
const x = Math.cos(angle) * radius;
|
|
const y = Math.sin(angle) * radius;
|
|
|
|
return (
|
|
<motion.div
|
|
key={i}
|
|
className="floating-icon"
|
|
style={{
|
|
left: x,
|
|
top: y,
|
|
}}
|
|
initial={{
|
|
scale: 0,
|
|
opacity: 0,
|
|
}}
|
|
animate={{
|
|
scale: 1,
|
|
opacity: 1,
|
|
}}
|
|
transition={{
|
|
delay: delay + 0.5 + i * 0.1,
|
|
duration: 0.5,
|
|
type: "spring",
|
|
}}
|
|
>
|
|
<motion.i
|
|
className={iconClass}
|
|
animate={{
|
|
rotate: 360,
|
|
}}
|
|
transition={{
|
|
duration: 20 + i * 2,
|
|
repeat: Infinity,
|
|
ease: "linear",
|
|
}}
|
|
></motion.i>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default IconCircle;
|