"use client";

import { FlightPathConfirmButton } from "./index";

export interface DemoProps {
  label?: string;
  doneLabel?: string;
  accent?: string;
  successColor?: string;
  duration?: number;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({
  label = "Buy a ticket",
  doneLabel = "Confirmed",
  accent = "#4C46C8",
  successColor = "#31CB20",
  duration = 4,
}: DemoProps) {
  return (
    <div className="flex flex-wrap items-center justify-center gap-5 p-8">
      <FlightPathConfirmButton
        label={label}
        doneLabel={doneLabel}
        accent={accent}
        successColor={successColor}
        duration={duration}
        autoPlay
      />
      <FlightPathConfirmButton
        label="Hold my seat"
        doneLabel="All set"
        accent={accent}
        successColor={successColor}
        duration={duration}
      />
    </div>
  );
}

1d:T1476, 1e:T11735,

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

const props = withDefaults(
  defineProps<{
    label?: string;
    doneLabel?: string;
    accent?: string;
    successColor?: string;
    duration?: number;
  }>(),
  { label: "Buy a ticket", doneLabel: "Confirmed", accent: "#4C46C8", successColor: "#31CB20", duration: 4 },
);

type Status = "idle" | "running" | "done";

const status = ref<Status>("idle");
const runId = ref(0);
const reduced = ref(false);

let media: MediaQueryList | null = null;
let completionTimer = 0;

const fill = computed(() => (status.value === "done" ? props.successColor : props.accent));

function onMediaChange(event: MediaQueryListEvent) {
  reduced.value = event.matches;
}

onMounted(() => {
  media = window.matchMedia("(prefers-reduced-motion: reduce)");
  reduced.value = media.matches;
  media.addEventListener("change", onMediaChange);
});

onUnmounted(() => {
  media?.removeEventListener("change", onMediaChange);
  window.clearTimeout(completionTimer);
});

function activate() {
  if (status.value === "running") return;
  if (status.value === "done") {
    status.value = "idle";
    return;
  }
  runId.value += 1;
  status.value = "running";
  window.clearTimeout(completionTimer);
  completionTimer = window.setTimeout(() => {
    status.value = "done";
  }, props.duration * 1000);
}
</script>

<template>
  <button
    type="button"
    class="fp-button"
    :class="{ 'fp-button--running': status === 'running', 'fp-button--done': status === 'done' }"
    :style="{ backgroundColor: fill, boxShadow: '0 16px 32px -16px ' + fill, '--fp-duration': duration * 1000 + 'ms' }"
    :aria-busy="status === 'running'"
    @click="activate"
  >
    <span v-if="status === 'running' && !reduced" :key="runId" aria-hidden="true" class="fp-plane">
      <svg viewBox="0 0 24 24" class="fp-plane__glyph">
        <path
          d="M23 12 L20 11.3 L15.5 11.3 L10 4.8 L8.6 5.2 L12.2 11.4 L7.5 11.5 L4.6 9 L3.8 9.3 L5.8 11.6 L6.2 12 L5.8 12.4 L3.8 14.7 L4.6 15 L7.5 12.5 L12.2 12.6 L8.6 18.8 L10 19.2 L15.5 12.7 L20 12.7 L23 12 Z"
          fill="#FFFFFF"
          stroke="rgba(11,13,16,0.5)"
          stroke-width="0.75"
          stroke-linejoin="round"
        />
      </svg>
    </span>
    <span class="fp-center">
      <span v-if="status === 'running'" class="fp-dots" aria-hidden="true">
        <i class="fp-dot"></i>
        <i class="fp-dot"></i>
        <i class="fp-dot"></i>
      </span>
      <span v-else class="fp-label">{{ status === "done" ? doneLabel : label }}</span>
    </span>
    <span class="fp-status" role="status">{{ status === "done" ? doneLabel : "" }}</span>
  </button>
</template>

<style scoped>
.fp-button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  width: 180px;
  height: 55px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  color: #fff;
  font: 500 15px/1 system-ui, sans-serif;
  letter-spacing: 0.08em;
  cursor: pointer;
  user-select: none;
  outline: none;
  transition: background-color 350ms ease, box-shadow 350ms ease, filter 160ms ease;
}
.fp-button:not(.fp-button--running):not(.fp-button--done):hover {
  filter: brightness(1.1);
}
.fp-button:focus-visible {
  outline: 2px solid rgb(255 255 255 / 0.85);
  outline-offset: 2px;
}
.fp-plane {
  position: absolute;
  left: -22px;
  top: 32px;
  z-index: 0;
  width: 16px;
  height: 16px;
  pointer-events: none;
}
.fp-plane__glyph {
  display: block;
  width: 100%;
  height: 100%;
}
.fp-button--running .fp-plane {
  animation: fp-flight var(--fp-duration, 4000ms) linear forwards;
}
.fp-center {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fp-label {
  white-space: nowrap;
  transition: opacity 180ms ease;
}
.fp-button--running .fp-label {
  opacity: 0;
}
.fp-dots {
  display: flex;
  align-items: center;
  gap: 5px;
  animation: fp-fade 180ms ease;
}
.fp-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: #fff;
  animation: fp-dot 900ms ease-in-out infinite;
}
.fp-dot:nth-child(2) {
  animation-delay: 150ms;
}
.fp-dot:nth-child(3) {
  animation-delay: 300ms;
}
.fp-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@keyframes fp-flight {
  0% {
    left: -22px;
    top: 32px;
    transform: scale(2.2) rotate(0deg);
  }
  13% {
    left: 10px;
    top: 32px;
    transform: scale(1) rotate(0deg);
  }
  50% {
    left: 158px;
    top: 32px;
    transform: scale(1) rotate(0deg);
  }
  63% {
    left: 158px;
    top: 7px;
    transform: scale(1) rotate(180deg);
  }
  87% {
    left: 10px;
    top: 7px;
    transform: scale(1) rotate(180deg);
  }
  100% {
    left: -22px;
    top: 32px;
    transform: scale(1) rotate(360deg);
  }
}
@keyframes fp-dot {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.75);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}
@keyframes fp-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fp-dot {
    animation-duration: 1600ms;
  }
}
</style>

Nearby