Add comments pagination, login and register pages

components/BeerById/CommentCard.tsx

@@ -13,7 +13,7 @@ const CommentCard: React.FC<{
   }, [comment.createdAt]);
 
   return (
-    <div className="card-body h-[1/9]">
+    <div className="card-body h-64">
       <div className="flex justify-between">
         <div>
           <h3 className="text-2xl font-semibold">{comment.postedBy.username}</h3>

components/Login/LoginForm.tsx

@@ -2,8 +2,10 @@ import sendLoginUserRequest from '@/requests/sendLoginUserRequest';
 import LoginValidationSchema from '@/services/User/schema/LoginValidationSchema';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useRouter } from 'next/router';
+import { useState } from 'react';
 import { useForm, SubmitHandler } from 'react-hook-form';
 import { z } from 'zod';
+import ErrorAlert from '../ui/alerts/ErrorAlert';
 import FormError from '../ui/forms/FormError';
 import FormInfo from '../ui/forms/FormInfo';
 import FormLabel from '../ui/forms/FormLabel';
@@ -13,7 +15,7 @@ import FormTextInput from '../ui/forms/FormTextInput';
 type LoginT = z.infer<typeof LoginValidationSchema>;
 const LoginForm = () => {
   const router = useRouter();
-  const { register, handleSubmit, formState } = useForm<LoginT>({
+  const { register, handleSubmit, formState, reset } = useForm<LoginT>({
     resolver: zodResolver(LoginValidationSchema),
     defaultValues: {
       username: '',
@@ -23,18 +25,23 @@ const LoginForm = () => {
 
   const { errors } = formState;
 
+  const [responseError, setResponseError] = useState<string>('');
+
   const onSubmit: SubmitHandler<LoginT> = async (data) => {
     try {
       const response = await sendLoginUserRequest(data);
 
       router.push(`/users/${response.id}`);
     } catch (error) {
-      console.error(error);
+      if (error instanceof Error) {
+        setResponseError(error.message);
+        reset();
+      }
     }
   };
 
   return (
-    <form className="form-control w-9/12 space-y-5" onSubmit={handleSubmit(onSubmit)}>
+    <form className="form-control w-full space-y-5" onSubmit={handleSubmit(onSubmit)}>
       <div>
         <FormInfo>
           <FormLabel htmlFor="username">username</FormLabel>
@@ -65,8 +72,9 @@ const LoginForm = () => {
         </FormSegment>
       </div>
 
+      {responseError && <ErrorAlert error={responseError} setError={setResponseError} />}
       <div className="w-full">
-        <button type="submit" className="btn btn-primary w-full">
+        <button type="submit" className="btn-primary btn w-full">
           Login
         </button>
       </div>

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>
 );