Radial Radial Menu

'use client';

import type { CSSProperties } from 'react';
import './RadialIconMenu.css';

/** RadialIconMenu — ported from astro-component-kit. */
export interface RadialIconMenuProps {
}

export function RadialIconMenu({}: RadialIconMenuProps) {
  return (
    <>
      <div className="radial-wrap" data-rk-e0eadf="">
        <div className="toggle" data-rk-e0eadf="">+</div>
        <div className="icons" data-rk-e0eadf="">
          <div style={{ '--i': "1" } as CSSProperties} data-rk-e0eadf="">📷</div>
          <div style={{ '--i': "2" } as CSSProperties} data-rk-e0eadf="">📁</div>
          <div style={{ '--i': "3" } as CSSProperties} data-rk-e0eadf="">✉️</div>
        </div>
      </div>
    </>
  );
}

export default RadialIconMenu;

/* RadialIconMenu — ported from astro-component-kit (navigation/RadialIconMenu.astro) */

.radial-wrap:where([data-rk-e0eadf]) { position: relative; width: 60px; height: 60px; background: #6366f1; border-radius: 50%; display: grid; place-items: center; color: #fff; cursor: pointer; }
.icons:where([data-rk-e0eadf]) div:where([data-rk-e0eadf]) { position: absolute; left: 0; transform-origin: 30px; transition: 0.5s; transition-delay: calc(0.1s * var(--i)); transform: rotate(0deg) translateX(0px); opacity: 0; pointer-events: none; }
.radial-wrap:hover:where([data-rk-e0eadf]) .icons:where([data-rk-e0eadf]) div:where([data-rk-e0eadf]) { transform: rotate(calc(360deg / 8 * var(--i))) translateX(80px); opacity: 1; pointer-events: auto; }