feat: 10.10线上最新代码提交

src/components/Button/index.js

@@ -0,0 +1,40 @@
+import { Link } from "react-router-dom";
+import { svgs } from "./svgs";
+
+const Button = ({
+    className,
+    href,
+    onClick,
+    children,
+    px,
+    white,
+}) => {
+    const classes = `button relative inline-flex items-center justify-center h-11 ${
+        px || "px-7"
+    } ${white ? "text-n-8" : "text-n-1"} transition-colors hover:text-color-1 ${
+        className || ""
+    }`;
+
+    const spanClasses = `relative z-10`;
+
+    return href ? (
+        href.startsWith("mailto:") ? (
+            <a href={href} className={classes}>
+                <span className={spanClasses}>{children}</span>
+                {svgs(white)}
+            </a>
+        ) : (
+            <Link href={href} className={classes}>
+                <span className={spanClasses}>{children}</span>
+                {svgs(white)}
+            </Link>
+        )
+    ) : (
+        <button className={classes} onClick={onClick}>
+            <span className={spanClasses}>{children}</span>
+            {svgs(white)}
+        </button>
+    );
+};
+
+export default Button;

src/components/Button/svgs.js

@@ -0,0 +1,58 @@
+export const svgs = (white: boolean | undefined) => (
+    <>
+        <svg
+            className="absolute top-0 left-0"
+            width="21"
+            height="44"
+            viewBox="0 0 21 44"
+        >
+            <path
+                fill={white ? "white" : "none"}
+                stroke={white ? "white" : "url(#btn-left)"}
+                strokeWidth="2"
+                d="M21,43.00005 L8.11111,43.00005 C4.18375,43.00005 1,39.58105 1,35.36365 L1,8.63637 C1,4.41892 4.18375,1 8.11111,1 L21,1"
+            />
+        </svg>
+        <svg
+            className="absolute top-0 left-[1.3125rem] w-[calc(100%-2.625rem)]"
+            height="44"
+            viewBox="0 0 100 44"
+            preserveAspectRatio="none"
+            fill={white ? "white" : "none"}
+        >
+            {white ? (
+                <polygon
+                    fill="white"
+                    fillRule="nonzero"
+                    points="100 0 100 44 0 44 0 0"
+                />
+            ) : (
+                <>
+                    <polygon
+                        fill="url(#btn-top)"
+                        fillRule="nonzero"
+                        points="100 42 100 44 0 44 0 42"
+                    />
+                    <polygon
+                        fill="url(#btn-bottom)"
+                        fillRule="nonzero"
+                        points="100 0 100 2 0 2 0 0"
+                    />
+                </>
+            )}
+        </svg>
+        <svg
+            className="absolute top-0 right-0"
+            width="21"
+            height="44"
+            viewBox="0 0 21 44"
+        >
+            <path
+                fill={white ? "white" : "none"}
+                stroke={white ? "white" : "url(#btn-right)"}
+                strokeWidth="2"
+                d="M0,43.00005 L5.028,43.00005 L12.24,43.00005 C16.526,43.00005 20,39.58105 20,35.36365 L20,16.85855 C20,14.59295 18.978,12.44425 17.209,10.99335 L7.187,2.77111 C5.792,1.62675 4.034,1 2.217,1 L0,1"
+            />
+        </svg>
+    </>
+);