add bottom bar

app/javascript/pages/assessment/NewAssessmentManual.tsx

@@ -9,6 +9,7 @@ import { QuestionCard } from "./components/QuestionCard";
 import { Link } from "react-router-dom";
 import { SelectedQuestionsSideBar } from "./components/SelectedQuestionsSideBar";
 import { FiltersSideBar } from "./components/FiltersSideBar";
+import { BottomBar } from "./components/BottomBar";
 
 type NewAssessementManualForm = {
   axisWeights: Record<string, any>
@@ -67,9 +68,10 @@ export const NewAssessementManual = () => {
   return (
     <>
         <Navigator home />
-        <div className="grid grid-cols-5 gap-4 mt-4 mx-4">
+        <BottomBar/>
+        <div className="grid grid-cols-5 gap-4 mt-4 mx-4 pb-20">
           <FiltersSideBar/>
-          <div className="col-span-3 border-l-2 border-r-2 border-gray-300 px-6 pb-20"> {/*bg-blue-500*/}
+          <div className="col-span-3 border-l-2 border-r-2 border-gray-300 px-6 pb-10">
             <QuestionCard title="Question 1"
               onAddQuestion={addQuestion}
               onRemoveQuestion={removeQuestion}/>

app/javascript/pages/assessment/components/BottomBar.tsx

@@ -0,0 +1,21 @@
+import React, { FC, } from "react";
+import { Button } from "../../../components";
+
+type Props = {
+
+}
+
+export const BottomBar: FC<Props> = () => {
+    return (
+        <div className="fixed bottom-0 bg-white w-full h-16 flex items-center justify-end shadow-lg">
+          <div className="flex gap-6 mx-16">
+            <Button className="w-32">
+              Cancelar
+            </Button>
+            <Button type="primary" className="w-32">
+              Salvar
+            </Button>
+          </div>
+        </div>
+    )
+}

app/javascript/pages/assessment/components/FiltersSideBar.tsx

@@ -15,9 +15,7 @@ export const FiltersSideBar: FC<Props> = () => {
     return (
         <SideBar header="Filtros">
             <div className="mt-3">
-                <form className="flex flex-col gap-4"
-                    // onSubmit={addAxisForm.handleSubmit(handleAddAxis)}
-                >
+                <form className="flex flex-col gap-4">
                     <SelectFilterField label="Grau de Dificuldade:" options={[
                         {id: 1, label: 'Fácil'},
                         {id: 2, label: 'Média'},
@@ -61,7 +59,6 @@ export const FiltersSideBar: FC<Props> = () => {
                             Limpar Filtro
                         </Button>
                     </div>                                         
-                    
                 </form>
             </div>
         </SideBar>