added authentication pages on FE

apps/frontend/package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@testing-library/react": "^16.0.1",
+    "@repo/ui": "workspace:*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.1",

apps/frontend/src/App.tsx

@@ -1,12 +1,16 @@
-import { BrowserRouter, Route, Routes } from "react-router-dom";
-import Main from "./components/Main/Main";
+import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
+import Main from "./pages/Main/Main";
+import Login from "./auth/login";
 
 const App = () => {
   return (
     <>
       <BrowserRouter>
         <Routes>
-          <Route element={<Main />} path="/" />
+          <Route element={<Main />} path="/main" />
+          <Route element={<Login />} path="/login" />
+
+          <Route element={<Navigate to="/login" />} path="*" />
         </Routes>
       </BrowserRouter>
     </>

apps/frontend/src/auth/login.tsx

@@ -0,0 +1,32 @@
+import { Button } from "@repo/ui";
+import { FaGithub } from "react-icons/fa";
+import { FaGoogle } from "react-icons/fa";
+
+const Login = () => {
+  return (
+    <div className="flex flex-center h-screen justify-center items-center">
+      <div className="flex flex-col gap-12">
+        <div className="flex flex-col text-center">
+          <h2 className="font-semibold text-3xl md:text-4xl tracking-tighter">
+            Welcome to{" "}
+            <span className="font-bold bg-gradient-to-b from-blue-400 to-blue-700 bg-clip-text text-transparent tracking-tighter">
+              Buid your own X
+            </span>
+          </h2>
+        </div>
+        <div className="flex flex-col gap-4">
+            <Button className=" flex w-full justify-center items-center gap-4 p-4 font-medium md:text-lg bg-gray-600 hover:bg-gray-900 text-white rounded-xl" onClick={() => {}}>
+              <FaGoogle size={25}/>
+              Sigin with Google
+            </Button>
+            <Button className=" flex w-full justify-center items-center gap-4 p-4 font-medium md:text-lg bg-gray-600 hover:bg-gray-900 text-white rounded-xl" onClick={() => {}}>
+              <FaGithub size={25}/>
+              Signin with Github
+            </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Login;

apps/frontend/src/components/ProfileDropDown.tsx

@@ -0,0 +1,30 @@
+import { LogOut } from "lucide-react";
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@repo/ui";
+
+const ProfileDropdown = () => {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="default">Open</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuLabel>My Account</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <LogOut className="mr-2 h-4 w-4" />
+          <span>Log out</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+export default ProfileDropdown;

apps/frontend/src/pages/Main/Main.tsx

@@ -0,0 +1,30 @@
+import { Button } from "@repo/ui";
+import { useBookStore } from "@/store/booksStore";
+import ProfileDropdown from "../../components/ProfileDropDown";
+
+const Main = () => {
+  const amount = useBookStore((state) => state.amount);
+  const updateAmount = useBookStore((state) => state.updateAmount);
+  return (
+    <>
+      <div className="m-8 flex justify-between">
+        <p className="text-4xl text-black font-extrabold">Build your own X</p>
+        <ProfileDropdown />
+      </div>
+
+      <div className="flex flex-col items-center justify-center min-h-screen">
+        <div className="mt-10 text-center">
+          <h1 className="text-2xl font-medium">Books: {amount}</h1>
+          <Button
+            className="mt-5 bg-slate-500 p-4"
+            onClick={() => updateAmount(10)}
+          >
+            Update Amount
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Main;

apps/frontend/tailwind.config.ts

@@ -1,60 +1 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-    darkMode: ["class"],
-    content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
-  theme: {
-  	extend: {
-  		borderRadius: {
-  			lg: 'var(--radius)',
-  			md: 'calc(var(--radius) - 2px)',
-  			sm: 'calc(var(--radius) - 4px)'
-  		},
-  		colors: {
-  			background: 'hsl(var(--background))',
-  			foreground: 'hsl(var(--foreground))',
-  			card: {
-  				DEFAULT: 'hsl(var(--card))',
-  				foreground: 'hsl(var(--card-foreground))'
-  			},
-  			popover: {
-  				DEFAULT: 'hsl(var(--popover))',
-  				foreground: 'hsl(var(--popover-foreground))'
-  			},
-  			primary: {
-  				DEFAULT: 'hsl(var(--primary))',
-  				foreground: 'hsl(var(--primary-foreground))'
-  			},
-  			secondary: {
-  				DEFAULT: 'hsl(var(--secondary))',
-  				foreground: 'hsl(var(--secondary-foreground))'
-  			},
-  			muted: {
-  				DEFAULT: 'hsl(var(--muted))',
-  				foreground: 'hsl(var(--muted-foreground))'
-  			},
-  			accent: {
-  				DEFAULT: 'hsl(var(--accent))',
-  				foreground: 'hsl(var(--accent-foreground))'
-  			},
-  			destructive: {
-  				DEFAULT: 'hsl(var(--destructive))',
-  				foreground: 'hsl(var(--destructive-foreground))'
-  			},
-  			border: 'hsl(var(--border))',
-  			input: 'hsl(var(--input))',
-  			ring: 'hsl(var(--ring))',
-  			chart: {
-  				'1': 'hsl(var(--chart-1))',
-  				'2': 'hsl(var(--chart-2))',
-  				'3': 'hsl(var(--chart-3))',
-  				'4': 'hsl(var(--chart-4))',
-  				'5': 'hsl(var(--chart-5))'
-  			}
-  		}
-  	}
-  },
-  plugins: [require("tailwindcss-animate")],
-}
+export * from "@repo/ui/tailwind.config"