feat: add shadcn button and move to lucide icons

.eslintrc.cjs

@@ -32,7 +32,7 @@ module.exports = {
   },
   plugins: ["react-refresh", "jsx-a11y", "import"],
   rules: {
-    "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+    "react-refresh/only-export-components": ["off", { allowConstantExport: true }],
     "@typescript-eslint/no-unused-vars": "warn",
     "react-hooks/exhaustive-deps": "off",
     "import/no-unresolved": "error",

components.json

@@ -5,13 +5,13 @@
   "tsx": true,
   "tailwind": {
     "config": "tailwind.config.js",
-    "css": "global.scss",
+    "css": "./src/global.scss",
     "baseColor": "slate",
     "cssVariables": false,
     "prefix": ""
   },
   "aliases": {
-    "components": "@components",
-    "utils": "@utils"
+    "components": "components",
+    "utils": "utils"
   }
 }

package.json

@@ -14,8 +14,8 @@
   },
   "dependencies": {
     "@apollo/client": "^3.8.10",
-    "@heroicons/react": "^2.1.1",
     "@hookform/resolvers": "^3.3.4",
+    "@radix-ui/react-slot": "^1.0.2",
     "@vercel/analytics": "^1.1.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",

src/components/Header/Header.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import { useQuery } from "@apollo/client";
-import { UserIcon } from "@heroicons/react/24/solid";
+import { CircleUser } from "lucide-react";
 import { Link } from "react-router-dom";
 import { LoginModal } from "@components/Login/LoginModal.tsx";
 import { gql } from "@generated/index.ts";
@@ -52,7 +52,7 @@ export function Header() {
       <header className="absolute left-0 top-0 z-10 w-full px-4 py-2 sm:px-6 sm:py-4">
         <div className="flex items-center justify-end">
           <Link to={user.userId ? "/profile" : "#login"}>
-            <UserIcon className="h-10 w-8 cursor-pointer sm:w-10" />
+            <CircleUser className="h-10 w-8 cursor-pointer sm:w-10" />
           </Link>
         </div>
       </header>

src/components/Login/LoginModal.tsx

@@ -1,12 +1,13 @@
 import { useEffect, useState } from "react";
 import { useMutation } from "@apollo/client";
-import { XMarkIcon } from "@heroicons/react/24/solid";
 import { yupResolver } from "@hookform/resolvers/yup";
+import { Loader2, X } from "lucide-react";
 import { useForm } from "react-hook-form";
 import ReactModal from "react-modal";
 import { useLocation } from "react-router-dom";
 import { toast } from "react-toastify";
 import { object, string } from "yup";
+import { Button } from "@components/ui/button.tsx";
 import { gql } from "@generated/index.ts";
 
 const LOGIN_USER = gql(/* GraphQL */ `
@@ -35,7 +36,7 @@ export function LoginModal({ refetchUser }: { refetchUser: () => void }) {
     resolver: yupResolver(schema),
   });
 
-  const [loginMutation, { error: mutationError }] = useMutation(LOGIN_USER, {
+  const [loginMutation, { loading: isLoadingLogin, error: mutationError }] = useMutation(LOGIN_USER, {
     onCompleted: data => {
       data.loginUser.access_token && refetchUser();
       toast.success("Logged in successfully!");
@@ -76,7 +77,7 @@ export function LoginModal({ refetchUser }: { refetchUser: () => void }) {
       <div className="w-full rounded-lg bg-white p-4 shadow">
         <div className="flex w-96 items-center justify-between rounded-t border-b p-4 md:p-5">
           <h3 className="text-xl font-semibold text-gray-900">Sign in</h3>
-          <XMarkIcon onClick={() => setIsOpen(false)} className="h-6 w-6 cursor-pointer sm:w-10" />
+          <X onClick={() => setIsOpen(false)} className="h-6 w-6 cursor-pointer sm:w-10" />
         </div>
 
         <form className="space-y-4 p-4 md:p-5" onSubmit={loginFormSubmit}>
@@ -115,13 +116,13 @@ export function LoginModal({ refetchUser }: { refetchUser: () => void }) {
             />
             {errors.password && <p className="mt-1 text-sm text-red-500">Enter a password.</p>}
           </div>
+
           {mutationError?.message && <p className="text-sm text-red-500">{mutationError.message}</p>}
-          <button
-            type="submit"
-            className="w-full rounded-lg bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300"
-          >
+
+          <Button type="submit" disabled={isLoadingLogin}>
+            {isLoadingLogin && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
             Login to your account
-          </button>
+          </Button>
           <div className="text-sm font-medium text-gray-500">
             Not registered?{" "}
             <a href="#" className="text-blue-700 hover:underline">

src/components/ui/button.tsx

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@utils/cn.ts";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-slate-900 text-slate-50 hover:bg-slate-900/90 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50/90",
+        destructive:
+          "bg-red-500 text-slate-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-slate-50 dark:hover:bg-red-900/90",
+        outline:
+          "border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50",
+        secondary:
+          "bg-slate-100 text-slate-900 hover:bg-slate-100/80 dark:bg-slate-800 dark:text-slate-50 dark:hover:bg-slate-800/80",
+        ghost: "hover:bg-slate-100 hover:text-slate-900 dark:hover:bg-slate-800 dark:hover:text-slate-50",
+        link: "text-slate-900 underline-offset-4 hover:underline dark:text-slate-50",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

yarn.lock

@@ -505,20 +505,20 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.13.10", "@babel/runtime@^7.23.7":
+  version "7.23.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.9.tgz#47791a15e4603bb5f905bc0753801cf21d6345f7"
+  integrity sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.23.2":
   version "7.23.4"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.4.tgz#36fa1d2b36db873d25ec631dcc4923fdc1cf2e2e"
   integrity sha512-2Yv65nlWnWlSpe3fXEyX5i7fx5kIKo4Qbcj+hMO0odwaneFjfXw5fdum+4yL20O0QiaHpia0cYQ9xpNMqrBwHg==
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@babel/runtime@^7.23.7":
-  version "7.23.9"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.9.tgz#47791a15e4603bb5f905bc0753801cf21d6345f7"
-  integrity sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==
-  dependencies:
-    regenerator-runtime "^0.14.0"
-
 "@babel/template@^7.18.10", "@babel/template@^7.20.7", "@babel/template@^7.22.15":
   version "7.22.15"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
@@ -1157,11 +1157,6 @@
   resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.2.0.tgz#5f3d96ec6b2354ad6d8a28bf216a1d97b5426861"
   integrity sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ==
 
-"@heroicons/react@^2.1.1":
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-2.1.1.tgz#422deb80c4d6caf3371aec6f4bee8361a354dc13"
-  integrity sha512-JyyN9Lo66kirbCMuMMRPtJxtKJoIsXKS569ebHGGRKbl8s4CtUfLnyKJxteA+vIKySocO4s1SkTkGS4xtG/yEA==
-
 "@hookform/resolvers@^3.3.4":
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/@hookform/resolvers/-/resolvers-3.3.4.tgz#de9b668c2835eb06892290192de6e2a5c906229b"
@@ -1336,6 +1331,21 @@
     tslib "^2.5.0"
     webcrypto-core "^1.7.7"
 
+"@radix-ui/[email protected]":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz#7ed868b66946aa6030e580b1ffca386dd4d21989"
+  integrity sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-slot@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.2.tgz#a9ff4423eade67f501ffb32ec22064bc9d3099ab"
+  integrity sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.1"
+
 "@redux-devtools/extension@^3.3.0":
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/@redux-devtools/extension/-/extension-3.3.0.tgz#bc775d289f15604c472112920beac2cf4dbb7907"