animated-badge

1"use client"
2 
3import Link from "next/link"
4import { ChevronRight } from "lucide-react"
5import { motion } from "motion/react"
6 
7type AnimatedBadgeProps = {
8  text?: string
9  color?: string // hex or css color value
10  href?: string // optional redirect link
11}
12 
13function hexToRgba(hexColor: string, alpha: number): string {
14  const hex = hexColor.replace("#", "")
15  if (hex.length === 3) {
16    const r = parseInt(hex[0] + hex[0], 16)
17    const g = parseInt(hex[1] + hex[1], 16)
18    const b = parseInt(hex[2] + hex[2], 16)
19    return `rgba(${r}, ${g}, ${b}, ${alpha})`
20  }
21  if (hex.length === 6) {
22    const r = parseInt(hex.substring(0, 2), 16)
23    const g = parseInt(hex.substring(2, 4), 16)
24    const b = parseInt(hex.substring(4, 6), 16)
25    return `rgba(${r}, ${g}, ${b}, ${alpha})`
26  }
27  return hexColor
28}
29 
30const AnimatedBadge = ({
31  text = "Introducing Eldoraui",
32  color = "#22d3ee",
33  href,
34}: AnimatedBadgeProps) => {
35  const content = (
36    <motion.div
37      initial={false}
38      whileInView={{
39        opacity: 1,
40        y: 0,
41        filter: "blur(0px)",
42      }}
43      transition={{
44        duration: 0.3,
45        delay: 0.1,
46        ease: "easeInOut",
47      }}
48      viewport={{ once: true }}
49      className="group relative flex max-w-fit items-center justify-center gap-3 rounded-full border border-neutral-300 bg-white px-4 py-1.5 text-neutral-700 transition-colors dark:border-neutral-700/80 dark:bg-black dark:text-zinc-300"
50    >
51      <div className="pointer-events-none absolute inset-x-0 bottom-full h-20 w-[165px]">
52        <svg
53          className="h-full w-full"
54          width="100%"
55          height="100%"
56          viewBox="0 0 50 50"
57          fill="none"
58        >
59          {/* <g stroke="#fff" strokeWidth="0.4">
60              <path d="M 69 49.8 h -30 q -3 0 -3 -3 v -15 q 0 -3 -3 -3 h -23 q -3 0 -3 -3 v -15 q 0 -3 -3 -3 h -30" />
61            </g> */}
62          <g mask="url(#ml-mask-1)">
63            <circle
64              className="multiline ml-light-1"
65              cx="0"
66              cy="0"
67              r="20"
68              fill="url(#ml-white-grad)"
69            />
70          </g>
71          <defs>
72            <mask id="ml-mask-1">
73              <path
74                d="M 69 49.8 h -30 q -3 0 -3 -3 v -13 q 0 -3 -3 -3 h -23 q -3 0 -3 -3 v -13 q 0 -3 -3 -3 h -30"
75                strokeWidth="0.6"
76                stroke="white"
77              />
78            </mask>
79            <radialGradient id="ml-white-grad" fx="1">
80// … truncated