jorgemike
107 lines
2.7 KiB
TypeScript
107 lines
2.7 KiB
TypeScript
// IconCircle.tsx
|
|
"use client";
|
|
import React from "react";
|
|
import { motion } from "framer-motion";
|
|
import "./IconCircle.css";
|
|
import red from "@/assets/pngs/1.png";
|
|
import equipos from "@/assets/pngs/2.png";
|
|
import correo from "@/assets/pngs/3.png";
|
|
import desarrolla from "@/assets/pngs/4.png";
|
|
import cedetec from "@/assets/pngs/5.png";
|
|
import Image from "next/image";
|
|
|
|
const iconImages = [red, equipos, correo, desarrolla, cedetec];
|
|
|
|
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",
|
|
}}
|
|
>
|
|
{iconImages.map((iconClass, i) => {
|
|
const angle = i * 70 * (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.div
|
|
animate={{
|
|
rotate: 360,
|
|
}}
|
|
transition={{
|
|
duration: 20 + i * 2,
|
|
repeat: Infinity,
|
|
ease: "linear",
|
|
}}
|
|
>
|
|
<Image
|
|
src={iconClass}
|
|
alt={`Icon ${i + 1}`}
|
|
width={64}
|
|
height={64}
|
|
/>
|
|
</motion.div>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default IconCircle;
|