3d-button

1"use client";
2import React, { useState } from "react";
3import { cn } from "@/lib/cn";
4 
5export type ThreedVariant =
6  | "amber"
7  | "emerald"
8  | "rose"
9  | "sky"
10  | "violet"
11  | "slate"
12  | "coral"
13  | "mint";
14 
15type ButtonVariant =
16  | "default"
17  | "destructive"
18  | "outline"
19  | "secondary"
20  | "ghost"
21  | "link";
22 
23type ButtonSize = "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg";
24 
25interface ThreedButtonProps
26  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
27  variant?: ButtonVariant;
28  size?: ButtonSize;
29  threedVariant?: ThreedVariant;
30  children?: React.ReactNode;
31}
32 
33const threedStyles: Record<
34  ThreedVariant,
35  {
36    border: string;
37    text: string;
38    base: string;
39    hover: string;
40    front: string;
41    back: string;
42  }
43> = {
44  amber: {
45    border: "#d97706",
46    text: "#78350f",
47    base: "#fef3c7",
48    hover: "#fde047",
49    front: "#f59e0b",
50    back: "#fbbf24",
51  },
52  emerald: {
53    border: "#047857",
54    text: "#064e3b",
55    base: "#d1fae5",
56    hover: "#6ee7b7",
57    front: "#10b981",
58    back: "#34d399",
59  },
60  rose: {
61    border: "#be123c",
62    text: "#881337",
63    base: "#ffe4e6",
64    hover: "#fda4af",
65    front: "#f43f5e",
66    back: "#fb7185",
67  },
68  sky: {
69    border: "#0369a1",
70    text: "#0c4a6e",
71    base: "#e0f2fe",
72    hover: "#7dd3fc",
73    front: "#0ea5e9",
74    back: "#38bdf8",
75  },
76  violet: {
77    border: "#6d28d9",
78    text: "#4c1d95",
79    base: "#ede9fe",
80    hover: "#c4b5fd",
81    front: "#8b5cf6",
82    back: "#a78bfa",
83  },
84  slate: {
85    border: "#334155",
86    text: "#0f172a",
87    base: "#e2e8f0",
88    hover: "#94a3b8",
89    front: "#475569",
90    back: "#64748b",
91  },
92  coral: {
93    border: "#c2410c",
94    text: "#7c2d12",
95    base: "#ffedd5",
96    hover: "#fdba74",
97    front: "#f97316",
98    back: "#fb923c",
99  },
100  mint: {
101    border: "#0d9488",
102    text: "#134e4a",
103    base: "#ccfbf1",
104    hover: "#5eead4",
105    front: "#14b8a6",
106    back: "#2dd4bf",
107  },
108};
109 
110const ThreedButton = React.forwardRef<HTMLButtonElement, ThreedButtonProps>(
111  (
112    { className, disabled = false, children, threedVariant = "amber", ...props },
113    ref,
114  ) => {
115    const [isPressed, setIsPressed] = useState(false);
116    const [isHovered, setIsHovered] = useState(false);
117    const s = threedStyles[threedVariant];
118 
119    return (
120      <div className="flex items-center justify-center">
121        <style>{`
122          @import url('https://fonts.googleapis.com/css?family=Rubik:700&display=swap');
123          .btn-3d-${threedVariant} {
124// … truncated