"use client" import type React from "react" import { FaApple, FaAws, FaDocker, FaGithub, FaGoogle, FaInstagram, FaLinkedin, FaNodeJs, FaReact, FaTwitter, } from "react-icons/fa" import { SiFacebook, SiNextdotjs, SiRedux, SiTypescript, SiVercel, } from "react-icons/si" import { cn } from "@/lib/utils" interface OrbitIcon { Icon: React.ComponentType<{ className?: string }> name?: string } interface OrbitRotationProps { icons?: OrbitIcon[] orbitCount?: number orbitGap?: number centerIcon?: OrbitIcon className?: string size?: "sm" | "md" | "lg" } const defaultIcons: OrbitIcon[] = [ { Icon: FaReact, name: "React" }, { Icon: FaAws, name: "AWS" }, { Icon: FaDocker, name: "Docker" }, { Icon: FaNodeJs, name: "Node.js" }, { Icon: SiNextdotjs, name: "Next.js" }, { Icon: SiVercel, name: "Vercel" }, { Icon: SiRedux, name: "Redux" }, { Icon: SiTypescript, name: "TypeScript" }, { Icon: FaGithub, name: "GitHub" }, { Icon: FaTwitter, name: "Twitter" }, { Icon: FaLinkedin, name: "LinkedIn" }, { Icon: FaInstagram, name: "Instagram" }, { Icon: FaGoogle, name: "Google" }, { Icon: FaApple, name: "Apple" }, { Icon: SiFacebook, name: "Facebook" }, ] const defaultCenterIcon: OrbitIcon = { Icon: FaReact, name: "React", } export function OrbitRotation({ icons = defaultIcons, orbitCount = 3, orbitGap = 6, centerIcon = defaultCenterIcon, className, size = "md", ...props }: OrbitRotationProps) { const iconsPerOrbit = Math.ceil(icons.length / orbitCount) const sizeClasses = { sm: "w-16 h-16", md: "w-24 h-24", lg: "w-32 h-32", } const iconSizeClasses = { sm: "w-6 h-6", md: "w-8 h-8", lg: "w-10 h-10", } return (

{/* Center Icon */}

{/* Generate Orbits */} {[...Array(orbitCount)].map((_, orbitIdx) => { const orbitSize = `${8 + orbitGap * (orbitIdx + 1)}rem` const angleStep = (2 * Math.PI) / iconsPerOrbit const animationDuration = `${12 + orbitIdx * 6}s` return (

{icons .slice( orbitIdx * iconsPerOrbit, orbitIdx * iconsPerOrbit + iconsPerOrbit ) .map((iconConfig, iconIdx) => { const angle = iconIdx * angleStep const x = 50 + 50 * Math.cos(angle) const y = 50 + 50 * Math.sin(angle) return (

) })}

) }

orbit-rotation

Instalação

Dependências

Registry dependencies