blue-chrome-button

1"use client";
2import React from "react";
3import { motion, type HTMLMotionProps } from "framer-motion";
4import { cn } from "@/lib/utils";
5 
6export type BlueChromeVariant =
7  | "blue"
8  | "cyan"
9  | "indigo"
10  | "violet"
11  | "emerald"
12  | "amber"
13  | "rose"
14  | "silver";
15 
16type BlueChromeStyle = {
17  border: string;
18  outerGlow: string;
19  innerGlow: string;
20};
21 
22const blueChromeStyles: Record<BlueChromeVariant, BlueChromeStyle> = {
23  blue: {
24    border: "#DCEFFF",
25    outerGlow: "rgba(46, 164, 255, 0.25)",
26    innerGlow: "rgba(46, 164, 255, 0.25)",
27  },
28  cyan: {
29    border: "#D8FBFF",
30    outerGlow: "rgba(34, 211, 238, 0.28)",
31    innerGlow: "rgba(34, 211, 238, 0.24)",
32  },
33  indigo: {
34    border: "#E2E8FF",
35    outerGlow: "rgba(99, 102, 241, 0.28)",
36    innerGlow: "rgba(99, 102, 241, 0.24)",
37  },
38  violet: {
39    border: "#F0E5FF",
40    outerGlow: "rgba(168, 85, 247, 0.28)",
41    innerGlow: "rgba(168, 85, 247, 0.24)",
42  },
43  emerald: {
44    border: "#D9FFEA",
45    outerGlow: "rgba(16, 185, 129, 0.26)",
46    innerGlow: "rgba(16, 185, 129, 0.22)",
47  },
48  amber: {
49    border: "#FFF0CC",
50    outerGlow: "rgba(245, 158, 11, 0.28)",
51    innerGlow: "rgba(245, 158, 11, 0.23)",
52  },
53  rose: {
54    border: "#FFE0E8",
55    outerGlow: "rgba(244, 63, 94, 0.28)",
56    innerGlow: "rgba(244, 63, 94, 0.23)",
57  },
58  silver: {
59    border: "#F3F6FA",
60    outerGlow: "rgba(148, 163, 184, 0.25)",
61    innerGlow: "rgba(148, 163, 184, 0.2)",
62  },
63};
64 
65interface BlueChromeButtonProps extends HTMLMotionProps<"button"> {
66  variant?: BlueChromeVariant;
67}
68 
69const BlueChromeButton = React.forwardRef<
70  HTMLButtonElement,
71  BlueChromeButtonProps
72>(({ className, children, style, variant = "blue", ...props }, ref) => {
73  const tone = blueChromeStyles[variant];
74 
75  return (
76    <motion.button
77      ref={ref}
78      whileTap={{ y: 0, scale: 0.985 }}
79      transition={{ duration: 0.24, ease: [0.22, 1, 0.36, 1] }}
80      className={cn(
81        "box-border h-[35.46px] w-[100.25px] rounded-[100px] border text-xs font-medium text-white/95",
82        className,
83      )}
84      style={{
85        background:
86// … truncated