feat(web): Implement installation page

Author: MiladSadeghi

web/src/App.tsx

@@ -1,7 +1,7 @@
 import { Route, Routes, useLocation } from 'react-router';
 import MainLayout from '@/components/layouts/main-layout/main-layout';
 import TerraformTemplate from '@/pages/terraform-template/components/layout';
-import { Argocd, Docker, EC2, IAM, S3 } from './pages';
+import { Argocd, Docker, EC2, IAM, Installation, S3 } from './pages';
 
 function App() {
   const location = useLocation();
@@ -17,6 +17,7 @@ function App() {
               <Route path="iam" element={<IAM />} />
               <Route path="argocd" element={<Argocd />} />
             </Route>
+            <Route path="installation" element={<Installation />} />
           </Route>
         </Routes>
       </div>

web/src/pages/index.ts

@@ -3,5 +3,6 @@ import Docker from './terraform-template/Docker/docker';
 import EC2 from './terraform-template/EC2/ec2';
 import IAM from './terraform-template/IAM/iam';
 import S3 from './terraform-template/S3/s3';
+import Installation from './installation/installation';
 
-export { Argocd, Docker, EC2, IAM, S3 };
+export { Argocd, Docker, EC2, IAM, S3, Installation };

web/src/pages/installation/installation.tsx

@@ -0,0 +1,25 @@
+import { FC } from 'react';
+
+const Installation: FC = () => {
+  return (
+    <div className="flex items-center justify-center w-full h-full">
+      <div className="w-full max-w-96">
+        <div className="border border-gray-500 divide-y divide-gray-500 rounded-md">
+          <input
+            placeholder="os (example: ubuntu)"
+            className="block w-full p-2 outline-none rounded-t-md"
+          />
+          <input
+            placeholder="tool (example: nginx)"
+            className="block w-full p-2 outline-none rounded-b-md"
+          />
+        </div>
+        <button className="w-full mt-3 text-white btn bg-orange-base hover:bg-orange-base/70">
+          Submit
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Installation;

web/src/pages/terraform-template/ARGOCD/argocd.tsx

@@ -30,9 +30,9 @@ const Argocd: FC = () => {
 
   return (
     <div className="w-full max-w-96">
-      <div className="border border-gray-500 rounded-md">
+      <div className="rounded-md border border-gray-500">
         <div className="divide-y divide-gray-500">
-          <div className="flex items-center justify-between w-full px-3 py-3">
+          <div className="flex w-full items-center justify-between px-3 py-3">
             <p>Argo Application</p>
             <input
               type="checkbox"
@@ -52,7 +52,7 @@ const Argocd: FC = () => {
             )}
           >
             <div
-              className="flex items-center justify-between py-3 pl-10 pr-3 cursor-pointer"
+              className="flex cursor-pointer items-center justify-between py-3 pl-10 pr-3"
               onClick={() => handleDropdown('sync_policy')}
             >
               <p>Sync Policy</p>
@@ -94,7 +94,7 @@ const Argocd: FC = () => {
               </div>
             </div>
           </div>
-          <div className="flex items-center justify-between w-full px-3 py-3">
+          <div className="flex w-full items-center justify-between px-3 py-3">
             <p>Argocd Repository</p>
             <input
               type="checkbox"
@@ -105,7 +105,7 @@ const Argocd: FC = () => {
               onChange={() => handleServices('argocd_repository')}
             />
           </div>
-          <div className="flex items-center justify-between w-full px-3 py-3">
+          <div className="flex w-full items-center justify-between px-3 py-3">
             <p>Application Depends Repository</p>
             <input
               type="checkbox"
@@ -118,7 +118,7 @@ const Argocd: FC = () => {
           </div>
         </div>
       </div>
-      <button className="w-full mt-3 text-white btn bg-orange-base hover:bg-orange-base/70">
+      <button className="btn mt-3 w-full bg-orange-base text-white hover:bg-orange-base/70">
         Submit
       </button>
     </div>