add code splitting, code clean up

src/Components/EmojiPicker/EmojiPicker.tsx → src/Components/EmojiPicker/index.tsx

@@ -24,7 +24,7 @@ function EmojiPicker({ defaultEmote, index, onEmotePick }: EmojiPickerProps) {
   return (
     <div className="relative" ref={wrapperRef}>
       <button
-        className="label-text w-16 text-3xl bg-white p-3 rounded-md shadow-md transition hover:scale-95"
+        className="label-text w-16 text-3xl bg-white p-3 rounded-lg shadow transition hover:scale-95"
         onClick={() => setDisplayPicker(!displayPicker)}
       >
         {chosenEmoji?.emoji || defaultEmote}

src/Components/IconButton/IconButton.tsx → src/Components/IconButton/index.tsx

@@ -9,7 +9,7 @@ interface IconButtonProps {
 function IconButton({ icon, onClick, selected = false }: IconButtonProps & React.HTMLProps<HTMLButtonElement>) {
   return (
     <button
-      className={`bg-white text-3xl p-3 border-4 border-transparent rounded-xl duration-100 m-2 shadow-lg ${
+      className={`bg-white text-3xl p-3 border-4 border-transparent rounded-lg duration-100 m-2 shadow ${
         selected ? 'scale-90 border-slate-300' : ''
       }`}
       onClick={onClick}

src/Components/Input/Input.tsx → src/Components/Input/index.tsx

@@ -13,7 +13,7 @@ function Input({
       <label className="block">{label}</label>
       <input
         {...props}
-        className="block mt-2 w-full py-3 px-4 focus:outline-none rounded-md shadow-md"
+        className="block mt-2 w-full py-3 px-4 focus:outline-none rounded-lg shadow"
       />
     </div>
   );

src/Components/LoginButton/index.tsx

@@ -0,0 +1,27 @@
+interface LoginButtonProps {
+  image: string;
+  onClick?: () => void;
+  type?: 'button' | 'submit' | 'reset' | undefined;
+}
+
+function LoginButton({
+  image,
+  children,
+  onClick,
+  type = 'button',
+  ...props
+}: LoginButtonProps & React.HTMLProps<HTMLButtonElement>) {
+  return (
+    <button
+      type={type}
+      onClick={onClick}
+      className="flex py-2 pr-4 pl-2 font-medium text-zinc-900 bg-white rounded-lg shadow border items-center hover:bg-zinc-50 active:bg-zinc-50"
+      {...props}
+    >
+      <img className="mx-2" width="24px" height="24px" src={image} />
+      {children}
+    </button>
+  );
+}
+
+export default LoginButton;

src/Layouts/Logo/Logo.tsx → src/Layouts/Logo/index.tsx

@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom';
-import './Logo.scss';
+import './index.scss';
 
 function Logo() {
   return (

src/Layouts/Navigation/Navigation.tsx → src/Layouts/Navigation/index.tsx

@@ -1,4 +1,4 @@
-import Logo from '../Logo/Logo';
+import Logo from '../Logo';
 
 function Navigation() {
   return (

src/Pages/CreatePage/CreatePage.tsx → src/Pages/CreatePage/index.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import Button, { ButtonSize, ButtonVariant } from '../../Components/Button';
-import EmojiPicker from '../../Components/EmojiPicker/EmojiPicker';
-import Input from '../../Components/Input/Input';
+import EmojiPicker from '../../Components/EmojiPicker';
+import Input from '../../Components/Input';
 
 function CreatePage() {
   const [title, setTitle] = useState('');

src/Pages/FormPage/FormPage.tsx → src/Pages/FormPage/index.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import Button, { ButtonSize, ButtonVariant } from '../../Components/Button';
-import IconButton from '../../Components/IconButton/IconButton';
+import IconButton from '../../Components/IconButton';
 
 function FormPage() {
   const { formId } = useParams();
@@ -44,7 +44,7 @@ function FormPage() {
       </div>
       <div className="mt-8">
         <textarea
-          className="w-11/12 h-56 resize-none rounded-lg shadow-md p-4 focus:outline-none lg:w-1/2"
+          className="w-11/12 h-56 resize-none rounded-lg shadow p-4 focus:outline-none lg:w-1/2"
           placeholder="Tell Us More"
           value={answer}
           onChange={handleInputAnswer}

src/Pages/LoginPage/LoginPage.tsx → src/Pages/LoginPage/index.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import Github from '../../Assets/github.svg';
 import Google from '../../Assets/google.svg';
-import LoginButton from '../../Components/LoginButton/LoginButton';
+import LoginButton from '../../Components/LoginButton';
 import {
   auth,
   signInWithGoogle,
@@ -11,7 +11,6 @@ import {
 import { useAuthState } from 'react-firebase-hooks/auth';
 import Button, { ButtonVariant } from '../../Components/Button';
 
-// todo: clean up code and add other providers
 function LoginPage() {
   const [user, loading, error] = useAuthState(auth);
 
@@ -24,17 +23,13 @@ function LoginPage() {
   return (
     <div className="container px-4 m-auto mt-10 text-center md:px-8">
       <h1 className="text-5xl font-bold text-center">Sign In</h1>
-      <div className="flex flex-col items-center justify-center pt-3">
-        <LoginButton
-          image={Google}
-          loginType="Sign in with Google"
-          onClick={signInWithGoogle}
-        />
-        <LoginButton
-          image={Github}
-          loginType="Sign in with Github"
-          onClick={signInWithGithub}
-        />
+      <div className="flex flex-col items-center justify-center pt-8 space-y-4">
+        <LoginButton image={Google} onClick={signInWithGoogle}>
+          Sign in with Google
+        </LoginButton>
+        <LoginButton image={Github} onClick={signInWithGithub}>
+          Sign in with Github
+        </LoginButton>
       </div>
       {loading && (
         <div className="text-center text-zinc-600 text-sm">Loading...</div>

src/Pages/PageWrapper.tsx

@@ -1,22 +1,34 @@
+import { lazy, Suspense } from 'react';
 import { Routes, Route, BrowserRouter, Navigate } from 'react-router-dom';
-import Navigation from '../Layouts/Navigation/Navigation';
-import CreatePage from './CreatePage/CreatePage';
-import FormPage from './FormPage/FormPage';
-import HomePage from './HomePage/HomePage';
-import LoginPage from './LoginPage/LoginPage';
+import Navigation from '../Layouts/Navigation';
+import HomePage from './HomePage';
+
+const CreatePage = lazy(() => import('./CreatePage'));
+const FormPage = lazy(() => import('./FormPage'));
+const LoginPage = lazy(() => import('./LoginPage'));
 
 function PageWrapper() {
   return (
     <BrowserRouter>
       <Navigation />
       <div className="min-h-screen px-8 pt-16 m-auto sm:px-4 bg-zinc-50">
-        <Routes>
-          <Route path="/" element={<HomePage />} />
-          <Route path="/create" element={<CreatePage />} />
-          <Route path="/form/:formId" element={<FormPage />} />
-          <Route path="/login" element={<LoginPage />} />
-          <Route path="*" element={<Navigate to="/" />} />
-        </Routes>
+        <Suspense
+          fallback={
+            <div className="flex items-center justify-center transition-all duration-250 animate-pulse">
+              <div className="flex-1 space-y-6 py-1">
+                <div className="ease-in-out h-screen bg-gradient-to-r from-zinc-100 to-transparent rounded-lg"></div>
+              </div>
+            </div>
+          }
+        >
+          <Routes>
+            <Route path="/" element={<HomePage />} />
+            <Route path="/create" element={<CreatePage />} />
+            <Route path="/form/:formId" element={<FormPage />} />
+            <Route path="/login" element={<LoginPage />} />
+            <Route path="*" element={<Navigate to="/" />} />
+          </Routes>
+        </Suspense>
       </div>
     </BrowserRouter>
   );