Add layout for Configure DNS section in Add domain page (#34)

* Add dns config page

* Move routes to domain/add directory

* Handle review change

---------

Co-authored-by: neeraj <neeraj.rtly@gmail.com>

packages/frontend/src/components/projects/project/settings/SetupDomain.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { useForm } from 'react-hook-form';
 import {
   Radio,
@@ -24,6 +24,7 @@ const SetupDomain = () => {
   });
 
   const [domainStr, setDomainStr] = useState('');
+  const navigate = useNavigate();
 
   useEffect(() => {
     const subscription = watch((value, { name }) => {
@@ -44,7 +45,9 @@ const SetupDomain = () => {
 
   return (
     <form
-      onSubmit={handleSubmit(() => {})}
+      onSubmit={handleSubmit(() => {
+        navigate('config');
+      })}
       className="flex flex-col gap-6 w-full"
     >
       <div>
@@ -103,9 +106,7 @@ const SetupDomain = () => {
         color={isValid ? 'blue' : 'gray'}
         type="submit"
       >
-        <Link to="config">
-          <i>^</i> Next
-        </Link>
+        <i>^</i> Next
       </Button>
     </form>
   );

packages/frontend/src/pages/projects/id/domain/add/Config.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Link, useParams } from 'react-router-dom';
+import { Typography, Alert, Button } from '@material-tailwind/react';
+
+const Config = () => {
+  const { id } = useParams();
+
+  return (
+    <div className="flex flex-col gap-6 w-full">
+      <div>
+        <Typography variant="h5">Configure DNS</Typography>
+        <Typography variant="small">
+          Add the following records to your domain
+        </Typography>
+      </div>
+
+      <table className="rounded-lg w-3/4 text-blue-gray-600">
+        <tr className="border-b-2 border-gray-300">
+          <th className="text-left p-2">Type</th>
+          <th className="text-left p-2">Name</th>
+          <th className="text-left p-2">Value</th>
+        </tr>
+        <tr className="border-b-2 border-gray-300">
+          <td className="text-left p-2">A</td>
+          <td className="text-left p-2">@</td>
+          <td className="text-left p-2">56.49.19.21</td>
+        </tr>
+        <tr>
+          <td className="text-left p-2">CNAME</td>
+          <td className="text-left p-2">www</td>
+          <td className="text-left p-2">cname.snowballtools.xyz</td>
+        </tr>
+      </table>
+
+      <Alert color="blue">
+        <i>^</i>It can take up to 48 hours for these updates to reflect
+        globally.
+      </Alert>
+
+      <Link to={`/projects/${id}`}>
+        <Button className="w-fit" color="blue">
+          Finish <i>{'>'}</i>
+        </Button>
+      </Link>
+    </div>
+  );
+};
+
+export default Config;

packages/frontend/src/pages/projects/id/domain/add/index.tsx

@@ -1,14 +1,12 @@
 import React, { useMemo } from 'react';
-import { useParams, useNavigate, useLocation } from 'react-router-dom';
+import { useParams, useLocation, Outlet, Link } from 'react-router-dom';
 import { Typography, IconButton } from '@material-tailwind/react';
 
-import Stepper from '../../../../components/Stepper';
-import SetupDomain from '../../../../components/projects/project/settings/SetupDomain';
+import Stepper from '../../../../../components/Stepper';
 
 const AddDomain = () => {
   const { id } = useParams();
   const location = useLocation();
-  const navigate = useNavigate();
 
   const stepperValues = [
     {
@@ -33,14 +31,11 @@ const AddDomain = () => {
     <div className="p-4">
       <div className="flex justify-between">
         <Typography variant="h3">Add Domain</Typography>
-
-        <IconButton
-          className="rounded-full"
-          variant="outlined"
-          onClick={() => navigate(-1)}
-        >
-          X
-        </IconButton>
+        <Link to={`/projects/${id}`}>
+          <IconButton className="rounded-full" variant="outlined">
+            X
+          </IconButton>
+        </Link>
       </div>
 
       <div className=" w-2/3 mx-auto">
@@ -55,7 +50,7 @@ const AddDomain = () => {
 
         <div className="flex justify-start gap-3">
           <Stepper activeStep={activeStep} stepperValues={stepperValues} />
-          <SetupDomain />
+          <Outlet />
         </div>
       </div>
     </div>

packages/frontend/src/pages/projects/id/domain/add/routes.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import Config from './Config';
+import SetupDomain from '../../../../../components/projects/project/settings/SetupDomain';
+
+export const addDomainRoutes = [
+  {
+    index: true,
+    element: <SetupDomain />,
+  },
+  {
+    path: 'config',
+    element: <Config />,
+  },
+];

packages/frontend/src/pages/projects/routes.tsx

@@ -2,8 +2,9 @@ import React from 'react';
 
 import CreateProject from './Create';
 import Project from './Project';
+import AddDomain from './id/domain/add';
 import { createProjectRoutes } from './create/routes';
-import AddDomain from './id/domain/Add';
+import { addDomainRoutes } from './id/domain/add/routes';
 
 export const projectsRoutesWithoutSearch = [
   {
@@ -14,6 +15,7 @@ export const projectsRoutesWithoutSearch = [
   {
     path: ':id/domain/add',
     element: <AddDomain />,
+    children: addDomainRoutes,
   },
 ];