feat(web): Implement docker service of terraform template

Author: MiladSadeghi

web/src/App.tsx

@@ -1,11 +1,7 @@
 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';
+import TerraformTemplate from '@/pages/terraform-template/components/layout';
+import { Argocd, Docker, EC2, IAM, S3 } from './pages';
 
 function App() {
   const location = useLocation();

web/src/pages/index.ts

@@ -0,0 +1,7 @@
+import Argocd from './terraform-template/ARGOCD/argocd';
+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';
+
+export { Argocd, Docker, EC2, IAM, S3 };

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

@@ -1,7 +1,51 @@
-import { FC } from 'react';
+import { cn } from '@/lib/utils';
+import { FC, useState } from 'react';
 
 const Docker: FC = () => {
-  return <>Docker</>;
+  const [services, setServices] = useState({
+    docker_image: false,
+    docker_container: false,
+  });
+
+  const handleServices = (serviceItem: keyof typeof services) => {
+    setServices((prev) => ({
+      ...prev,
+      [serviceItem]: !prev[serviceItem],
+    }));
+  };
+
+  return (
+    <div className="w-full max-w-96">
+      <div className="border border-gray-500 rounded-md">
+        <div className="divide-y divide-gray-500">
+          <div className="flex items-center justify-between w-full px-3 py-3">
+            <p>Key Pair</p>
+            <input
+              type="checkbox"
+              className={cn('toggle border-gray-500 bg-gray-500', {
+                'bg-orange-base hover:bg-orange-base/70': services.docker_image,
+              })}
+              onChange={() => handleServices('docker_image')}
+            />
+          </div>
+          <div className="flex items-center justify-between w-full px-3 py-3">
+            <p>Security Group</p>
+            <input
+              type="checkbox"
+              className={cn('toggle border-gray-500 bg-gray-500', {
+                'bg-orange-base hover:bg-orange-base/70':
+                  services.docker_container,
+              })}
+              onChange={() => handleServices('docker_container')}
+            />
+          </div>
+        </div>
+      </div>
+      <button className="w-full mt-3 text-white btn bg-orange-base hover:bg-orange-base/70">
+        Submit
+      </button>
+    </div>
+  );
 };
 
 export default Docker;

…rm-template/index/terraform-template.tsx …terraform-template/components/layout.tsxweb/src/pages/terraform-template/index/terraform-template.tsx renamed to web/src/pages/terraform-template/components/layout.tsx web/src/pages/terraform-template/index/terraform-template.tsx renamed to web/src/pages/terraform-template/components/layout.tsx

@@ -24,7 +24,7 @@ const menu = [
   },
 ];
 
-export const TerraformTemplate: FC = () => {
+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">
@@ -45,3 +45,5 @@ export const TerraformTemplate: FC = () => {
     </div>
   );
 };
+
+export default TerraformTemplate;