Add environment variable validation and parsing

Adds a validation schema for the application's environment variables using the Zod library. The parsed environment variables are then exported as constants that can be imported throughout the application, replacing the direct use of process.env.

components/BeerById/BeerPostCommentsPaginationBar.tsx

@@ -19,7 +19,7 @@ const BeerCommentsPaginationBar: FC<BeerCommentsPaginationBarProps> = ({
   <div className="flex items-center justify-center" id="comments-pagination">
     <div className="btn-group">
       <Link
-        className={`btn btn-ghost ${
+        className={`btn-ghost btn ${
           commentsPageNum === 1
             ? 'btn-disabled pointer-events-none'
             : 'pointer-events-auto'
@@ -32,9 +32,9 @@ const BeerCommentsPaginationBar: FC<BeerCommentsPaginationBarProps> = ({
       >
         <FaArrowLeft />
       </Link>
-      <button className="btn btn-ghost pointer-events-none">{commentsPageNum}</button>
+      <button className="btn-ghost btn pointer-events-none">{commentsPageNum}</button>
       <Link
-        className={`btn btn-ghost ${
+        className={`btn-ghost btn ${
           commentsPageNum === commentsPageCount
             ? 'btn-disabled pointer-events-none'
             : 'pointer-events-auto'

components/EditBeerPostForm.tsx

@@ -133,7 +133,7 @@ const EditBeerPostForm: FC<EditBeerPostFormProps> = ({ previousValues }) => {
           {isSubmitting ? 'Submitting...' : 'Submit'}
         </Button>
         <button
-          className={`btn btn-primary w-full rounded-xl ${isSubmitting ? 'loading' : ''}`}
+          className={`btn-primary btn w-full rounded-xl ${isSubmitting ? 'loading' : ''}`}
           type="button"
           onClick={onDelete}
         >

components/ui/Navbar.tsx

@@ -44,7 +44,7 @@ const Navbar = () => {
   return (
     <nav className="navbar bg-primary text-primary-content">
       <div className="flex-1">
-        <Link className="btn btn-ghost text-3xl normal-case" href="/">
+        <Link className="btn-ghost btn text-3xl normal-case" href="/">
           <span className="cursor-pointer text-xl font-bold">The Biergarten App</span>
         </Link>
       </div>
@@ -69,7 +69,7 @@ const Navbar = () => {
       </div>
       <div className="flex-none lg:hidden">
         <div className="dropdown dropdown-end">
-          <label tabIndex={0} className="btn btn-ghost btn-circle">
+          <label tabIndex={0} className="btn-ghost btn-circle btn">
             <span className="w-10 rounded-full">
               <svg
                 xmlns="http://www.w3.org/2000/svg"

components/ui/alerts/ErrorAlert.tsx

@@ -16,7 +16,7 @@ const ErrorAlert: FC<ErrorAlertProps> = ({ error, setError }) => {
 
       <div className="flex-none">
         <button
-          className="btn btn-ghost btn-sm"
+          className="btn-ghost btn-sm btn"
           type="button"
           onClick={() => {
             setError('');

components/ui/forms/Button.tsx

@@ -14,7 +14,7 @@ const Button: FunctionComponent<FormButtonProps> = ({
   // eslint-disable-next-line react/button-has-type
   <button
     type={type}
-    className={`btn btn-primary w-full rounded-xl ${isSubmitting ? 'loading' : ''}`}
+    className={`btn-primary btn w-full rounded-xl ${isSubmitting ? 'loading' : ''}`}
   >
     {children}
   </button>

components/ui/forms/FormPageLayout.tsx

@@ -22,7 +22,7 @@ const FormPageLayout: FC<FormPageLayoutProps> = ({
     <div className="align-center my-20 flex h-fit flex-col items-center justify-center">
       <div className="w-8/12">
         <div className="tooltip tooltip-bottom absolute" data-tip={backLinkText}>
-          <Link href={backLink} className="btn btn-ghost btn-sm p-0">
+          <Link href={backLink} className="btn-ghost btn-sm btn p-0">
             <BiArrowBack className="text-xl" />
           </Link>
         </div>