use daisyui

minhd-vu · Feb 25, 2024 · fabc67e · fabc67e
1 parent c395100
commit fabc67e
Show file tree

Hide file tree

Showing 23 changed files with 308 additions and 223 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -1,33 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -5,6 +5,7 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
+import ThemeProvider from "@/components/ThemeProvider";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -21,12 +22,14 @@ export default async function RootLayout({
   const session = await getServerSession();
 
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <body className={inter.className}>
         <SessionProvider session={session}>
-          <Navbar />
-          {children}
-          <Footer />
+          <ThemeProvider>
+            <Navbar />
+            {children}
+            <Footer />
+          </ThemeProvider>
         </SessionProvider>
       </body>
     </html>

diff --git a/app/leaderboard/page.tsx b/app/leaderboard/page.tsx
@@ -25,46 +25,30 @@ async function getLeaderboardUsers() {
 export default async function Leaderboard() {
   const users = await getLeaderboardUsers();
 
-  const rows = users.map((user) => (
-    <tr
-      key={user.name}
-      className="bg-white border-b dark:bg-gray-800 dark:border-gray-700"
-    >
-      <th
-        scope="row"
-        className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
-      >
-        {user.name}
-      </th>
-      <td className="px-6 py-4">{user.kills}</td>
-      <td className="px-6 py-4">{user.deaths}</td>
-      <td className="px-6 py-4">{user.wins}</td>
+  const rows = users.map((user, i) => (
+    <tr key={user.name} className="hover">
+      <th>{i + 1}</th>
+      <th>{user.name}</th>
+      <td>{user.kills}</td>
+      <td>{user.deaths}</td>
+      <td>{user.wins}</td>
     </tr>
   ));
 
   return (
-    <>
-      <div className="relative overflow-x-auto">
-        <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-          <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
-            <tr>
-              <th scope="col" className="px-6 py-3">
-                Name
-              </th>
-              <th scope="col" className="px-6 py-3">
-                Kills
-              </th>
-              <th scope="col" className="px-6 py-3">
-                Deaths
-              </th>
-              <th scope="col" className="px-6 py-3">
-                Wins
-              </th>
-            </tr>
-          </thead>
-          <tbody>{rows}</tbody>
-        </table>
-      </div>
-    </>
+    <div className="overflow-x-auto bg-base-300">
+      <table className="table">
+        <thead>
+          <tr>
+            <th>Rank</th>
+            <th>Name</th>
+            <th>Kills</th>
+            <th>Deaths</th>
+            <th>Wins</th>
+          </tr>
+        </thead>
+        <tbody>{rows}</tbody>
+      </table>
+    </div>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,9 +1,13 @@
-import LoginButton from "@/components/LoginButton";
+import Hero from "@/components/Hero";
 import Party from "@/components/Party";
 import { getServerSession } from "next-auth";
 
 export default async function Home() {
   const session = await getServerSession();
 
-  return session ? <Party /> : <LoginButton />;
+  return (
+    <div className="min-h-screen bg-base-200">
+      <div>{session ? <Party /> : <Hero />}</div>
+    </div>
+  );
 }
diff --git a/components/AdminBadge.tsx b/components/AdminBadge.tsx
@@ -1,7 +1,3 @@
 export default function AdminBadge() {
-  return (
-    <span className="bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300">
-      Admin
-    </span>
-  );
+  return <span className="badge badge-primary mx-2">admin</span>;
 }
diff --git a/components/Alert.tsx b/components/Alert.tsx
@@ -0,0 +1,20 @@
+export default function Alert({ children }: { children: React.ReactNode }) {
+  return (
+    <div role="alert" className="alert alert-error">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="stroke-current shrink-0 h-6 w-6"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+        />
+      </svg>
+      <span>{children}</span>
+    </div>
+  );
+}
diff --git a/components/CreateParty.tsx b/components/CreateParty.tsx
@@ -18,10 +18,7 @@ export default function CreateParty() {
   }
 
   return (
-    <button
-      className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
-      onClick={() => createParty()}
-    >
+    <button className="btn btn-primary" onClick={() => createParty()}>
       Create Party
     </button>
   );

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -1,16 +1,18 @@
 export default async function Footer() {
   return (
-    <footer className="fixed bottom-0 left-0 z-20 w-full p-4 bg-white border-t border-gray-200 shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800 dark:border-gray-600">
-      <span className="text-sm text-gray-500 sm:text-center dark:text-gray-400">
-        © 2024{" "}
-        <a
-          href="https://assassinspartygame.vercel.app/"
-          className="hover:underline"
-        >
-          Assassins™
-        </a>
-        . All Rights Reserved.
-      </span>
+    <footer className="footer footer-center p-4 bg-base-300 text-base-content fixed bottom-0">
+      <aside>
+        <p>
+          © 2024{" "}
+          <a
+            href="https://assassinspartygame.vercel.app/"
+            className="hover:underline"
+          >
+            Assassins™
+          </a>{" "}
+          . All Rights Reserved.{" "}
+        </p>
+      </aside>
     </footer>
   );
 }
diff --git a/components/Hero.tsx b/components/Hero.tsx
@@ -0,0 +1,17 @@
+import LoginButton from "./LoginButton";
+
+export default function Hero() {
+  return (
+    <div className="hero min-h-screen bg-base-200">
+      <div className="hero-content text-center">
+        <div>
+          <h1 className="text-5xl font-bold">Welcome to Assassins!</h1>
+          <p className="py-6">
+            To start playing Assassins live action game, please login.
+          </p>
+          <LoginButton className="btn btn-primary" />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/JoinParty.tsx b/components/JoinParty.tsx
@@ -27,20 +27,15 @@ export default function JoinParty() {
 
   return (
     <form onSubmit={onSubmit}>
-      <label htmlFor="code">Party Code:</label>
       <input
         type="text"
         id="code"
         name="code"
-        className="bg-gray-200 appearance-none border-2 border-gray-200 rounded py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500"
+        className="input input-bordered"
+        placeholder="Party Code"
         required
       />
-      <button
-        type="submit"
-        className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
-      >
-        Join Party
-      </button>
+      <button className="btn btn-primary">Join Party</button>
     </form>
   );
 }
diff --git a/components/KillTarget.tsx b/components/KillTarget.tsx
@@ -20,11 +20,7 @@ export default function KillTarget() {
   }
 
   return (
-    <button
-      type="button"
-      className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
-      onClick={() => killTarget()}
-    >
+    <button className="btn btn-warning" onClick={() => killTarget()}>
       Kill Target
     </button>
   );

diff --git a/components/LeaveParty.tsx b/components/LeaveParty.tsx
@@ -12,11 +12,7 @@ export default function LeaveParty() {
   }
 
   return (
-    <button
-      type="button"
-      className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
-      onClick={() => leaveParty()}
-    >
+    <button className="btn btn-error" onClick={() => leaveParty()}>
       Leave Party
     </button>
   );

diff --git a/components/LoginButton.tsx b/components/LoginButton.tsx
@@ -2,25 +2,19 @@
 
 import { useSession, signIn, signOut } from "next-auth/react";
 
-export default function LoginButton() {
+export default function LoginButton({ className }: { className?: string }) {
   const { data: session } = useSession();
 
   if (session) {
     return (
-      <button
-        className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"
-        onClick={() => signOut()}
-      >
+      <button className={className} onClick={() => signOut()}>
         Logout
       </button>
     );
   }
 
   return (
-    <button
-      className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"
-      onClick={() => signIn()}
-    >
+    <button className={className} onClick={() => signIn()}>
       Login
     </button>
   );

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -1,31 +1,25 @@
 import LoginButton from "./LoginButton";
+import ThemeController from "./ThemeController";
 
-export default function Navbar() {
+export default async function Navbar() {
   return (
-    <nav className="bg-white border-gray-200 dark:bg-gray-900">
-      <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
-        <a href="/" className="flex items-center space-x-3 rtl:space-x-reverse">
-          <span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">
-            Assassins
-          </span>
+    <div className="navbar bg-base-100">
+      <div className="flex-1">
+        <a className="btn btn-ghost text-xl" href="/">
+          Assassins
         </a>
-        <div className="hidden w-full md:block md:w-auto" id="navbar-default">
-          <ul className="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
-            <li>
-              <a
-                href="/leaderboard"
-                className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"
-                aria-current="page"
-              >
-                Leaderboard
-              </a>
-            </li>
-            <li>
-              <LoginButton />
-            </li>
-          </ul>
-        </div>
       </div>
-    </nav>
+      <div className="flex-none">
+        <ul className="menu menu-horizontal px-2">
+          <li>
+            <a href="/leaderboard">Leaderboard</a>
+          </li>
+          <li>
+            <LoginButton />
+          </li>
+        </ul>
+        <ThemeController />
+      </div>
+    </div>
   );
 }