import * as React from "react" import { cn } from "@/lib/utils" export interface OrbitProps extends Omit, "children"> { /** The items that circle around the center, spread evenly on the ring. */ children?: React.ReactNode /** What sits in the middle. It can be another Orbit. */ center?: React.ReactNode /** Diameter of the ring, as a CSS length. */ size?: string /** Duration of one turn, as a CSS time. */ duration?: string /** Turn counter-clockwise. */ reverse?: boolean /** Draw the ring. */ ring?: boolean } /** * Items that circle around a center while staying upright, to show what * connects to a product. Nest an Orbit in `center` for a second ring. The * items stand still on their ring under reduced motion. */ export function Orbit({ children, center, className, size = "16rem", duration = "30s", reverse = false, ring = true, style, ...props }: OrbitProps) { const items = React.Children.toArray(children) return (

{ring &&

} {center &&

{center}

}

{items.map((item, index) => { // Start at the top, then go round clockwise. const angle = (2 * Math.PI * index) / items.length - Math.PI / 2 return (

{/* Turns the other way at the same speed, so the item stays upright. */}

{item}

) })}

) }