From d5e497d15dace78e5b5bbd933b85985ba7d58a4c Mon Sep 17 00:00:00 2001
From: Michael Brusegard <56915010+michaelbrusegard@users.noreply.github.com>
Date: Thu, 18 Jan 2024 20:49:54 +0100
Subject: [PATCH] docs: added documentation links to README.md

---
 README.md                                     |   9 +
 src/app/[locale]/(layout)/about/page.tsx      |   2 +-
 src/app/[locale]/(layout)/events/page.tsx     |   2 +-
 src/app/[locale]/(layout)/news/page.tsx       |   2 +-
 src/app/[locale]/layout.tsx                   |   2 +-
 src/app/layout.tsx                            |   4 +-
 src/components/layout/Header.tsx              |   4 +-
 src/components/layout/LogoLink.tsx            |   4 +-
 .../old/context/modal/ModalContext.ts         |  14 --
 src/components/old/context/modal/ModalHook.ts |  11 --
 .../old/context/modal/ModalProvider.tsx       |  74 --------
 src/components/old/modals/AuthModal.tsx       |  32 ----
 src/components/old/pages/Home.tsx             |  49 -----
 src/components/old/structure/Content.tsx      |  34 ----
 src/components/old/structure/Footer.tsx       |  82 ---------
 src/components/old/structure/Header.tsx       |  44 -----
 src/components/old/structure/Modal.tsx        |  51 -----
 src/components/old/structure/Page.tsx         |  18 --
 src/{components => }/design/Field.tsx         | 174 +++++++++---------
 src/{components => }/design/TypeWriter.tsx    |   0
 src/styles/globals.css                        |   8 +
 21 files changed, 108 insertions(+), 512 deletions(-)
 delete mode 100644 src/components/old/context/modal/ModalContext.ts
 delete mode 100644 src/components/old/context/modal/ModalHook.ts
 delete mode 100644 src/components/old/context/modal/ModalProvider.tsx
 delete mode 100644 src/components/old/modals/AuthModal.tsx
 delete mode 100644 src/components/old/pages/Home.tsx
 delete mode 100644 src/components/old/structure/Content.tsx
 delete mode 100644 src/components/old/structure/Footer.tsx
 delete mode 100644 src/components/old/structure/Header.tsx
 delete mode 100644 src/components/old/structure/Modal.tsx
 delete mode 100644 src/components/old/structure/Page.tsx
 rename src/{components => }/design/Field.tsx (50%)
 rename src/{components => }/design/TypeWriter.tsx (100%)

diff --git a/README.md b/README.md
index 6a31951..87b7dea 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,14 @@
 ## Getting Started
 
+Here is a list of documentation to help you get started:
+
+- [Next.js](https://nextjs.org/docs) - Framework for routing and server-side rendering
+- [React](https://react.dev/reference/react) - Library for building user interfaces
+- [Tailwind CSS](https://tailwindcss.com/docs) - Styling library
+- [Shadcn/ui](https://ui.shadcn.com/docs) - Reusable UI components
+- [Lucide](https://lucide.dev/icons/) - Icons library
+- [Next-intl](https://next-intl-docs.vercel.app/) - Internationalization library
+
 First, install dependencies:
 
 ```bash
diff --git a/src/app/[locale]/(layout)/about/page.tsx b/src/app/[locale]/(layout)/about/page.tsx
index 62e11ac..e6f0dae 100644
--- a/src/app/[locale]/(layout)/about/page.tsx
+++ b/src/app/[locale]/(layout)/about/page.tsx
@@ -1,6 +1,6 @@
 import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
 
-export async function generatemeta({
+export async function generateMetadata({
   params: { locale },
 }: {
   params: { locale: string };
diff --git a/src/app/[locale]/(layout)/events/page.tsx b/src/app/[locale]/(layout)/events/page.tsx
index c897d58..06f2b35 100644
--- a/src/app/[locale]/(layout)/events/page.tsx
+++ b/src/app/[locale]/(layout)/events/page.tsx
@@ -1,6 +1,6 @@
 import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
 
-export async function generatemeta({
+export async function generateMetadata({
   params: { locale },
 }: {
   params: { locale: string };
diff --git a/src/app/[locale]/(layout)/news/page.tsx b/src/app/[locale]/(layout)/news/page.tsx
index c0849f0..864f40d 100644
--- a/src/app/[locale]/(layout)/news/page.tsx
+++ b/src/app/[locale]/(layout)/news/page.tsx
@@ -1,6 +1,6 @@
 import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
 
-export async function generatemeta({
+export async function generateMetadata({
   params: { locale },
 }: {
   params: { locale: string };
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
index 7e8e7e3..095affa 100644
--- a/src/app/[locale]/layout.tsx
+++ b/src/app/[locale]/layout.tsx
@@ -30,7 +30,7 @@ export function generateStaticParams() {
   return locales.map((locale) => ({ locale }));
 }
 
-export async function generatemeta({
+export async function generateMetadata({
   params: { locale },
 }: Omit<Props, 'children'>) {
   const t = await getTranslations({ locale, namespace: 'meta' });
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index ff155bc..b331630 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,6 @@
-import { type ReactNode } from "react";
+import { type ReactNode } from 'react';
 
-import "@/styles/globals.css";
+import '@/styles/globals.css';
 
 type Props = {
   children: ReactNode;
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index e8920eb..fc7ae25 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -18,9 +18,7 @@ function Header() {
           events={t('events')}
           about={t('about')}
         />
-        <div>
-          <LogoLink />
-        </div>
+        <LogoLink />
         <div className='flex gap-10'>
           <Nav
             className='hidden items-center gap-6 text-sm md:flex'
diff --git a/src/components/layout/LogoLink.tsx b/src/components/layout/LogoLink.tsx
index 077278f..209f236 100644
--- a/src/components/layout/LogoLink.tsx
+++ b/src/components/layout/LogoLink.tsx
@@ -12,8 +12,8 @@ function LogoLink() {
       href='/'
       aria-label={t('home')}
     >
-      <Logo className='h-5 w-5 md:h-11 md:w-11' />
-      <span className='text-md font-montserrat font-bold md:text-2xl'>
+      <Logo className='h-6 w-6 md:h-8 md:w-8 lg:h-10 lg:w-10' />
+      <span className='text-md font-montserrat font-bold md:text-lg lg:text-2xl'>
         HACKERSPACE
       </span>
     </Link>
diff --git a/src/components/old/context/modal/ModalContext.ts b/src/components/old/context/modal/ModalContext.ts
deleted file mode 100644
index b0a791e..0000000
--- a/src/components/old/context/modal/ModalContext.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { createContext } from 'react';
-
-// Context Interface
-export interface ModalContextType {
-  open: (modalType: string) => void;
-  close: () => void;
-  current: string | null;
-  is_open: boolean;
-}
-
-// Context Creation
-const ModalContext = createContext<ModalContextType | undefined>(undefined);
-
-export default ModalContext
\ No newline at end of file
diff --git a/src/components/old/context/modal/ModalHook.ts b/src/components/old/context/modal/ModalHook.ts
deleted file mode 100644
index cfa619e..0000000
--- a/src/components/old/context/modal/ModalHook.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { useContext } from "react";
-import ModalContext, { ModalContextType } from "./ModalContext";
-
-// Context Usage Function
-export const useModal = (): ModalContextType => {
-  const context = useContext(ModalContext);
-  if (!context) {
-    throw new Error('useModal must be used within a ModalProvider');
-  }
-  return context;
-};
diff --git a/src/components/old/context/modal/ModalProvider.tsx b/src/components/old/context/modal/ModalProvider.tsx
deleted file mode 100644
index d4d75dc..0000000
--- a/src/components/old/context/modal/ModalProvider.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { useState, useEffect } from 'react';
-import { useSearchParams } from 'react-router-dom'
-
-import ModalContext from './ModalContext';
-
-import AuthModal from '../../modals/AuthModal';
-
-// Modals list (could use state, to dynamically add / update modals)
-const modals: { [key: string]: React.ReactNode; } = {
-  auth: <AuthModal />,
-}
-
-// Context Provider Interface
-interface ModalProviderProps {
-  children?: React.ReactNode
-}
-
-// Context Provider Function
-const ModalProvider: React.FC<ModalProviderProps> = ({ children }) => {
-  const [searchParams, setSearchParams] = useSearchParams();
-  const [modal, setModal] = useState<string | null>(null);
-  const [is_open, setIsOpen] = useState<boolean>(false);
-
-  const open = (modalType: string) => {
-    setModal(modalType);
-    setIsOpen(true);
-  };
-
-  const close = () => {
-    setIsOpen(false);
-
-    // Allowing the close animation to play
-    // Read: https://reactcommunity.org/react-modal/styles/transitions/
-    setTimeout(() => {
-      setModal(null);
-    }, 100);
-  };
-
-  // Effect for loading the modal from the url on mount
-  useEffect(() => {
-    const modalFromUrl = searchParams.get('modal');
-    console.log(modalFromUrl);
-    if (modalFromUrl !== null) {
-      open(modalFromUrl);
-    }
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-  
-
-  // Effect for storing the modal in the url
-  useEffect(() => {
-    if (modal !== null) {
-      setSearchParams({modal: modal})
-    }
-    else {
-      setSearchParams({})
-    }
-  
-    return () => {
-      setSearchParams({})
-    }
-  }, [setSearchParams, modal])
-  
-
-  return (
-    <ModalContext.Provider value={{ open, close, current: modal, is_open }}>
-      {modal !== null ? modals[modal] : null}
-      {children}
-    </ModalContext.Provider>
-  );
-};
-
-export default ModalProvider
\ No newline at end of file
diff --git a/src/components/old/modals/AuthModal.tsx b/src/components/old/modals/AuthModal.tsx
deleted file mode 100644
index 9348a50..0000000
--- a/src/components/old/modals/AuthModal.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { FaUser } from 'react-icons/fa'
-
-import Modal from '../structure/Modal'
-import Button from '../components/Button'
-import Field from '../components/Field'
-
-// AuthModal Function: Modal for authenticating the user.
-const AuthModal: React.FC = () => {
-  return (
-    <Modal
-      title="Authentication"
-      icon={<FaUser />}
-    >
-      <Field 
-        title="Email"
-        required
-      />
-      
-      <Field 
-        title="Password"
-        type='password'
-        required
-      />
-      <div className='flex flex-row space-x-2 w-full'>
-        <Button className="btn-primary hover:btn-primary-hover active:btn-primary-active disabled:btn-gray-active w-full" big>Sign in</Button>
-        <Button big disabled className="btn-primary hover:btn-primary-hover active:btn-primary-active disabled:btn-gray-active w-full">Disabled</Button>
-      </div>
-    </Modal>
-  )
-}
-
-export default AuthModal
diff --git a/src/components/old/pages/Home.tsx b/src/components/old/pages/Home.tsx
deleted file mode 100644
index 9013592..0000000
--- a/src/components/old/pages/Home.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import Bg from '../assets/bg.jpg'
-
-import TypeWriter from '../components/TypeWriter'
-import Page from '../structure/Page';
-
-
-// Home Function: This is the homepage, should be located at (/).
-const Home: React.FC = () => {
-  const numbers = Array.from({ length: 5 }, (_, index) => 1 + index);
-  
-  return (
-    <Page>
-      <div className='relative'>
-        <div className='flex items-center justify-center overflow-hidden h-content'>
-          <img className='h-full w-full shrink-0' src={Bg} />
-        </div>
-        <p className='absolute top-2/3 left-10 text-text-50 font-black text-3xl'>Hello</p>
-      </div>
-      <p className='text-text-50 font-black text-3xl'>Some fancy stuff</p>
-      {
-        numbers.map((i, n) => (
-          <TypeWriter key={i} className='text-primary-500 font-mono display-linebreak whitespace-pre-line w-min hover:animate-ping' text={"website.redirect('/about')"} delay={n ** 4} />
-        ))
-      }
-      {
-        numbers.map((i, n) => (
-          <TypeWriter key={i} className='text-primary-500 font-mono display-linebreak whitespace-pre-line w-min hover:animate-ping' text={"website.redirect('/about')"} delay={n ** 4} />
-        ))
-      }
-      {
-        numbers.map((i, n) => (
-          <TypeWriter key={i} className='text-primary-500 font-mono display-linebreak whitespace-pre-line w-min hover:animate-ping' text={"website.redirect('/about')"} delay={n ** 4} />
-        ))
-      }
-      {
-        numbers.map((i, n) => (
-          <TypeWriter key={i} className='text-primary-500 font-mono display-linebreak whitespace-pre-line w-min hover:animate-ping' text={"website.redirect('/about')"} delay={n ** 4} />
-        ))
-      }
-      {
-        numbers.map((i, n) => (
-          <TypeWriter key={i} className='text-primary-500 font-mono display-linebreak whitespace-pre-line w-min hover:animate-ping' text={"website.redirect('/about')"} delay={n ** 4} />
-        ))
-      }
-    </Page>
-  )
-}
-
-export default Home
diff --git a/src/components/old/structure/Content.tsx b/src/components/old/structure/Content.tsx
deleted file mode 100644
index da80150..0000000
--- a/src/components/old/structure/Content.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { } from 'react'
-import { Route, Routes } from 'react-router-dom'
-
-import Header from './Header'
-import Footer from './Footer'
-import Home from '../pages/Home'
-
-//mport Logo from '../assets/logo.png'
-
-
-// Content Interface
-interface ContentProps {
-
-}
-
-// Content Function: The content for the website.
-const Content: React.FC<ContentProps> = () => {
-
-  return (
-    <div id="content" className='flex flex-col h-screen overflow-y-auto'>
-      <Header />
-      <div className='flex flex-col grow'>
-        <Routes>
-          <Route path='/'>
-            <Route index element={ <Home /> } />
-          </Route>
-        </Routes>
-      </div>
-      <Footer />
-    </div>
-  )
-}
-
-export default Content
\ No newline at end of file
diff --git a/src/components/old/structure/Footer.tsx b/src/components/old/structure/Footer.tsx
deleted file mode 100644
index f52679b..0000000
--- a/src/components/old/structure/Footer.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import classNames from 'classnames';
-import { } from 'react'
-
-import { FaInstagram, FaFacebook, FaSlack } from 'react-icons/fa'
-
-import Logo from '../assets/logo.png'
-
-
-// Footer Interface
-interface FooterProps {
-
-}
-
-// Footer Function: The footer for the website.
-const Footer: React.FC<FooterProps> = () => {
-  const footerClasses = {
-    'text-text-950 dark:text-text-50': true,
-    'w-full p-8': true,
-    'bg-accent-500': true,
-    'space-y-28': true
-  }
-
-  const footerSectionWrapperClasses = {
-    'flex flex-row': true,
-    'divide-x-2 divide-accent-800 dark:divide-accent-200': true,
-  };
-
-  const footerSectionClasses = {
-    'flex flex-col space-y-8': true,
-    'w-full px-20': true,
-  }
-
-  return (
-    <div className={classNames(footerClasses)}>
-      <div className={classNames(footerSectionWrapperClasses)}>
-        <div className={classNames(footerSectionClasses)}>
-          <div className='flex flex-row items-center space-x-8'>
-            <img className='h-16 w-16' src={Logo} />
-            <p className='dark:text-text-50 text-text-950 font-black text-3xl'>HACKERSPACE</p>
-          </div>
-          <div className='space-y-2'>
-            <p className='font-bold'>Har du funnet en bug?</p>
-            <p>Send gjerne en mail til DevOps,
-            bruk #dev-public kanalen på Slack,
-            eller gi oss forslag til forbedringer på GitHub.</p>
-          </div>
-        </div>
-        <div className={classNames(footerSectionClasses)}>
-          <div className='space-y-2'>
-            <p className='font-bold'>Verksted</p>
-            <p>Realfagbygget, A-blokka</p>
-            <p>Høgskoleringen 5, 7034 Trondheim</p>
-          </div>
-          <div className='space-y-2'>
-            <p className='font-bold'>Åpningstider</p>
-            <p>Alle hverdager, 10:15 - 18:00</p>
-          </div>
-          <div className='space-y-2'>
-            <p className='font-bold'>Kontakt oss</p>
-            <a href='mailto:hackerspace-styret@idi.ntnu.no'>hackerspace-styret@idi.ntnu.no</a>
-            <div className='flex flex-row justify-start space-x-8 h-10'>
-              <FaInstagram className='h-full w-10' />
-              <FaFacebook className='h-full  w-10' />
-              <FaSlack className='h-full  w-10' />
-            </div>
-          </div>
-        </div>
-        <div className={classNames(footerSectionClasses)}>
-          <p>Hackerspace ipsum dolor sit amet, coding enthusiasts consectetur adipiscing elit. Pythno ac volutpat felis. Quisque eget nisi id terminal vehicula suscipit. In hac habitasse machine learning dictumst. Vivamus cursus metus VR tech tristique, fostering creativity elementum libero tristique. Integer sagittis sapien sit amet odio venenatis, programming vitae fringilla ligula convallis. Our dynamic community et arcu at ante rutrum volutpat. Aliquam erat volutpat. Sed id efficitur lorem. Fusce nec ligula ullamcorper, innovation laoreet elit vel, feugiat nulla. Join us today luctus scelerisque ipsum, at facilisis odio. Sed lacinia, cutting-edge</p>
-        </div>
-      </div>
-      <div className='flex flex-row space-x-32 justify-center'>
-        <p className='text-2xl font-light'>NTNU</p>
-        <p className='text-2xl font-light'>Nettverket KID</p>
-        <p className='underline'>Vilkår for bruk av nettside</p>
-        <p>© 2023 Hackerspace NTNU</p>
-      </div>
-    </div>
-  )
-}
-
-export default Footer
\ No newline at end of file
diff --git a/src/components/old/structure/Header.tsx b/src/components/old/structure/Header.tsx
deleted file mode 100644
index 787550b..0000000
--- a/src/components/old/structure/Header.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { useState } from 'react'
-
-import Logo from '../assets/logo.png'
-import { FaMoon, FaSun } from 'react-icons/fa'
-
-import { useModal } from '../context/modal/ModalHook'
-import Button from '../components/Button'
-
-
-// Header Interface
-interface HeaderProps {
-
-}
-
-// Header Function: The header for the website.
-const Header: React.FC<HeaderProps> = () => {
-  const modal = useModal();
-
-  const [dark, setDark] = useState(true);
-
-  function toggleTheme() {
-    setDark(d => !d)
-    document.body.classList.toggle("dark")
-  }
-
-  return (
-    <div className='flex flex-row items-center justify-between p-8 h-20 bg-secondary-200 dark:bg-secondary-900'>
-      <div className='flex flex-row items-center space-x-8'>
-        <img className='h-16 w-16' src={Logo} />
-        <p className='dark:text-text-50 text-text-950 font-black text-3xl'>HACKERSPACE</p>
-      </div>
-      <div className='flex flex-row items-center'>
-        <button onClick={toggleTheme} className='p-4 h-min rounded-full text-white'>
-          {
-            dark ? <FaSun /> : <FaMoon />
-          }
-        </button>
-        <Button onClick={() => modal.open("auth")} className='btn-primary hover:btn-primary-hover active:btn-primary-active'>Sign in</Button>
-      </div>
-    </div>
-  )
-}
-
-export default Header
\ No newline at end of file
diff --git a/src/components/old/structure/Modal.tsx b/src/components/old/structure/Modal.tsx
deleted file mode 100644
index 915a426..0000000
--- a/src/components/old/structure/Modal.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react'
-import ReactModal from 'react-modal';
-
-import { useModal } from '../context/modal/ModalHook';
-
-import { FaTimes } from 'react-icons/fa'
-
-// Modal Interface
-interface ModalProps {
-  title?: string,
-  icon?: React.ReactNode,
-  className?: string,
-  overlayClassName?: string,
-  contentClassName?: string,
-  children?: React.ReactNode
-}
-
-// Modal Function: The base structure for each modal.
-const Modal: React.FC<ModalProps> = ({ title, icon, className, overlayClassName, contentClassName, children }) => {
-
-  const modal = useModal();
-
-  return (
-    <ReactModal
-      isOpen={modal.is_open}
-      onRequestClose={modal.close}
-      overlayClassName={`${overlayClassName} flex items-center justify-center p-2 fixed top-0 left-0 right-0 bottom-0 bg-overlay-900 z-50`}
-      className={`${className} bg-accent-900 text-text-50 rounded-md opacity-100 w-full max-w-modal min-w-modal max-h-modal outline-none overflow-y-scroll`}
-      contentLabel={title}
-      closeTimeoutMS={100}
-    >
-      <div className='flex flex-col'>
-        <div className='flex items-center justify-between p-6'>
-          <div className='flex items-center'>
-            {icon}
-            <h3 className='ml-2'>{title}</h3>
-          </div>
-          <button onClick={modal.close} className='py-2'>
-            <FaTimes />
-          </button>
-        </div>
-        <div className={`${contentClassName} flex flex-col space-y-4 px-6 pb-6`}>
-          {children}
-        </div>
-      </div>
-    </ReactModal>
-  );
-
-}
-
-export default Modal;
\ No newline at end of file
diff --git a/src/components/old/structure/Page.tsx b/src/components/old/structure/Page.tsx
deleted file mode 100644
index 85a8919..0000000
--- a/src/components/old/structure/Page.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react'
-
-
-// Page Interface
-interface PageProps {
-  children?: React.ReactNode
-}
-
-// Page Function: The base structure for each page.
-const Page: React.FC<PageProps> = ({ children }) => {
-  return (
-    <div className='flex flex-col h-full'>
-      {children}
-    </div>
-  )
-}
-
-export default Page
\ No newline at end of file
diff --git a/src/components/design/Field.tsx b/src/design/Field.tsx
similarity index 50%
rename from src/components/design/Field.tsx
rename to src/design/Field.tsx
index b5ab39f..47f6fb2 100644
--- a/src/components/design/Field.tsx
+++ b/src/design/Field.tsx
@@ -1,7 +1,10 @@
+import { Eye, EyeOff } from 'lucide-react';
+
 import React, { useState } from 'react';
-import classNames from 'classnames';
-import Button from './Button';
-import { FaEye, FaEyeSlash } from 'react-icons/fa';
+
+import { cx } from '@/lib/utils';
+
+import { Button } from '@/components/ui/Button';
 
 interface FieldProps {
   className?: string;
@@ -16,7 +19,7 @@ interface FieldProps {
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
   onEnter?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-  _icon?: React.ComponentType<{className: string}>;
+  _icon?: React.ComponentType<{ className: string }>;
   readOnly?: boolean;
   placeholder?: string;
   step?: number;
@@ -53,8 +56,7 @@ const Field: React.FC<FieldProps> = ({
   disabled,
   error,
   id,
-  onClick
-
+  onClick,
 }) => {
   const [showPassword, setShowPassword] = useState(false);
 
@@ -103,126 +105,114 @@ const Field: React.FC<FieldProps> = ({
     if (onClick) {
       onClick(event);
     }
-  }
+  };
 
   const toggleShowPassword = () => {
     setShowPassword((showPassword) => !showPassword);
   };
 
   return (
-    <div className={`text-sm font-bold w-full`}>
-      {
-        title ? 
+    <div className={`w-full text-sm font-bold`}>
+      {title ? (
         <span className='text-text-50 select-none'>
           {title}
-          {
-            required ? 
-            <span className='text-red-500 ml-1'>*</span> 
-            : null
-          }
+          {required ? <span className='ml-1 text-red-500'>*</span> : null}
         </span>
-        : null
-      }
+      ) : null}
       <div className='flex'>
-        <div 
-          className={classNames([
+        <div
+          className={cx([
             className,
-            "flex transition-all duration-200 rounded-md outline-none w-full shadow-md",
-            readOnly || disabled ? 'bg-accent-500' : 'bg-accent-800',
-            disabled ? 'cursor-not-allowed text-text-50' : 'cursor-auto'
+            'flex w-full rounded-md shadow-md outline-none transition-all duration-200',
+            readOnly ?? disabled ? 'bg-accent-500' : 'bg-accent-800',
+            disabled ? 'text-text-50 cursor-not-allowed' : 'cursor-auto',
           ])}
         >
-          <div className='w-full h-full relative'>
+          <div className='relative h-full w-full'>
             <input
               id={id}
-              type={(type === 'password' && showPassword) ? 'text' : type}
+              type={type === 'password' && showPassword ? 'text' : type}
               value={value}
               placeholder={placeholder}
               step={step}
-              readOnly={readOnly || onClick !== undefined}
+              readOnly={readOnly ?? onClick !== undefined}
               disabled={disabled}
               onChange={_onChange}
               onFocus={_onFocus}
               onBlur={_onBlur}
               onClick={_onClick}
               onKeyDown={_onKeyDown}
-              className={classNames([
-                "w-full h-10 bg-transparent border-2 outline-none leading-6 p-2 select-all font-semibold",
-                buttons || (type === 'password') ? 'rounded-l-md' : 'rounded-md',
-                error ? 'border-red-500' : 'border-accent-700 hover:border-accent-600',
+              className={cx([
+                'h-10 w-full select-all border-2 bg-transparent p-2 font-semibold leading-6 outline-none',
+                buttons ?? type === 'password' ? 'rounded-l-md' : 'rounded-md',
+                error
+                  ? 'border-red-500'
+                  : 'border-accent-700 hover:border-accent-600',
                 disabled ? 'cursor-not-allowed' : '',
                 onClick ? 'cursor-pointer' : '',
                 _icon ? 'pr-[1.75rem]' : '',
               ])}
             />
-            {
-              _icon
-              ?
+            {_icon ? (
               <span className='absolute right-2 top-3'>
-                <_icon className='h-4 w-4 text-accent-50'/>
+                <_icon className='text-accent-50 h-4 w-4' />
               </span>
-              : null
-            }
+            ) : null}
           </div>
-          {
-            buttons || (type === 'password')
-            ?
-            <div className='flex items-center relative'>
-              {
-                buttons !== undefined ?
-                buttons.map((value, index) => {
-                  return (
-                    <Button 
-                      className={classNames([
-                        'h-full',
-                        buttons.length === 1 ? 'bg-green-500 px-2' : 'bg-accent-500 w-10',
-                        index === buttons.length - 1 ? ' rounded-l-none rounded-r-md' : 'rounded-none',
-                        'disabled:bg-accent-500',
-                        value.className
-                      ])} 
-                      key={index}
-                      onClick={value.onClick}
-                      disabled={value.disabled || disabled}
-                    >
-                      {value.label}
-                    </Button>
-                  )
-                })
-
-                : null
-              }
-              {
-                type === 'password' ?
-                  <Button 
-                    className={classNames([
-                      'h-full',
-                      'rounded-l-none rounded-r-md',
-                      'disabled:bg-accent-500',
-                      buttons !== undefined ? 'bg-green-500 px-2' : 'bg-accent-500 w-10'
-                    ])} 
-                    onClick={toggleShowPassword}
-                  >
-                    {
-                      showPassword ?
-                      <FaEyeSlash className='w-full'/>
-                      : <FaEye className='w-full'/>
-                    }
-                  </Button>
-                : null
-              }
+          {buttons ?? type === 'password' ? (
+            <div className='relative flex items-center'>
+              {buttons !== undefined
+                ? buttons.map((value, index) => {
+                    return (
+                      <Button
+                        className={cx([
+                          'h-full',
+                          buttons.length === 1
+                            ? 'bg-green-500 px-2'
+                            : 'bg-accent-500 w-10',
+                          index === buttons.length - 1
+                            ? ' rounded-l-none rounded-r-md'
+                            : 'rounded-none',
+                          'disabled:bg-accent-500',
+                          value.className,
+                        ])}
+                        key={index}
+                        onClick={value.onClick}
+                        disabled={value.disabled ?? disabled}
+                      >
+                        {value.label}
+                      </Button>
+                    );
+                  })
+                : null}
+              {type === 'password' ? (
+                <Button
+                  className={cx([
+                    'h-full',
+                    'rounded-l-none rounded-r-md',
+                    'disabled:bg-accent-500',
+                    buttons !== undefined
+                      ? 'bg-green-500 px-2'
+                      : 'bg-accent-500 w-10',
+                  ])}
+                  onClick={toggleShowPassword}
+                >
+                  {showPassword ? (
+                    <EyeOff className='w-full' />
+                  ) : (
+                    <Eye className='w-full' />
+                  )}
+                </Button>
+              ) : null}
             </div>
-            : null
-          }
+          ) : null}
         </div>
-        
       </div>
-      {
-        error
-        ? <span className='text-xs font-light text-red-500'>{error}</span> 
-        : null
-      }
+      {error ? (
+        <span className='text-xs font-light text-red-500'>{error}</span>
+      ) : null}
     </div>
-  )
-}
+  );
+};
 
-export default Field
+export default Field;
diff --git a/src/components/design/TypeWriter.tsx b/src/design/TypeWriter.tsx
similarity index 100%
rename from src/components/design/TypeWriter.tsx
rename to src/design/TypeWriter.tsx
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 3365cd1..b27bb5e 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -52,6 +52,14 @@
     --ring: 142.4 71.8% 29.2%; /* #15803d */
   }
 
+  ::selection {
+    @apply bg-primary/50;
+  }
+
+  ::-moz-selection {
+    @apply bg-primary/50;
+  }
+
   h1 {
     @apply scroll-m-20 font-montserrat text-4xl font-extrabold tracking-tight lg:text-5xl;
   }