orbit-rotation

1"use client"
2 
3import type React from "react"
4import {
5  FaApple,
6  FaAws,
7  FaDocker,
8  FaGithub,
9  FaGoogle,
10  FaInstagram,
11  FaLinkedin,
12  FaNodeJs,
13  FaReact,
14  FaTwitter,
15} from "react-icons/fa"
16import {
17  SiFacebook,
18  SiNextdotjs,
19  SiRedux,
20  SiTypescript,
21  SiVercel,
22} from "react-icons/si"
23 
24import { cn } from "@/lib/utils"
25 
26interface OrbitIcon {
27  Icon: React.ComponentType<{ className?: string }>
28  name?: string
29}
30 
31interface OrbitRotationProps {
32  icons?: OrbitIcon[]
33  orbitCount?: number
34  orbitGap?: number
35  centerIcon?: OrbitIcon
36  className?: string
37  size?: "sm" | "md" | "lg"
38}
39 
40const defaultIcons: OrbitIcon[] = [
41  { Icon: FaReact, name: "React" },
42  { Icon: FaAws, name: "AWS" },
43  { Icon: FaDocker, name: "Docker" },
44  { Icon: FaNodeJs, name: "Node.js" },
45  { Icon: SiNextdotjs, name: "Next.js" },
46  { Icon: SiVercel, name: "Vercel" },
47  { Icon: SiRedux, name: "Redux" },
48  { Icon: SiTypescript, name: "TypeScript" },
49  { Icon: FaGithub, name: "GitHub" },
50  { Icon: FaTwitter, name: "Twitter" },
51  { Icon: FaLinkedin, name: "LinkedIn" },
52  { Icon: FaInstagram, name: "Instagram" },
53  { Icon: FaGoogle, name: "Google" },
54  { Icon: FaApple, name: "Apple" },
55  { Icon: SiFacebook, name: "Facebook" },
56]
57 
58const defaultCenterIcon: OrbitIcon = {
59  Icon: FaReact,
60  name: "React",
61}
62 
63export function OrbitRotation({
64  icons = defaultIcons,
65  orbitCount = 3,
66  orbitGap = 6,
67  centerIcon = defaultCenterIcon,
68  className,
69  size = "md",
70  ...props
71}: OrbitRotationProps) {
72  const iconsPerOrbit = Math.ceil(icons.length / orbitCount)
73 
74  const sizeClasses = {
75    sm: "w-16 h-16",
76    md: "w-24 h-24",
77    lg: "w-32 h-32",
78  }
79 
80  const iconSizeClasses = {
81    sm: "w-6 h-6",
82    md: "w-8 h-8",
83    lg: "w-10 h-10",
84  }
85 
86  return (
87    <div
88      className={cn("relative flex items-center justify-center", className)}
89      {...props}
90    >
91      <div className="relative flex items-center justify-center">
92        {/* Center Icon */}
93        <div
94          className={cn(
95            "bg-background/90 border-border/50 flex items-center justify-center rounded-full border shadow-xl backdrop-blur-sm",
96            sizeClasses[size]
97          )}
98        >
99          <centerIcon.Icon className={cn(iconSizeClasses[size])} />
100        </div>
101 
102        {/* Generate Orbits */}
103        {[...Array(orbitCount)].map((_, orbitIdx) => {
104          const orbitSize = `${8 + orbitGap * (orbitIdx + 1)}rem`
105          const angleStep = (2 * Math.PI) / iconsPerOrbit
106// … truncated