refactor: use ui elements from @eventer/ui package

Author: betich

apps/web/src/app/auth/callback/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Button } from "@eventer/ui";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
@@ -168,13 +169,9 @@ export default function AuthCallback() {
 							</div>
 							<h2 className="text-xl font-semibold text-red-900">Authentication Failed</h2>
 							<p className="text-red-600 mt-2">{message}</p>
-							<button
-								type="button"
-								onClick={() => router.push("/")}
-								className="mt-4 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
-							>
+							<Button type="button" onClick={() => router.push("/")}>
 								Go Home
-							</button>
+							</Button>
 						</>
 					)}
 				</div>

apps/web/src/app/auth/login/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Button } from "@eventer/ui";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
@@ -70,13 +71,9 @@ export default function TestPage() {
 									<p className="text-xs text-gray-400 mt-1">ID: {user.id}</p>
 								</div>
 							</div>
-							<button
-								type="button"
-								onClick={handleSignOut}
-								className="w-full mt-4 py-2 px-4 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-							>
+							<Button type="button" onClick={handleSignOut} variant="destructive">
 								Sign Out
-							</button>
+							</Button>
 						</div>
 					</div>
 				</div>
@@ -94,13 +91,9 @@ export default function TestPage() {
 					</p>
 				</div>
 				<div>
-					<button
-						type="button"
-						onClick={handleGoogleSignIn}
-						className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-					>
+					<Button type="button" onClick={handleGoogleSignIn}>
 						Sign in with Google
-					</button>
+					</Button>
 				</div>
 			</div>
 		</div>

apps/web/src/app/events/layout.tsx

@@ -2,6 +2,7 @@
 
 // Auth Guard for Dashboard Page
 
+import { Button } from "@eventer/ui";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { client } from "@/lib/client";
@@ -49,13 +50,9 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
 		<div className="min-h-screen flex flex-col">
 			<header className="bg-gray-800 text-white flex justify-between p-4">
 				<h1 className="text-xl">Dashboard</h1>
-				<button
-					type="button"
-					onClick={() => handleLogout()}
-					className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
-				>
+				<Button type="button" onClick={() => handleLogout()} variant="destructive">
 					Logout
-				</button>
+				</Button>
 			</header>
 			<main className="flex-1 p-6 bg-gray-100">{children}</main>
 		</div>

packages/ui/package.json

@@ -4,6 +4,7 @@
 	"private": true,
 	"type": "module",
 	"exports": {
+		".": "./src/index.ts",
 		"./*": "./src/*.tsx",
 		"./globals.css": "./src/globals.css"
 	},

packages/ui/src/components/atoms/index.ts

@@ -0,0 +1,2 @@
+export * from "./button";
+export * from "./input";

packages/ui/src/components/index.ts

@@ -0,0 +1,4 @@
+export * from "./atoms";
+export * from "./molecules";
+export * from "./organisms";
+export * from "./templates";

packages/ui/src/components/molecules/index.ts

@@ -0,0 +1 @@
+export {};

packages/ui/src/components/organisms/index.ts

@@ -0,0 +1 @@
+export {};

packages/ui/src/components/templates/index.ts

@@ -0,0 +1 @@
+export {};

packages/ui/src/index.ts

@@ -0,0 +1 @@
+export * from "./components";