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

const props = withDefaults(
  defineProps<{
    label?: string;
    unlockedLabel?: string;
    accent?: string;
    jiggleDegrees?: number;
    unlocked?: boolean;
  }>(),
  { label: "Key", unlockedLabel: "Open", accent: "#7C5CFF", jiggleDegrees: 6, unlocked: false },
);

const isUnlocked = ref(props.unlocked);

function toggle() {
  isUnlocked.value = !isUnlocked.value;
}
</script>

<template>
  <button
    type="button"
    class="key-chip"
    :class="{ 'key-chip--unlocked': isUnlocked }"
    :style="{ '--chip-accent': accent, '--chip-jiggle': jiggleDegrees + 'deg' }"
    :aria-pressed="isUnlocked"
    @click="toggle"
  >
    <svg
      class="key-chip__glyph"
      width="20"
      height="20"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2.25"
      stroke-linecap="round"
      stroke-linejoin="round"
      aria-hidden="true"
    >
      <circle cx="7.5" cy="12" r="4" />
      <path d="M11.5 12H21" />
      <path d="M16.5 12v3.25" />
      <path d="M21 12v2.5" />
    </svg>
    <span class="key-chip__labels">
      <span class="key-chip__label key-chip__label--unlocked">{{ unlockedLabel }}</span>
      <span class="key-chip__label key-chip__label--locked">{{ label }}</span>
    </span>
  </button>
</template>

<style scoped>
.key-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 20px;
  background: color-mix(in srgb, var(--chip-accent) 80%, transparent);
  color: #fff;
  font: 600 17px/1 system-ui, sans-serif;
  letter-spacing: 1px;
  cursor: pointer;
  user-select: none;
  transition: background-color 200ms ease;
}
.key-chip:not(.key-chip--unlocked):hover {
  background: var(--chip-accent);
}
.key-chip--unlocked {
  background: color-mix(in srgb, var(--chip-accent) 15%, transparent);
}
.key-chip:focus-visible {
  outline: 2px solid var(--chip-accent);
  outline-offset: 2px;
}
.key-chip__glyph {
  flex-shrink: 0;
  color: #fff;
  transition:
    transform 300ms cubic-bezier(0.34, 1.3, 0.64, 1),
    color 180ms ease;
}
.key-chip--unlocked .key-chip__glyph {
  transform: rotate(90deg);
  color: var(--chip-accent);
}
.key-chip:not(.key-chip--unlocked):hover .key-chip__glyph {
  animation: key-jiggle 0.5s ease-in-out infinite;
}
@keyframes key-jiggle {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(var(--chip-jiggle));
  }
  50% {
    transform: rotate(calc(var(--chip-jiggle) * -1));
  }
  75% {
    transform: rotate(calc(var(--chip-jiggle) * 0.6));
  }
}
.key-chip__labels {
  position: relative;
  display: grid;
  white-space: nowrap;
}
.key-chip__label {
  grid-area: 1 / 1;
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}
.key-chip__label--locked {
  color: #fff;
  opacity: 1;
  transform: translateY(0);
}
.key-chip--unlocked .key-chip__label--locked {
  opacity: 0;
  transform: translateY(-3px);
}
.key-chip__label--unlocked {
  color: var(--chip-accent);
  opacity: 0;
  transform: translateY(3px);
}
.key-chip--unlocked .key-chip__label--unlocked {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .key-chip:not(.key-chip--unlocked):hover .key-chip__glyph {
    animation: none;
  }
  .key-chip__glyph,
  .key-chip__label {
    transition: none;
  }
}
</style>

1f:Tc8c, 20:Tb69b,

<script lang="ts">
  let {
    label = "Key",
    unlockedLabel = "Open",
    accent = "#7C5CFF",
    jiggleDegrees = 6,
    unlocked = false,
  }: { label?: string; unlockedLabel?: string; accent?: string; jiggleDegrees?: number; unlocked?: boolean } = $props();

  let isUnlocked = $state(unlocked);

  function toggle() {
    isUnlocked = !isUnlocked;
  }
</script>

<button
  type="button"
  class="key-chip"
  class:unlocked={isUnlocked}
  style={`--chip-accent: ${accent}; --chip-jiggle: ${jiggleDegrees}deg`}
  aria-pressed={isUnlocked}
  onclick={toggle}
>
  <svg
    class="glyph"
    width="20"
    height="20"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2.25"
    stroke-linecap="round"
    stroke-linejoin="round"
    aria-hidden="true"
  >
    <circle cx="7.5" cy="12" r="4" />
    <path d="M11.5 12H21" />
    <path d="M16.5 12v3.25" />
    <path d="M21 12v2.5" />
  </svg>
  <span class="labels">
    <span class="chip-label chip-label--unlocked">{unlockedLabel}</span>
    <span class="chip-label chip-label--locked">{label}</span>
  </span>
</button>

<style>
  .key-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 14px;
    border: 0;
    border-radius: 20px;
    background: color-mix(in srgb, var(--chip-accent) 80%, transparent);
    color: #fff;
    font: 600 17px/1 system-ui, sans-serif;
    letter-spacing: 1px;
    cursor: pointer;
    user-select: none;
    transition: background-color 200ms ease;
  }
  .key-chip:not(.unlocked):hover {
    background: var(--chip-accent);
  }
  .key-chip.unlocked {
    background: color-mix(in srgb, var(--chip-accent) 15%, transparent);
  }
  .key-chip:focus-visible {
    outline: 2px solid var(--chip-accent);
    outline-offset: 2px;
  }
  .glyph {
    flex-shrink: 0;
    color: #fff;
    transition:
      transform 300ms cubic-bezier(0.34, 1.3, 0.64, 1),
      color 180ms ease;
  }
  .key-chip.unlocked .glyph {
    transform: rotate(90deg);
    color: var(--chip-accent);
  }
  .key-chip:not(.unlocked):hover .glyph {
    animation: key-jiggle 0.5s ease-in-out infinite;
  }
  @keyframes key-jiggle {
    0%,
    100% {
      transform: rotate(0deg);
    }
    25% {
      transform: rotate(var(--chip-jiggle));
    }
    50% {
      transform: rotate(calc(var(--chip-jiggle) * -1));
    }
    75% {
      transform: rotate(calc(var(--chip-jiggle) * 0.6));
    }
  }
  .labels {
    position: relative;
    display: grid;
    white-space: nowrap;
  }
  .chip-label {
    grid-area: 1 / 1;
    transition:
      opacity 180ms ease,
      transform 180ms ease;
  }
  .chip-label--locked {
    color: #fff;
    opacity: 1;
    transform: translateY(0);
  }
  .key-chip.unlocked .chip-label--locked {
    opacity: 0;
    transform: translateY(-3px);
  }
  .chip-label--unlocked {
    color: var(--chip-accent);
    opacity: 0;
    transform: translateY(3px);
  }
  .key-chip.unlocked .chip-label--unlocked {
    opacity: 1;
    transform: translateY(0);
  }
  @media (prefers-reduced-motion: reduce) {
    .key-chip:not(.unlocked):hover .glyph {
      animation: none;
    }
    .glyph,
    .chip-label {
      transition: none;
    }
  }
</style>

Nearby