Add form page

src/Components/IconButton/IconButton.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface IconButtonProps {
+    icon: string;
+    selected?: boolean;
+}
+
+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 ${
+                selected ? "scale-90 border-slate-300" : ""
+            }`}
+            onClick={onClick}
+        >
+            {icon}
+        </button>
+    );
+}
+
+export default IconButton;

src/Layouts/Logo/Logo.scss

@@ -1,5 +1,5 @@
 $heartSize: 20px;
-$hearColor: rgb(75 85 99);
+$hearColor: #52525b;
 
 .heart {
     background-color: $hearColor;

src/Layouts/Logo/Logo.tsx

@@ -3,7 +3,7 @@ import "./Logo.scss";
 
 function Logo() {
     return (
-        <Link to={"/"} className="flex items-center text-gray-600">
+        <Link to={"/"} className="flex items-center text-zinc-600">
             <div className="heart mr-4"></div>
             Employee Pulse
         </Link>

src/Layouts/Navigation/Navigation.tsx

@@ -2,7 +2,7 @@ import Logo from "../Logo/Logo";
 
 function Navigation() {
     return (
-        <nav className="py-5 border-b" style={{ borderColor: "#E5E5E5" }}>
+        <nav className="py-5 border-b top-0 absolute w-full z-10 bg-white" style={{ borderColor: "#E5E5E5" }}>
             <div className="container m-auto flex px-4 md:px-8">
                 <Logo />
             </div>

src/Pages/FormPage/FormPage.tsx

@@ -0,0 +1,60 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import Button, { ButtonSize, ButtonVariant } from "../../Components/Button";
+import IconButton from "../../Components/IconButton/IconButton";
+
+function FormPage() {
+    const { formId } = useParams();
+    const [question, setQuestion] = useState("");
+    const [answer, setAnswer] = useState("");
+    const [icons, setIcons] = useState<string[]>([]);
+    const [selectedIcon, setSelectedIcon] = useState("");
+
+    useEffect(() => {
+        //fetch data from backend
+        setQuestion("How Do You Feel?");
+        setIcons(["☹️", "😕", "🙂", "😃"]);
+    }, [formId]);
+
+    const handleIconClick = (e: any) => {
+        setSelectedIcon(e.target.textContent);
+    };
+
+    const handleSave = () => {
+        console.log(selectedIcon, answer);
+    };
+
+    const handleInputAnswer = (e: any) => {
+        setAnswer(e.target.value);
+    };
+
+    return (
+        <div className="container mt-10 m-auto px-4 md:px-8 text-center">
+            <h1 className="text-center font-bold text-4xl text-zinc-600">{question}</h1>
+            <div className="mt-6">
+                {icons.map((icon, idx) => (
+                    <IconButton icon={icon} selected={selectedIcon === icon} key={idx} onClick={handleIconClick} />
+                ))}
+            </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"
+                    placeholder="Tell Us More"
+                    value={answer}
+                    onChange={handleInputAnswer}
+                ></textarea>
+            </div>
+            <Button
+                disabled={!selectedIcon}
+                onClick={handleSave}
+                className="mt-6"
+                variant={ButtonVariant.PRIMARY}
+                sizeType={ButtonSize.MEDIUM}
+            >
+                Save
+            </Button>
+        </div>
+    );
+}
+
+export default FormPage;

src/Pages/PageWrapper.tsx

@@ -1,19 +1,21 @@
 import { Routes, Route, BrowserRouter, Navigate } from "react-router-dom";
 import Navigation from "../Layouts/Navigation/Navigation";
+import FormPage from "./FormPage/FormPage";
 import HomePage from "./HomePage/HomePage";
 
 function PageWrapper() {
-  return (
-    <BrowserRouter>
-      <Navigation />
-      <div className="m-auto px-8  sm:px-4">
-        <Routes>
-          <Route path="/" element={<HomePage />} />
-          <Route path="*" element={<Navigate to="/" />} />
-        </Routes>
-      </div>
-    </BrowserRouter>
-  );
+    return (
+        <BrowserRouter>
+            <Navigation />
+            <div className="m-auto pt-16 px-8 sm:px-4 bg-zinc-50 min-h-screen">
+                <Routes>
+                    <Route path="/" element={<HomePage />} />
+                    <Route path="/form/:formId" element={<FormPage />} />
+                    <Route path="*" element={<Navigate to="/" />} />
+                </Routes>
+            </div>
+        </BrowserRouter>
+    );
 }
 
 export default PageWrapper;