Init

src/components/button/PrimaryButton.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import { cn } from "../../lib/cn";
+
+interface ButtonProps {
+  disabled?: boolean;
+  text?: string;
+  className?: string;
+  onClick: () => void;
+}
+
+export const PrimaryButton: React.FC<ButtonProps> = ({
+  disabled = false,
+  text = "",
+  className,
+  onClick,
+}) => {
+  return (
+    <label
+      className={cn(
+        "grid relative cursor-pointer select-none group w-fit box-border",
+        disabled && "pointer-events-none",
+        className
+      )}
+      onClick={() => onClick()}
+    >
+      {/* Основной контейнер,  */}
+      <div
+        className={cn(
+          "group-active:scale-90 flex items-center justify-center box-border z-10 relative transition-all duration-300",
+          "rounded-[10px]",
+          "group-hover:bg-liquid-lighter group-hover:ring-[1px] group-hover:ring-liquid-darkmain group-hover:ring-inset",
+          "px-[16px] py-[8px]",
+          "bg-liquid-darkmain",
+          disabled && "bg-liquid-lighter"
+        )}
+      >
+        {/* Скрытый button */}
+        <button
+          className={cn(
+            "absolute opacity-0 -z-10 h-0 w-0",
+            "[&:focus-visible+*]:outline-liquid-brightmain",
+          )}
+          disabled={disabled}
+          onClick={() => {}}
+        />
+
+        {/* Граница при выделении через tab */}
+        <div
+          className={cn(
+            "absolute outline-offset-[2.5px] border-[2px] border-transparent outline-[2.5px] outline outline-transparent transition-all duration-300 text-transparent box-border text-[18px] font-bold p-0 ,m-0 leading-[23px]",
+            "rounded-[10px]",
+            "px-[16px] py-[8px]",
+          )}
+        >
+          {text}
+        </div>
+        <div
+          className={cn(
+            "transition-all duration-300 text-liquid-white text-[18px] font-bold p-0 m-0 leading-[23px]",
+            "group-hover:text-liquid-brightmain ",
+            disabled && "text-liquid-light"
+          )}
+        >
+          {text}
+        </div>
+      </div>
+    </label>
+  );
+};