"use client";

import { GrowingBackArrow } from "./index";

export interface DemoProps {
  accent?: string;
  size?: number;
  hoverScale?: number;
  shaftStretch?: number;
  tooltip?: string;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({
  accent = "#38BDF8",
  size = 50,
  hoverScale = 1.25,
  shaftStretch = 3,
  tooltip = "Go back",
}: DemoProps) {
  return (
    <div className="flex w-full flex-wrap items-center justify-center gap-6 p-8 text-current">
      <GrowingBackArrow accent={accent} size={size} hoverScale={hoverScale} shaftStretch={shaftStretch} tooltip={tooltip} />
      <GrowingBackArrow accent={accent} size={size} hoverScale={hoverScale} shaftStretch={shaftStretch} tooltip="Back to results" />
      <GrowingBackArrow accent={accent} size={Math.max(32, size - 10)} hoverScale={hoverScale} shaftStretch={shaftStretch} tooltip="Previous page" />
    </div>
  );
}

1d:Ta6f, 1e:T8566,

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

const props = withDefaults(
  defineProps<{
    accent?: string;
    size?: number;
    hoverScale?: number;
    shaftStretch?: number;
    tooltip?: string;
  }>(),
  { accent: "#38BDF8", size: 50, hoverScale: 1.25, shaftStretch: 3, tooltip: "Go back" },
);

const shaftScale = computed(() => 1 + props.shaftStretch / 13.9);
const hit = computed(() => Math.max(44, props.size + 14) + "px");
</script>

<template>
  <button
    type="button"
    class="growing-back-arrow"
    :aria-label="tooltip"
    :style="{
      '--arrow-accent': accent,
      '--hover-scale': hoverScale,
      '--shaft-scale': shaftScale,
      '--glyph-size': size + 'px',
      width: hit,
      height: hit,
    }"
  >
    <svg class="glyph" :width="size" :height="size" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <g class="scale-group">
        <polyline class="stroke" points="11.4 6.2 4.6 12 11.4 17.8" />
        <g class="shaft-group">
          <line class="stroke" x1="5.5" y1="12" x2="19.4" y2="12" />
        </g>
      </g>
    </svg>
  </button>
</template>

<style scoped>
.growing-back-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: color-mix(in srgb, var(--arrow-accent) 55%, transparent);
  cursor: pointer;
  user-select: none;
  transition: color 180ms ease;
}
.growing-back-arrow:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--arrow-accent) 65%, transparent);
  outline-offset: 3px;
}
.growing-back-arrow:active {
  color: var(--arrow-accent);
}
.growing-back-arrow .glyph {
  display: block;
  overflow: visible;
}
.growing-back-arrow .stroke {
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}
.growing-back-arrow .scale-group,
.growing-back-arrow .shaft-group {
  transform-box: view-box;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.growing-back-arrow .scale-group {
  transform-origin: center;
}
.growing-back-arrow .shaft-group {
  transform-origin: 5.5px 12px;
}
@media (hover: hover) {
  .growing-back-arrow:hover {
    color: var(--arrow-accent);
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .growing-back-arrow:hover .scale-group {
    transform: scale(var(--hover-scale));
  }
  .growing-back-arrow:hover .shaft-group {
    transform: scaleX(var(--shaft-scale));
  }
  .growing-back-arrow:active .scale-group,
  .growing-back-arrow:active .shaft-group {
    transform: none;
    transition-duration: 70ms;
    transition-timing-function: ease;
  }
}
</style>

1f:T98f, 20:T86d2,

<script lang="ts">
  let {
    accent = "#38BDF8",
    size = 50,
    hoverScale = 1.25,
    shaftStretch = 3,
    tooltip = "Go back",
  }: { accent?: string; size?: number; hoverScale?: number; shaftStretch?: number; tooltip?: string } = $props();

  let shaftScale = $derived(1 + shaftStretch / 13.9);
  let hit = $derived(Math.max(44, size + 14) + "px");
</script>

<button
  type="button"
  class="growing-back-arrow"
  aria-label={tooltip}
  style="--arrow-accent: {accent}; --hover-scale: {hoverScale}; --shaft-scale: {shaftScale}; width: {hit}; height: {hit};"
>
  <svg class="glyph" width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <g class="scale-group">
      <polyline class="stroke" points="11.4 6.2 4.6 12 11.4 17.8" />
      <g class="shaft-group">
        <line class="stroke" x1="5.5" y1="12" x2="19.4" y2="12" />
      </g>
    </g>
  </svg>
</button>

<style>
  .growing-back-arrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: color-mix(in srgb, var(--arrow-accent) 55%, transparent);
    cursor: pointer;
    user-select: none;
    transition: color 180ms ease;
  }
  .growing-back-arrow:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--arrow-accent) 65%, transparent);
    outline-offset: 3px;
  }
  .growing-back-arrow:active {
    color: var(--arrow-accent);
  }
  .glyph {
    display: block;
    overflow: visible;
  }
  .stroke {
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
  }
  .scale-group,
  .shaft-group {
    transform-box: view-box;
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .scale-group {
    transform-origin: center;
  }
  .shaft-group {
    transform-origin: 5.5px 12px;
  }
  @media (hover: hover) {
    .growing-back-arrow:hover {
      color: var(--arrow-accent);
    }
  }
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .growing-back-arrow:hover .scale-group {
      transform: scale(var(--hover-scale));
    }
    .growing-back-arrow:hover .shaft-group {
      transform: scaleX(var(--shaft-scale));
    }
    .growing-back-arrow:active .scale-group,
    .growing-back-arrow:active .shaft-group {
      transform: none;
      transition-duration: 70ms;
      transition-timing-function: ease;
    }
  }
</style>

Nearby