feat(web): implement terraform template subset pages

- add services for docker, ec2, argocd, iam, s3

Author: MiladSadeghi

web/src/App.tsx

@@ -1,5 +1,11 @@
 import { Route, Routes, useLocation } from 'react-router';
 import MainLayout from '@/components/layouts/main-layout/main-layout';
+import { TerraformTemplate } from '@/pages/terraform-template/index/terraform-template';
+import Docker from '@/pages/terraform-template/Docker/docker';
+import EC2 from './pages/terraform-template/EC2/ec2';
+import S3 from './pages/terraform-template/S3/s3';
+import IAM from './pages/terraform-template/IAM/iam';
+import Argocd from './pages/terraform-template/ARGOCD/argocd';
 
 function App() {
   const location = useLocation();
@@ -8,7 +14,13 @@ function App() {
       <div className="container mx-auto border-l border-r border-gray-700 h-dvh max-w-7xl">
         <Routes location={location}>
           <Route element={<MainLayout />}>
-            <Route path="/" />
+            <Route path="terraform-template" element={<TerraformTemplate />}>
+              <Route path="docker" element={<Docker />} />
+              <Route path="ec2" element={<EC2 />} />
+              <Route path="s3" element={<S3 />} />
+              <Route path="iam" element={<IAM />} />
+              <Route path="argocd" element={<Argocd />} />
+            </Route>
           </Route>
         </Routes>
       </div>

web/src/components/navbar/navbar.tsx

@@ -33,9 +33,7 @@ const Navbar: FC = () => {
           {navbar.map((link) => (
             <NavLink
               to={link.url}
-              className={({ isActive }) =>
-                isActive ? 'text-orange-base]' : ''
-              }
+              className={({ isActive }) => (isActive ? 'text-orange-base' : '')}
             >
               {link.title}
             </NavLink>

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

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+
+const Argocd: FC = () => {
+  return <>Argocd</>;
+};
+
+export default Argocd;

web/src/pages/terraform-template/Docker/docker.tsx

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+
+const Docker: FC = () => {
+  return <>Docker</>;
+};
+
+export default Docker;

web/src/pages/terraform-template/EC2/ec2.tsx

@@ -0,0 +1,5 @@
+const EC2 = () => {
+  return <>EC</>;
+};
+
+export default EC2;

web/src/pages/terraform-template/IAM/iam.tsx

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+
+const IAM: FC = () => {
+  return <>IAM</>;
+};
+
+export default IAM;

web/src/pages/terraform-template/S3/s3.tsx

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+
+const S3: FC = () => {
+  return <>S3</>;
+};
+
+export default S3;

web/src/pages/terraform-template/index/terraform-template.tsx

@@ -0,0 +1,47 @@
+import { FC } from 'react';
+import { NavLink, Outlet } from 'react-router';
+
+const menu = [
+  {
+    url: 'docker',
+    title: 'Docker Service',
+  },
+  {
+    url: 'ec2',
+    title: 'EC2 Service',
+  },
+  {
+    url: 's3',
+    title: 'S3 Service',
+  },
+  {
+    url: 'iam',
+    title: 'IAM Service',
+  },
+  {
+    url: 'argocd',
+    title: 'ARGOCD Service',
+  },
+];
+
+export const TerraformTemplate: FC = () => {
+  return (
+    <div className="flex items-center h-dvh">
+      <div className="flex flex-col items-center justify-center w-full h-full border-r border-gray-500 divide-y divide-gray-500 max-w-96">
+        {menu.map((link) => (
+          <NavLink
+            to={link.url}
+            className={({ isActive }) =>
+              `block w-full p-4 text-center outline-none transition-all ${isActive ? 'bg-orange-base' : ''}`
+            }
+          >
+            {link.title}
+          </NavLink>
+        ))}
+      </div>
+      <div className="flex items-center justify-center w-2/3 h-full">
+        <Outlet />
+      </div>
+    </div>
+  );
+};