1  ---
 2  import ArrowRightIcon from "~icons/ph/arrow-right";
 3  
 4  interface Props {
 5  	href: string;
 6  	label: string;
 7  	ariaLabel: string;
 8  }
 9  
10  const { href, label, ariaLabel } = Astro.props;
11  ---
12  
13  <a
14  	data-astro-prefetch
15  	{href}
16  	class="group w-fit mx-auto flex items-center justify-center bg-white/50 rounded-lg border-[0.5px] border-pink-200/50 py-2 px-4 text-sm font-body text-pink-900 hover:border-pink-200 hover:bg-pink-50/50 transition-all focus:outline-none focus:ring-2 focus:ring-pink-400 focus:ring-offset-2"
17  	aria-label={ariaLabel}
18  >
19  	<span>{label}</span>
20  	<span class="max-w-0 group-hover:max-w-4 overflow-hidden opacity-0 group-hover:ml-2 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200 ease-out">
21  		<ArrowRightIcon class="w-4 h-4" />
22  	</span>
23  </a>