orbit-rotation-demo

1"use client"
2 
3import {
4  FaApple,
5  FaAws,
6  FaDocker,
7  FaGithub,
8  FaGoogle,
9  FaInstagram,
10  FaLinkedin,
11  FaNodeJs,
12  FaReact,
13  FaTwitter,
14} from "react-icons/fa"
15import {
16  SiFacebook,
17  SiNextdotjs,
18  SiRedux,
19  SiTypescript,
20  SiVercel,
21} from "react-icons/si"
22 
23import { OGLogo } from "@/components/og-logo"
24import { OrbitRotation } from "@/registry/eldoraui/orbit-rotation"
25 
26export function OrbitRotationDemo() {
27  const techIcons = [
28    { Icon: FaReact, name: "React" },
29    { Icon: FaAws, name: "AWS" },
30    { Icon: FaDocker, name: "Docker" },
31    { Icon: FaNodeJs, name: "Node.js" },
32    { Icon: SiNextdotjs, name: "Next.js" },
33    { Icon: SiVercel, name: "Vercel" },
34    { Icon: SiRedux, name: "Redux" },
35    { Icon: SiTypescript, name: "TypeScript" },
36    { Icon: FaGithub, name: "GitHub" },
37    { Icon: FaTwitter, name: "Twitter" },
38    { Icon: FaLinkedin, name: "LinkedIn" },
39    { Icon: FaInstagram, name: "Instagram" },
40    { Icon: FaGoogle, name: "Google" },
41    { Icon: FaApple, name: "Apple" },
42    { Icon: SiFacebook, name: "Facebook" },
43  ]
44 
45  const centerIcon = {
46    Icon: ({ className }: { className?: string }) => (
47      <div className={className}>
48        <OGLogo width={32} height={32} />
49      </div>
50    ),
51    name: "EldoraUI",
52  }
53 
54  return (
55    <div className="bg-background relative h-[500px] w-full overflow-hidden rounded-lg border p-8">
56      <div className="flex h-full items-center justify-center">
57        <OrbitRotation
58          icons={techIcons}
59          orbitCount={3}
60          orbitGap={6}
61          centerIcon={centerIcon}
62          size="md"
63        />
64      </div>
65    </div>
66  )
67}