Add comments pagination, login and register pages

components/ui/Navbar.tsx

@@ -42,9 +42,9 @@ const Navbar = () => {
   ];
 
   return (
-    <nav className="navbar bg-primary">
+    <nav className="navbar bg-primary text-primary-content">
       <div className="flex-1">
-        <Link className="btn-ghost btn text-3xl normal-case" href="/">
+        <Link className="btn btn-ghost text-3xl normal-case" href="/">
           <span className="cursor-pointer text-xl font-bold">The Biergarten App</span>
         </Link>
       </div>
@@ -57,7 +57,7 @@ const Navbar = () => {
                   <span
                     className={`text-lg uppercase ${
                       currentURL === page.slug ? 'font-extrabold' : 'font-semibold'
-                    } text-base-content`}
+                    } text-primary-content`}
                   >
                     {page.name}
                   </span>
@@ -69,7 +69,7 @@ const Navbar = () => {
       </div>
       <div className="flex-none lg:hidden">
         <div className="dropdown-end dropdown">
-          <label tabIndex={0} className="btn-ghost btn-circle btn">
+          <label tabIndex={0} className="btn btn-ghost btn-circle">
             <span className="w-10 rounded-full">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -93,7 +93,7 @@ const Navbar = () => {
             {pages.map((page) => (
               <li key={page.slug}>
                 <Link href={page.slug}>
-                  <span className="select-none">{page.name}</span>
+                  <span className="select-none text-primary-content">{page.name}</span>
                 </Link>
               </li>
             ))}

components/ui/alerts/ErrorAlert.tsx

@@ -0,0 +1,32 @@
+import { Dispatch, FC, SetStateAction } from 'react';
+import { FiAlertTriangle } from 'react-icons/fi';
+
+interface ErrorAlertProps {
+  error: string;
+  setError: Dispatch<SetStateAction<string>>;
+}
+
+const ErrorAlert: FC<ErrorAlertProps> = ({ error, setError }) => {
+  return (
+    <div className="alert alert-error shadow-lg">
+      <div>
+        <FiAlertTriangle className="h-6 w-6" />
+        <span>{error}</span>
+      </div>
+
+      <div className="flex-none">
+        <button
+          className="btn-ghost btn-sm btn"
+          type="button"
+          onClick={() => {
+            setError('');
+          }}
+        >
+          OK
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ErrorAlert;

components/ui/forms/Button.tsx

@@ -7,7 +7,7 @@ interface FormButtonProps {
 
 const Button: FunctionComponent<FormButtonProps> = ({ children, type }) => (
   // eslint-disable-next-line react/button-has-type
-  <button type={type} className="btn btn-primary mt-4 w-full rounded-xl">
+  <button type={type} className="btn-primary btn mt-4 w-full rounded-xl">
     {children}
   </button>
 );