Update Chip

import { cn } from "@/lib/utils";

const UpdateChip: React.FC<
  React.ComponentProps<"a"> & { text: string; newText?: string }
> = ({ text, newText = "NEW", className, ...props }) => (
  <a
    className={cn(
      "group mb-4 flex cursor-pointer items-center justify-center gap-3 rounded-lg bg-muted/50 py-1.5 pr-3.5 pl-1.5 hover:bg-muted/70",
      "starting:translate-y-2.5 translate-y-0 scale-100 opacity-100 starting:opacity-0",
      "transition-[opacity,translate,scale,color] motion-reduce:transition-none",
      "duration-[800ms,800ms,100ms,400ms]",
      "ease-[cubic-bezier(0,0,0.58,1),cubic-bezier(0,0,0.58,1),cubic-bezier(0.42,0,1,1),cubic-bezier(0,0,0.2,1)]",
      "hover:scale-[1.02] active:scale-[0.99]",
      className
    )}
    {...props}
  >
    <div
      className="grid rounded-md px-1.5 py-1 font-bold font-sans text-background text-xs transition-transform duration-400 ease-out group-hover:translate-x-[calc(var(--announcement-width)+0.5rem)]"
      style={{
        background:
          "linear-gradient(90deg, var(--accent-highlight) 0%, var(--accent) 45%, var(--accent-depth) 100%)",
      }}
    >
      <span className="font-serif duration-300 [grid-area:1/1] group-hover:translate-x-4 group-hover:opacity-0">
        {newText}
      </span>

      <div className="duration-[inherit] [grid-area:1/1] group-hover:translate-x-0">
        <ChevronRightCustom className="mx-auto size-4" />
      </div>
    </div>
    <span className="font-semibold font-serif text-accent-depth text-sm">
      {text}
    </span>
  </a>
);

const ChevronRightCustom = ({ className }: { className?: string }) => (
  <svg
    className={`lucide lucide-chevrons-right duration-400 ${className}`}
    fill="none"
    height="24"
    stroke="currentColor"
    strokeLinecap="round"
    strokeLinejoin="round"
    strokeWidth="2"
    viewBox="0 0 24 24"
    width="24"
    xmlns="http://www.w3.org/2000/svg"
  >
    <title>Chevron Right</title>
    <path
      className="-translate-x-full duration-[inherit] ease-out group-hover:translate-x-0 group-hover:delay-[50ms]"
      d="m6 17 5-5-5-5"
    />
    <path
      className="-translate-x-full duration-[inherit] ease-out group-hover:translate-x-0"
      d="m13 17 5-5-5-5"
    />
  </svg>
);

export { UpdateChip };

import { UpdateChip } from "@/components/update-chip";

<UpdateChip text="Update Chip" href="..." />