Clip Corners Button

1"use client";
2 
3import SmoothButton from "@/components/smoothui/smooth-button";
4import { motion, useReducedMotion } from "motion/react";
5import { useEffect, useState } from "react";
6 
7export interface ClipCornersButtonProps {
8  children: React.ReactNode;
9  className?: string;
10  onClick?: () => void;
11}
12 
13export function ClipCornersButton({
14  children,
15  className = "",
16  onClick,
17}: ClipCornersButtonProps) {
18  const [isHovered, setIsHovered] = useState(false);
19  const shouldReduceMotion = useReducedMotion();
20  const [isHoverDevice, setIsHoverDevice] = useState(false);
21 
22  // Distance triangles move on hover
23  const move = -4;
24 
25  useEffect(() => {
26    const mediaQuery = window.matchMedia("(hover: hover) and (pointer: fine)");
27    setIsHoverDevice(mediaQuery.matches);
28 
29    const handleChange = (e: MediaQueryListEvent) => {
30      setIsHoverDevice(e.matches);
31    };
32 
33    mediaQuery.addEventListener("change", handleChange);
34    return () => mediaQuery.removeEventListener("change", handleChange);
35  }, []);
36 
37  return (
38    <SmoothButton
39      className={`relative overflow-hidden rounded-none border-none bg-foreground px-8 py-4 font-mono text-2xl text-background hover:bg-foreground/90 ${className}`}
40      onClick={onClick}
41      onMouseEnter={() => {
42        if (isHoverDevice) {
43          setIsHovered(true);
44        }
45      }}
46      onMouseLeave={() => setIsHovered(false)}
47      style={{ borderRadius: 8 }}
48      type="button"
49    >
50      {/* Top-left triangle */}
51      <motion.div
52        animate={
53          shouldReduceMotion || !isHoverDevice
54            ? {}
55            : {
56                x: isHovered ? -move : 0,
57                y: isHovered ? -move : 0,
58              }
59        }
60        className="absolute top-1.5 left-1.5"
61        initial={false}
62        style={{ height: 8, width: 8 }}
63        transition={
64          shouldReduceMotion
65            ? { duration: 0 }
66            : {
67                damping: 24,
68                duration: 0.2,
69                stiffness: 400,
70                type: "spring" as const,
71              }
72        }
73      >
74        <svg
75          aria-label="Top-left triangle"
76          className="fill-background"
77          height="8"
78          width="8"
79        >
80          <title>Top-left triangle</title>
81          <polygon fill="currentColor" points="0,0 8,0 0,8" />
82        </svg>
83      </motion.div>
84      {/* Top-right triangle */}
85      <motion.div
86        animate={
87          shouldReduceMotion || !isHoverDevice
88            ? {}
89// … truncated