36 lines
1.4 KiB
TypeScript
36 lines
1.4 KiB
TypeScript
import React from "react";
|
|
|
|
export const Badge: React.FC<
|
|
{ children: React.ReactNode } & React.ComponentPropsWithoutRef<"button">
|
|
> = ({ children, ...props }) => {
|
|
return (
|
|
<button
|
|
{...props}
|
|
className="bg-neutral-50 no-underline group cursor-pointer relative md:shadow-2xl shadow-zinc-900 rounded-full p-px text-[10px] sm:text-xs font-semibold leading-6 text-neutral-700 inline-block w-fit mx-auto"
|
|
>
|
|
<span className="absolute inset-0 overflow-hidden rounded-full">
|
|
<span className="absolute inset-0 rounded-full opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
|
|
</span>
|
|
<div className="relative flex space-x-2 items-center z-10 rounded-full bg-neutral-100 py-1.5 px-4 ring-1 ring-white/10 ">
|
|
<span>{children}</span>
|
|
<svg
|
|
fill="none"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
width="16"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M10.75 8.75L14.25 12L10.75 15.25"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="1.5"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-neutral-400/0 via-neutral-400/90 to-neutral-400/0 transition-opacity duration-500 group-hover:opacity-40" />
|
|
</button>
|
|
);
|
|
};
|