Use classNames library

Teknologforeningen · Sep 4, 2023 · e7a90fd · e7a90fd
1 parent f901de7
commit e7a90fd
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 15 deletions.
diff --git a/components/PageNavigation.tsx b/components/PageNavigation.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import classNames from 'classnames'
 
 type PageNavigationProps = {
   currentPage: number
@@ -28,11 +29,12 @@ const PageNavigation = ({
       {Array.from({ length: totalPages }, (_, index) => (
         <button onClick={() => setPage(index + 1)} key={index + 1}>
           <p
-            className={`rounded-lg p-2 ${
+            className={classNames(
+              'rounded-lg p-2',
               currentPage === index + 1
                 ? 'bg-teknologröd text-white'
                 : 'hover:bg-gray-300'
-            }`}
+            )}
           >
             {index + 1}
           </p>

diff --git a/components/header/navbar/MenuIcon.tsx b/components/header/navbar/MenuIcon.tsx
@@ -1,17 +1,17 @@
 import { MouseEventHandler } from 'react'
+import classNames from 'classnames'
 
 type MenuBarProps = {
   className: string
-  opacity?: number
 }
 
-const MenuBar = ({ className, opacity = 1 }: MenuBarProps) => {
+const MenuBar = ({ className }: MenuBarProps) => {
   return (
     <div
-      className={`${className} h-[2px] w-7 origin-left transform bg-white transition-all duration-[.4s] ease-in-out`}
-      style={{
-        opacity,
-      }}
+      className={classNames(
+        className,
+        'h-[2px] w-[28px] origin-left transform bg-white transition-all duration-[.4s] ease-in-out'
+      )}
     />
   )
 }
@@ -23,10 +23,14 @@ type MenuIconProps = {
 
 const MenuIcon = ({ open, onClick }: MenuIconProps) => (
   <div className="z-50 m-2 p-2 md:hidden" onClick={onClick}>
-    <MenuBar className={`${open ? 'rotate-[42deg]' : 'rotate-0'} mb-[7px]`} />
     <MenuBar
-      opacity={open ? 0 : 1}
-      className={`${open ? 'translate-x-full' : 'translate-x-0'} mb-[7px]`}
+      className={classNames(open ? 'rotate-[42deg]' : 'rotate-0', 'mb-[7px]')}
+    />
+    <MenuBar
+      className={classNames(
+        open ? 'translate-x-full opacity-0' : 'translate-x-0 opacity-100',
+        'mb-[7px]'
+      )}
     />
     <MenuBar className={open ? '-rotate-[42deg]' : 'rotate-0'} />
   </div>

diff --git a/components/header/navbar/SideMenu.tsx b/components/header/navbar/SideMenu.tsx
@@ -1,4 +1,5 @@
 import { ReactNode } from 'react'
+import classNames from 'classnames'
 
 type SideMenuProps = {
   open: boolean
@@ -7,9 +8,10 @@ type SideMenuProps = {
 
 const SideMenu = ({ open, children }: SideMenuProps) => (
   <div
-    className={`${
-      open ? 'translate-y-0' : '-translate-y-full'
-    } duration-400 fixed left-0 top-0 z-10 h-screen w-full overflow-x-hidden bg-darkgray px-4 py-16 transition ease-in-out descendant:mb-2 md:hidden`}
+    className={classNames(
+      open ? 'translate-y-0' : '-translate-y-full',
+      'duration-400 fixed left-0 top-0 z-10 h-screen w-full overflow-x-hidden bg-darkgray px-4 py-16 transition ease-in-out descendant:mb-2 md:hidden'
+    )}
   >
     {children}
   </div>

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -2,6 +2,7 @@ import type { AppProps } from 'next/app'
 import Head from 'next/head'
 import localFont from 'next/font/local'
 import { SessionProvider } from 'next-auth/react'
+import classNames from 'classnames'
 
 import '@styles/globals.css'
 import '@styles/links.css'
@@ -39,7 +40,11 @@ const TFApp = ({ Component, pageProps }: AppProps) => {
         <link rel="shortcut icon" href="/favicon.ico" />
       </Head>
       <main
-        className={`${raleway.variable} ${montserrat.variable} h-full font-body`}
+        className={classNames(
+          raleway.variable,
+          montserrat.variable,
+          'h-full font-body'
+        )}
       >
         <SessionProvider session={pageProps.session}>
           <Component {...pageProps} />