feat: add button component

app/page.tsx

@@ -1,7 +1,13 @@
+import Header from "@/components/layout/header";
+import ButtonGradient from "@/components/svg/button-gradient";
+
 export default function Home() {
   return (
     <main>
-      <h1>Nextjs 14 SaaS landing page</h1>
+      <div className="overflow-hidden pt-[4.75rem] lg:pt-[5.25rem]">
+        <Header />
+      </div>
+      <ButtonGradient />
     </main>
   );
 }

components/atoms/button.tsx

@@ -0,0 +1,43 @@
+import { cn } from "@/lib/utils";
+import ButtonSvg from "@/components/svg/button-svg";
+import React from "react";
+import Link from "next/link";
+
+type Props = {
+  className: string;
+  href?: string;
+  children: React.ReactNode;
+  onClick?: () => void;
+  px?: string;
+  white?: boolean;
+};
+
+const Button = ({ className, href, children, onClick, px = "px-7", white = false }: Props) => {
+  const buttonClasses = cn(
+    `button relative inline-flex items-center justify-center h-11`,
+    `transition-colors hover:text-color-1`,
+    px,
+    white ? "text-n-8" : "text-n-1",
+    className || ""
+  );
+
+  const spanClasses = cn("relative z-10");
+
+  const renderButton = () => (
+    <button className={buttonClasses}>
+      <span className={spanClasses}>{children}</span>
+      {ButtonSvg(white)}
+    </button>
+  );
+
+  const renderLink = () => (
+    <Link href={href} className={buttonClasses}>
+      <span className={spanClasses}>{children}</span>
+      {ButtonSvg(white)}
+    </Link>
+  );
+
+  return href ? renderLink() : renderButton();
+};
+
+export default Button;

components/layout/header.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+type Props = {};
+
+const Header = (props: Props) => {
+  return <div>Header</div>;
+};
+
+export default Header;

public/assets/svg/button-gradient.tsx → components/svg/button-gradient.tsx

@@ -14,13 +14,7 @@ const ButtonGradient = () => {
           <stop offset="0%" stopColor="#9099FC" />
           <stop offset="100%" stopColor="#89F9E8" />
         </linearGradient>
-        <linearGradient
-          id="btn-right"
-          x1="14.635%"
-          x2="14.635%"
-          y1="0%"
-          y2="100%"
-        >
+        <linearGradient id="btn-right" x1="14.635%" x2="14.635%" y1="0%" y2="100%">
           <stop offset="0%" stopColor="#9099FC" />
           <stop offset="100%" stopColor="#D87CEE" />
         </linearGradient>

public/assets/svg/button-svg.tsx → components/svg/button-svg.tsx

@@ -1,11 +1,6 @@
-const ButtonSvg = (white) => (
+const ButtonSvg = (white: boolean) => (
   <>
-    <svg
-      className="absolute top-0 left-0"
-      width="21"
-      height="44"
-      viewBox="0 0 21 44"
-    >
+    <svg className="absolute left-0 top-0" width="21" height="44" viewBox="0 0 21 44">
       <path
         fill={white ? "white" : "none"}
         stroke={white ? "white" : "url(#btn-left)"} // mentioned in ButtonGradient.jsx
@@ -14,18 +9,14 @@ const ButtonSvg = (white) => (
       />
     </svg>
     <svg
-      className="absolute top-0 left-[1.3125rem] w-[calc(100%-2.625rem)]"
+      className="absolute left-[1.3125rem] top-0 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="white" fillRule="nonzero" points="100 0 100 44 0 44 0 0" />
       ) : (
         <>
           <polygon
@@ -41,12 +32,7 @@ const ButtonSvg = (white) => (
         </>
       )}
     </svg>
-    <svg
-      className="absolute top-0 right-0"
-      width="21"
-      height="44"
-      viewBox="0 0 21 44"
-    >
+    <svg className="absolute right-0 top-0" width="21" height="44" viewBox="0 0 21 44">
       <path
         fill={white ? "white" : "none"}
         stroke={white ? "white" : "url(#btn-right)"} // mentioned in ButtonGradient.jsx

public/assets/svg/menu-svg.tsx → components/svg/menu-svg.tsx

@@ -1,13 +1,8 @@
-const MenuSvg = ({ openNavigation }) => {
+const MenuSvg = ({ openNavigation }: { openNavigation: boolean }) => {
   return (
-    <svg
-      className="overflow-visible"
-      width="20"
-      height="12"
-      viewBox="0 0 20 12"
-    >
+    <svg className="overflow-visible" width="20" height="12" viewBox="0 0 20 12">
       <rect
-        className="transition-all origin-center"
+        className="origin-center transition-all"
         y={openNavigation ? "5" : "0"}
         width="20"
         height="2"
@@ -16,7 +11,7 @@ const MenuSvg = ({ openNavigation }) => {
         transform={`rotate(${openNavigation ? "45" : "0"})`}
       />
       <rect
-        className="transition-all origin-center"
+        className="origin-center transition-all"
         y={openNavigation ? "5" : "10"}
         width="20"
         height="2"

public/assets/svg/plus-svg.tsx → components/svg/plus-svg.tsx

@@ -1,6 +1,6 @@
-const PlusSvg = ({ className = "" }) => {
+const PlusSvg = ({ className = "" }: { className?: string }) => {
   return (
-    <svg className={`${className} || ""`} width="11" height="11" fill="none">
+    <svg className={className} width="11" height="11" fill="none">
       <path
         d="M7 1a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 1-1 1H1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h2a1 1 0 0 1 1 1v2a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V8a1 1 0 0 1 1-1h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H8a1 1 0 0 1-1-1V1z"
         fill="#ada8c4"

public/assets/svg/section-svg.tsx → components/svg/section-svg.tsx

@@ -1,16 +1,16 @@
 import PlusSvg from "./plus-svg";
 
-const SectionSvg = ({ crossesOffset }) => {
+const SectionSvg = ({ crossesOffset }: { crossesOffset?: string }) => {
   return (
     <>
       <PlusSvg
-        className={`absolute -top-[0.3125rem] left-[1.5625rem] hidden ${
+        className={`absolute left-[1.5625rem] top-[-0.3125rem] hidden ${
           crossesOffset && crossesOffset
         } pointer-events-none lg:block xl:left-[2.1875rem]`}
       />
 
       <PlusSvg
-        className={`absolute -top-[0.3125rem]  right-[1.5625rem] hidden ${
+        className={`absolute right-[1.5625rem]  top-[-0.3125rem] hidden ${
           crossesOffset && crossesOffset
         } pointer-events-none lg:block xl:right-[2.1875rem]`}
       />

lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package.json

@@ -9,13 +9,15 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-tailwindcss": "^3.15.1",
     "next": "14.2.3",
     "prettier": "^3.2.5",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "tailwind-merge": "^2.3.0"
   },
   "devDependencies": {
     "@types/node": "^20",