Metal Button

1"use client";
2import React from "react";
3import { cn } from "@/lib/utils";
4 
5type ColorVariant =
6  | "default"
7  | "primary"
8  | "success"
9  | "error"
10  | "gold"
11  | "bronze";
12 
13interface MetalButtonProps
14  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
15  variant?: ColorVariant;
16}
17 
18const colorVariants: Record<
19  ColorVariant,
20  {
21    outer: string;
22    inner: string;
23    button: string;
24    textColor: string;
25    textShadow: string;
26  }
27> = {
28  default: {
29    outer: "bg-gradient-to-b from-[#000] to-[#A0A0A0]",
30    inner: "bg-gradient-to-b from-[#FAFAFA] via-[#3E3E3E] to-[#E5E5E5]",
31    button: "bg-gradient-to-b from-[#B9B9B9] to-[#969696]",
32    textColor: "text-white",
33    textShadow: "[text-shadow:_0_-1px_0_rgb(80_80_80_/_100%)]",
34  },
35  primary: {
36    outer: "bg-gradient-to-b from-[#0051B4] to-[#90C2FF]",
37    inner: "bg-gradient-to-b from-[#C4EBFF] via-[#0B3F89] to-[#A6DDFB]",
38    button: "bg-gradient-to-b from-[#96C6EA] to-[#2D7CCA]",
39    textColor: "text-[#FFF7F0]",
40    textShadow: "[text-shadow:_0_-1px_0_rgb(30_58_138_/_100%)]",
41  },
42  success: {
43    outer: "bg-gradient-to-b from-[#005A43] to-[#7CCB9B]",
44    inner: "bg-gradient-to-b from-[#E5F8F0] via-[#00352F] to-[#D1F0E6]",
45    button: "bg-gradient-to-b from-[#9ADBC8] to-[#3E8F7C]",
46    textColor: "text-[#FFF7F0]",
47    textShadow: "[text-shadow:_0_-1px_0_rgb(6_78_59_/_100%)]",
48  },
49  error: {
50    outer: "bg-gradient-to-b from-[#5A0000] to-[#FFAEB0]",
51    inner: "bg-gradient-to-b from-[#FFDEDE] via-[#680002] to-[#FFE9E9]",
52    button: "bg-gradient-to-b from-[#F08D8F] to-[#A45253]",
53    textColor: "text-[#FFF7F0]",
54    textShadow: "[text-shadow:_0_-1px_0_rgb(146_64_14_/_100%)]",
55  },
56  gold: {
57    outer: "bg-gradient-to-b from-[#917100] to-[#EAD98F]",
58    inner: "bg-gradient-to-b from-[#FFFDDD] via-[#856807] to-[#FFF1B3]",
59    button: "bg-gradient-to-b from-[#FFEBA1] to-[#9B873F]",
60    textColor: "text-[#FFFDE5]",
61    textShadow: "[text-shadow:_0_-1px_0_rgb(178_140_2_/_100%)]",
62  },
63  bronze: {
64    outer: "bg-gradient-to-b from-[#864813] to-[#E9B486]",
65    inner: "bg-gradient-to-b from-[#EDC5A1] via-[#5F2D01] to-[#FFDEC1]",
66    button: "bg-gradient-to-b from-[#FFE3C9] to-[#A36F3D]",
67    textColor: "text-[#FFF7F0]",
68    textShadow: "[text-shadow:_0_-1px_0_rgb(124_45_18_/_100%)]",
69  },
70};
71 
72const metalButtonVariants = (
73  variant: ColorVariant = "default",
74  isPressed: boolean,
75  isHovered: boolean,
76  isTouchDevice: boolean,
77) => {
78  const colors = colorVariants[variant];
79// … truncated