create reusable btn

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": false,
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindFunctions": ["clsx", "cn", "twmerge", "cva"]
+}

.vscode/settings.json

@@ -1,12 +1,6 @@
 {
   "tailwindCSS.experimental.classRegex": [
-    [
-      "cva\\(([^)]*)\\)",
-      "[\"'`]([^\"'`]*).*?[\"'`]"
-    ],
-    [
-      "cx\\(([^)]*)\\)",
-      "(?:'|\"|`)([^']*)(?:'|\"|`)"
-    ]
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
   ]
-}
+}

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "yarn dev-codegen & yarn dev-next",
+    "dev": "concurrently 'yarn:dev-*'",
     "dev-codegen": "graphql-codegen --watch",
     "dev-next": "next dev -p 3010",
     "build": "next build",
@@ -38,7 +38,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "daisyui": "^4.12.10",
+    "concurrently": "^8.2.2",
     "eslint": "^8",
     "eslint-config-next": "14.2.5",
     "postcss": "^8",

src/app/(auth)/layout.tsx

@@ -5,6 +5,6 @@ type Props = {
 };
 export default function Layout({ children }: Props) {
   return (
-    <div className="flex items-center justify-center h-screen">{children}</div>
+    <div className="flex h-screen items-center justify-center">{children}</div>
   );
 }

src/app/(protected)/dashboard/layout.tsx

@@ -14,9 +14,9 @@ export default function ProtectedLayout({ children }: { children: ReactNode }) {
           type="checkbox"
           className="drawer-toggle"
         />
-        <div className="drawer-content flex flex-col ">
+        <div className="drawer-content flex flex-col">
           <Header />
-          <main className="flex-1 overflow-y-auto md:pt-4 pt-4 px-6  bg-base-200">
+          <main className="bg-base-200 flex-1 overflow-y-auto px-6 pt-4 md:pt-4">
             {children}
             <div className="h-16"></div>
           </main>

src/module/auth/login-form.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { zodResolver } from "@hookform/resolvers/zod";
 import {
+  Button,
   ControlledPasswordInput,
   ControlledTextInput,
   Icon,
@@ -9,6 +10,7 @@ import Link from "next/link";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { login, LoginPayload } from "./auth-service";
+import { Checkbox } from "../common/checkbox";
 
 const formSchema = z.object({
   email: z.string().email(),
@@ -44,9 +46,9 @@ export function LoginForm() {
   });
 
   return (
-    <div className="card mx-auto w-full max-w-5xl shadow-slate-500 dark:shadow-sky-400  shadow-2xl min-h-96 py-4 flex justify-center items-center">
-      <div className=" mx-auto h-full">
-        <h2 className="text-2xl font-semibold mb-2 text-center">Login</h2>
+    <div className="card mx-auto flex min-h-96 w-full max-w-5xl items-center justify-center py-4 shadow-2xl shadow-slate-500 dark:shadow-sky-400">
+      <div className="mx-auto h-full">
+        <h2 className="mb-2 text-center text-2xl font-semibold">Login</h2>
         <form onSubmit={onSubmit}>
           {errors.root && (
             <span className="text-error">{errors.root.message}</span>
@@ -67,25 +69,37 @@ export function LoginForm() {
             />
           </div>
 
-          <div className="text-right text-primary">
+          <div className="text-primary text-right">
             <Link href="/forgot-password">
-              <span className="text-sm  inline-block  hover:text-primary hover:underline hover:cursor-pointer transition duration-200">
+              <span className="hover:text-primary inline-block text-sm transition duration-200 hover:cursor-pointer hover:underline">
                 Forgot Password?
               </span>
             </Link>
           </div>
-
+          <div>
+            <Checkbox label="Remember me" />
+          </div>
           {/* <ErrorText styleClass="mt-8">{errorMessage}</ErrorText> */}
-          <button type="submit" className={"btn mt-2 w-full btn-primary"}>
+          <Button
+            type="submit"
+            variant="primary"
+            textColor="white"
+            animation="growing-bubble-tl-primary"
+            size="medium"
+          >
             Login
-          </button>
+          </Button>
 
-          <div className="text-center mt-4">
-            Don&apos;t have an account yet?{" "}
+          <div className="text-center">
             <Link href="/register">
-              <span className="  inline-block  hover:text-primary hover:underline hover:cursor-pointer transition duration-200">
+              <Button
+                variant="secondary"
+                textColor="blue"
+                size="medium"
+                animation="growing-bubble-tl-secondary"
+              >
                 Register
-              </span>
+              </Button>
             </Link>
           </div>
         </form>

src/module/auth/user-store.ts

@@ -20,7 +20,7 @@ export const useUser = create(
         console.dir(error);
       };
     },
-  })
+  }),
 );
 
 export const fetchUserInfo = async () => {

src/module/common/button.tsx

@@ -2,26 +2,65 @@ import { cva, type VariantProps } from "class-variance-authority";
 import React from "react";
 
 export interface ButtonVariants extends VariantProps<typeof buttonVariants> {}
-const buttonVariants = cva(["btn"], {
-  variants: {
-    intent: {
-      default: [],
-      outline: ["btn-outline"],
+const buttonVariants = cva(
+  "relative overflow-hidden rounded border transition-all duration-500",
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary-300",
+        secondary: "transparent",
+      },
+      size: {
+        medium: "mb-5 w-400 px-6 py-2.5",
+      },
+      animation: {
+        "growing-bubble-tl-primary":
+          "before:transition-width before:transition-height relative z-10 before:absolute before:left-0 before:top-0 before:z-0 before:h-0 before:w-0 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-primary-500 before:duration-500 before:ease-in-out hover:before:-z-50 hover:before:h-btn-h-cover hover:before:w-btn-w-cover",
+        "growing-bubble-tl-secondary":
+          "before:transition-width before:transition-height relative z-10 before:absolute before:left-0 before:top-0 before:z-0 before:h-0 before:w-0 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-primary-500 before:duration-500 before:ease-in-out hover:text-white hover:before:-z-50 hover:before:h-btn-h-cover hover:before:w-btn-w-cover",
+      },
+      intent: {
+        default: "",
+        outline: "",
+      },
+      textColor: {
+        white: "text-white",
+        blue: "primary-300",
+      },
+    },
+    defaultVariants: {
+      intent: "default",
     },
   },
-  defaultVariants: {
-    intent: "default",
-  },
-});
+);
 
 type Props = {
   children: React.ReactNode;
 } & React.ButtonHTMLAttributes<HTMLButtonElement> &
   ButtonVariants;
 
-export function Button({ children, intent, ...props }: Props) {
+export function Button({
+  children,
+  variant,
+  animation,
+  size,
+  intent,
+  textColor,
+  type = "button",
+  ...props
+}: Props) {
   return (
-    <button className={buttonVariants({ intent })} {...props}>
+    <button
+      className={buttonVariants({
+        variant,
+        intent,
+        size,
+        animation,
+        textColor,
+      })}
+      type={type}
+      {...props}
+    >
       {children}
     </button>
   );

src/module/common/checkbox.tsx

@@ -0,0 +1,85 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import React from "react";
+import { Label } from "./label";
+
+export interface CheckboxVariants
+  extends VariantProps<typeof checkboxVariants> {}
+
+const checkboxVariants = cva(
+  "peer size-[18px] cursor-pointer appearance-none rounded border border-solid bg-transparent transition-all duration-500 focus:outline-none focus:ring-0 focus:ring-offset-0 group-hover:border-primary-300",
+  {
+    variants: {
+      variant: {
+        primary: "border-gary-layout-primary",
+      },
+      size: {
+        small: "text-sm",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "small",
+    },
+  },
+);
+
+const svgVariants = cva(
+  [
+    "size-4",
+    "cursor-pointer",
+    "opacity-0",
+    "peer-checked:opacity-100",
+    "transition-opacity",
+    "duration-300",
+  ],
+  {
+    variants: {
+      variant: {
+        primary: "primary-300",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+    },
+  },
+);
+
+type CheckboxProps = {
+  label?: React.ReactNode;
+} & React.InputHTMLAttributes<HTMLInputElement> &
+  CheckboxVariants;
+
+export function Checkbox({
+  label,
+  variant,
+  color,
+  type = "checkbox",
+  ...props
+}: CheckboxProps) {
+  return (
+    <label className="group flex items-center gap-2">
+      <div className="relative flex items-center">
+        <input
+          className={checkboxVariants({ variant })}
+          type={type}
+          {...props}
+        />
+        <svg
+          className={svgVariants({ variant })}
+          fill="#70bbfd"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+          style={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+          }}
+        >
+          <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
+        </svg>
+      </div>
+      {label && <Label>{label}</Label>}
+    </label>
+  );
+}

src/module/common/label.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+const labelVariants = cva(
+  [
+    "label",
+    "cursor-pointer",
+    "transition-all",
+    "duration-500",
+    "group-hover:text-primary-300",
+  ],
+  {
+    variants: {
+      color: {
+        white: "text-white",
+      },
+      size: {
+        small: "text-sm",
+        medium: "text-base",
+        large: "text-lg",
+      },
+      fontWeight: {
+        normal: "font-normal",
+        bold: "font-bold",
+      },
+    },
+    defaultVariants: {
+      color: "white",
+      size: "small",
+      fontWeight: "normal",
+    },
+  },
+);
+
+type LabelProps = {
+  children: React.ReactNode;
+} & VariantProps<typeof labelVariants>;
+
+export const Label: React.FC<LabelProps> = ({
+  children,
+  color,
+  size,
+  fontWeight,
+}) => {
+  return (
+    <span className={labelVariants({ color, size, fontWeight })}>
+      {children}
+    </span>
+  );
+};

src/module/dashboard/components/header.tsx

@@ -9,7 +9,7 @@ import { usePathname } from "next/navigation";
 function Header() {
   const pathname = usePathname();
   return (
-    <div className="navbar sticky top-0 bg-base-100 z-10 shadow-md">
+    <div className="navbar bg-base-100 sticky top-0 z-10 shadow-md">
       {/* Menu toggle for mobile view or small screen */}
       <div className="flex-1">
         <label
@@ -18,7 +18,7 @@ function Header() {
         >
           <Icon icon="menu" />
         </label>
-        <h1 className="text-2xl font-semibold ml-2">{pathname}</h1>
+        <h1 className="ml-2 text-2xl font-semibold">{pathname}</h1>
       </div>
 
       <div className="flex-none">