"use client";

import { RisingDiscIconRow } from "./index";

export interface DemoProps {
  accent?: string;
  count?: number;
  hueSpread?: number;
  size?: number;
  lift?: number;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ accent = "#38BDF8", count = 4, hueSpread = 10, size = 48, lift = 32 }: DemoProps) {
  return (
    <div className="flex w-full items-center justify-center p-8">
      <RisingDiscIconRow accent={accent} count={count} hueSpread={hueSpread} size={size} lift={lift} />
    </div>
  );
}

1d:T13e4, 1e:T11746,

<script setup lang="ts">
import { computed } from "vue";

const props = withDefaults(
  defineProps<{
    accent?: string;
    count?: number;
    hueSpread?: number;
    size?: number;
    lift?: number;
  }>(),
  { accent: "#38BDF8", count: 4, hueSpread: 10, size: 48, lift: 32 },
);

interface IconDef {
  label: string;
  d: string;
}

const ICONS: IconDef[] = [
  { label: "Play", d: "M8 5.5 19 12 8 18.5 8 5.5Z" },
  { label: "Like", d: "M12 20s-7-4.35-9.5-9C1 7.5 2.7 4.5 6 4.5c2 0 3.4 1.1 4 2.2.6-1.1 2-2.2 4-2.2 3.3 0 5 3 3.5 6.5-2.5 4.65-9.5 9-9.5 9Z" },
  { label: "Favorite", d: "M12 4.5l2.2 4.6 5 .7-3.6 3.5.9 5-4.5-2.4-4.5 2.4.9-5-3.6-3.5 5-.7L12 4.5Z" },
  { label: "Notify", d: "M7 10a5 5 0 0 1 10 0v4l1.5 3h-13L7 14v-4Z M10 19.5a2 2 0 0 0 4 0" },
  { label: "Save", d: "M7 4h10v16l-5-3.4L7 20V4Z" },
  { label: "Share", d: "M12 15V4M8 8l4-4 4 4M5 13v6a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-6" },
];

function hexToHsl(hex: string) {
  const clean = hex.replace("#", "");
  const r = parseInt(clean.slice(0, 2), 16) / 255;
  const g = parseInt(clean.slice(2, 4), 16) / 255;
  const b = parseInt(clean.slice(4, 6), 16) / 255;
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const l = (max + min) / 2;
  let h = 0;
  let s = 0;
  const d = max - min;
  if (d !== 0) {
    s = d / (1 - Math.abs(2 * l - 1));
    if (max === r) h = ((g - b) / d) % 6;
    else if (max === g) h = (b - r) / d + 2;
    else h = (r - g) / d + 4;
    h *= 60;
    if (h < 0) h += 360;
  }
  return { h, s: s * 100, l: l * 100 };
}

const buttons = computed(() => {
  const base = hexToHsl(props.accent);
  const sat = Math.min(Math.max(base.s, 62), 92);
  const light = Math.min(Math.max(base.l, 46), 58);
  const n = Math.min(Math.max(Math.round(props.count), 2), ICONS.length);
  return Array.from({ length: n }, (_, i) => {
    const hue = (((base.h + i * props.hueSpread) % 360) + 360) % 360;
    return {
      ...ICONS[i],
      disc: `hsl(${hue} ${sat}% ${light}%)`,
      dark: `hsl(${hue} ${Math.min(sat + 6, 94)}% 15%)`,
    };
  });
});

const glyphSize = computed(() => Math.round(props.size * 0.46));
const gap = computed(() => Math.round(props.size / 3));
</script>

<template>
  <div class="rdir-row" :style="{ gap: gap + 'px', paddingTop: lift + 28 + 'px' }">
    <button
      v-for="btn in buttons"
      :key="btn.label"
      type="button"
      class="rdir-btn"
      :aria-label="btn.label"
      :style="{ width: size + 'px', height: size + 'px', '--rdir-disc': btn.disc, '--rdir-dark': btn.dark, '--rdir-lift': lift }"
    >
      <span class="rdir-socket" aria-hidden="true"></span>
      <span class="rdir-shadow" aria-hidden="true"></span>
      <span class="rdir-disc" aria-hidden="true"></span>
      <span class="rdir-ring" aria-hidden="true"></span>
      <svg
        class="rdir-icon"
        aria-hidden="true"
        viewBox="0 0 24 24"
        :width="glyphSize"
        :height="glyphSize"
        fill="none"
        stroke="currentColor"
        stroke-width="1.75"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path :d="btn.d" />
      </svg>
    </button>
  </div>
</template>

<style scoped>
.rdir-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
}
.rdir-btn {
  position: relative;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  border-radius: 9999px;
  outline-offset: 4px;
}
.rdir-socket {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.05);
}
.rdir-shadow {
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 85%;
  height: 32%;
  border-radius: 9999px;
  background: radial-gradient(closest-side, var(--rdir-disc), transparent 75%);
  filter: blur(6px);
  opacity: 0;
  transform: translate(-50%, 0) scale(0.6);
  transition:
    opacity 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.rdir-disc {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: var(--rdir-disc);
  transition:
    transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.rdir-ring {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  border: 2px solid var(--rdir-disc);
  pointer-events: none;
}
.rdir-icon {
  position: relative;
  z-index: 1;
  color: #f8fafc;
  transition: color 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.rdir-btn:hover .rdir-disc,
.rdir-btn:focus-visible .rdir-disc {
  transform: translateY(calc(var(--rdir-lift) * -1px));
}
.rdir-btn:hover .rdir-shadow,
.rdir-btn:focus-visible .rdir-shadow {
  opacity: 0.55;
  transform: translate(-50%, 0) scale(1);
}
.rdir-btn:hover .rdir-icon,
.rdir-btn:focus-visible .rdir-icon {
  color: var(--rdir-dark);
}
.rdir-btn:active .rdir-disc {
  transform: translateY(calc(var(--rdir-lift) * -0.5px));
}
@media (prefers-reduced-motion: reduce) {
  .rdir-btn:hover .rdir-disc,
  .rdir-btn:focus-visible .rdir-disc,
  .rdir-btn:active .rdir-disc {
    transform: none;
    opacity: 0;
  }
  .rdir-shadow {
    display: none;
  }
}
</style>

Nearby