icon-wheel

1'use client';
2 
3import React from 'react';
4import { motion } from 'framer-motion';
5import Image from 'next/image';
6import { cn } from '@/lib/utils';
7 
8type IconWheelProps = {
9    icons: Array<string>;
10    radius?: number;
11    iconSize?: number;
12    duration?: number;
13    className?: string;
14};
15 
16export function IconWheel({
17    icons,
18    radius = 120,
19    iconSize = 40,
20    duration = 20,
21    className
22}: IconWheelProps) {
23    const angleStep = (2 * Math.PI) / icons.length;
24    const containerSize = radius * 2 + iconSize + 60;
25    const center = containerSize / 2;
26 
27    return (
28        <div
29            className={cn(
30                'relative',
31                className
32            )}
33            style={{
34                width: containerSize,
35                height: containerSize,
36            }}
37        >
38            {/* Subtle orbit path - monochrome */}
39            <div
40                className="absolute rounded-full border border-neutral-300 dark:border-zinc-700"
41                style={{
42                    width: radius * 2,
43                    height: radius * 2,
44                    left: center - radius,
45                    top: center - radius,
46                }}
47            />
48 
49            {/* Center Logo - ObsidianUI Crystal */}
50            <div
51                className="absolute z-10 flex items-center justify-center"
52                style={{
53                    left: center - 24,
54                    top: center - 28,
55                    width: 48,
56                    height: 56,
57                }}
58            >
59                <Image
60                    src="/logo/bg-less.png"
61                    alt="ObsidianUI"
62                    width={48}
63                    height={56}
64                    className="object-contain drop-shadow-lg"
65                />
66            </div>
67 
68            {/* Rotating container */}
69            <motion.div
70                className="absolute inset-0"
71                animate={{ rotate: 360 }}
72                transition={{
73                    duration: duration,
74                    ease: 'linear',
75                    repeat: Infinity
76                }}
77            >
78                {icons.map((url, i) => {
79                    const angle = i * angleStep - Math.PI / 2; // Start from top
80                    const x = center + Math.cos(angle) * radius - (iconSize + 16) / 2;
81                    const y = center + Math.sin(angle) * radius - (iconSize + 16) / 2;
82 
83                    return (
84// … truncated