mirror of
https://github.com/simstudioai/sim.git
synced 2026-01-09 23:17:59 -05:00
8c268e23dd
* chore: replace prettier with biome and add linting * chore: update devcontainer settings to use biome for linting and remove eslint, prettier * chore: update docker-compose to use Postgres 17-alpine and standardize quotes * chore: fixed more BUT disabled most rules due to limit * added additional rules, fixed linting & ts errors * added additional rules * rebased & linted * fixed oauth * updated biome & minor modifications --------- Co-authored-by: Aditya Tripathi <aditya@climactic.co>
65 lines
1.6 KiB
TypeScript
65 lines
1.6 KiB
TypeScript
import React from 'react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
export interface OrbitingCirclesProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
className?: string
|
|
children?: React.ReactNode
|
|
reverse?: boolean
|
|
duration?: number
|
|
delay?: number
|
|
radius?: number
|
|
path?: boolean
|
|
iconSize?: number
|
|
speed?: number
|
|
}
|
|
|
|
export function OrbitingCircles({
|
|
className,
|
|
children,
|
|
reverse,
|
|
duration = 20,
|
|
radius = 160,
|
|
path = true,
|
|
iconSize = 30,
|
|
speed = 1,
|
|
...props
|
|
}: OrbitingCirclesProps) {
|
|
const calculatedDuration = duration / speed
|
|
return (
|
|
<>
|
|
{path && (
|
|
<svg
|
|
xmlns='http://www.w3.org/2000/svg'
|
|
version='1.1'
|
|
className='pointer-events-none absolute inset-0 size-full'
|
|
>
|
|
<circle className='stroke-1 stroke-white/10' cx='50%' cy='50%' r={radius} fill='none' />
|
|
</svg>
|
|
)}
|
|
{React.Children.map(children, (child, index) => {
|
|
const angle = (360 / React.Children.count(children)) * index
|
|
return (
|
|
<div
|
|
style={
|
|
{
|
|
'--duration': calculatedDuration,
|
|
'--radius': radius,
|
|
'--angle': angle,
|
|
'--icon-size': `${iconSize}px`,
|
|
} as React.CSSProperties
|
|
}
|
|
className={cn(
|
|
'absolute flex size-[var(--icon-size)] transform-gpu animate-orbit items-center justify-center rounded-full',
|
|
{ '[animation-direction:reverse]': reverse },
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{child}
|
|
</div>
|
|
)
|
|
})}
|
|
</>
|
|
)
|
|
}
|