"use client";

import { ShareTileRow } from "./index";

export interface DemoProps {
  accent?: string;
  uniform?: boolean;
  size?: number;
  gap?: number;
  scale?: number;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ accent = "#FF4D8D", uniform = false, size = 46, gap = 8, scale = 1.1 }: DemoProps) {
  return (
    <div className="flex items-center justify-center p-6">
      <ShareTileRow accent={accent} uniform={uniform} size={size} gap={gap} scale={scale} />
    </div>
  );
}

1d:T1370, 1e:Te92a,

<script setup lang="ts">
import { ref, computed, onMounted, onBeforeUnmount } from "vue";

const props = withDefaults(
  defineProps<{
    accent?: string;
    uniform?: boolean;
    size?: number;
    gap?: number;
    scale?: number;
  }>(),
  { accent: "#FF4D8D", uniform: false, size: 46, gap: 8, scale: 1.1 },
);

interface Tile {
  id: string;
  label: string;
  hue: string;
}

const tiles: Tile[] = [
  { id: "photo", label: "Save photo", hue: "#FF4D8D" },
  { id: "send", label: "Send in a message", hue: "#38BDF8" },
  { id: "embed", label: "Copy embed code", hue: "#15171B" },
  { id: "comment", label: "Open comments", hue: "#7C5CFF" },
];

function hueFor(tile: Tile) {
  return props.uniform ? props.accent : tile.hue;
}

const glyphSize = computed(() => Math.round(props.size * 0.65));

const showcase = ref<number | null>(null);
let timers: number[] = [];

onMounted(() => {
  const calm = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  if (calm) return;
  const runTile = (index: number) => {
    if (index >= tiles.length) return;
    showcase.value = index;
    timers.push(
      window.setTimeout(() => {
        showcase.value = null;
        timers.push(window.setTimeout(() => runTile(index + 1), 220));
      }, 460),
    );
  };
  timers.push(window.setTimeout(() => runTile(0), 500));
});

onBeforeUnmount(() => {
  timers.forEach((t) => window.clearTimeout(t));
});
</script>

<template>
  <div class="share-tile-row" role="group" aria-label="Share" :style="{ gap: gap + 'px' }">
    <button
      v-for="(tile, index) in tiles"
      :key="tile.id"
      type="button"
      class="share-tile"
      :class="{ 'is-showcase': showcase === index }"
      :aria-label="tile.label"
      :title="tile.label"
      :style="{ width: size + 'px', height: size + 'px', '--hue': hueFor(tile), '--scale': scale }"
    >
      <svg
        v-if="tile.id === 'photo'"
        :width="glyphSize"
        :height="glyphSize"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        aria-hidden="true"
      >
        <path d="M8.6 6.6 9.7 4.9a1.4 1.4 0 0 1 1.18-.65h2.24c.47 0 .91.25 1.18.65l1.1 1.7" />
        <rect x="3" y="6.6" width="18" height="12.8" rx="2.3" />
        <circle cx="12" cy="13" r="3.3" />
      </svg>
      <svg
        v-else-if="tile.id === 'send'"
        :width="glyphSize"
        :height="glyphSize"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        aria-hidden="true"
      >
        <path d="M20.3 3.7 3.4 10.3l6.5 2.3Z" />
        <path d="M9.9 12.6 20.3 3.7l-5.8 16.6-4.6-7.7Z" />
      </svg>
      <svg
        v-else-if="tile.id === 'embed'"
        :width="glyphSize"
        :height="glyphSize"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        aria-hidden="true"
      >
        <path d="M9.2 6.2 4.3 12l4.9 5.8" />
        <path d="m14.8 6.2 4.9 5.8-4.9 5.8" />
      </svg>
      <svg
        v-else
        :width="glyphSize"
        :height="glyphSize"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        aria-hidden="true"
      >
        <path d="M4.3 6.9c0-1.24 1-2.24 2.24-2.24h10.92c1.24 0 2.24 1 2.24 2.24v6.9c0 1.24-1 2.24-2.24 2.24h-8.1L5.1 19.3v-3.27H6.54A2.24 2.24 0 0 1 4.3 13.8Z" />
      </svg>
    </button>
  </div>
</template>

<style scoped>
.share-tile-row {
  display: inline-flex;
  align-items: center;
}
.share-tile {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 4px;
  padding: 0;
  cursor: pointer;
  background: color-mix(in srgb, var(--hue) 16%, #f5f6f8);
  color: var(--hue);
  box-shadow:
    inset 0 0 0 1.5px color-mix(in srgb, var(--hue) 46%, transparent),
    0 1px 1px rgba(15, 17, 20, 0.16),
    0 4px 8px -4px rgba(15, 17, 20, 0.32);
  outline: none;
  transition:
    background-color 150ms ease-out,
    color 150ms ease-out,
    box-shadow 150ms ease-out,
    transform 150ms ease-out;
}
.share-tile svg {
  display: block;
  pointer-events: none;
}
.share-tile:hover,
.share-tile:focus-visible,
.share-tile.is-showcase {
  z-index: 1;
  background: var(--hue);
  color: #f5f6f8;
  box-shadow:
    0 2px 3px rgba(15, 17, 20, 0.2),
    0 10px 18px -8px rgba(15, 17, 20, 0.46);
}
.share-tile:focus-visible {
  outline: 2px solid var(--hue);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: no-preference) {
  .share-tile:hover,
  .share-tile:focus-visible,
  .share-tile.is-showcase {
    transform: scale(var(--scale, 1.1));
  }
}
</style>

Nearby