Add page for new domain in project settings (#28)

* Add layout to implement addition of new domains

* Handle review changes

* Move AddDomain component to pages directory

* Use useLocation for pathname

* Use relative paths to navigate between pages

---------

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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, Link } from 'react-router-dom';
 import { Button, Typography } from '@material-tailwind/react';
 
 import DomainCard from './DomainCard';
@@ -7,13 +7,16 @@ import domainsData from '../../../../assets/domains.json';
 
 const Domains = () => {
   const { id } = useParams();
+
   return (
     <>
-      <div className="flex justify-between p-2 ">
+      <div className="flex justify-between p-2">
         <Typography variant="h2">Domain</Typography>
-        <Button variant="outlined" className="rounded-full">
+        <Link to={`domain/add`}>
-          Add domain
+          <Button color="blue" variant="outlined" className="rounded-full">
-        </Button>
+            <i>^</i> Add domain
+          </Button>
+        </Link>
       </div>
 
       {domainsData

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Typography, Button, Input } from '@material-tailwind/react';
+
+const SetupDomain = () => {
+  return (
+    <div className="flex flex-col gap-2">
+      <div>
+        <Typography variant="h3">Setup domain name</Typography>
+        <Typography variant="small">
+          Add your domain and setup redirects
+        </Typography>
+      </div>
+      <div>
+        <Typography variant="lead">Domain name</Typography>
+        <Input
+          type="text"
+          variant="outlined"
+          size="lg"
+          className="border-2 rounded w-full"
+          crossOrigin={''}
+        />
+      </div>
+      <Button className="w-fit" color="blue">
+        <Link to={`config`}>
+          <i>^</i> Next
+        </Link>
+      </Button>
+    </div>
+  );
+};
+
+export default SetupDomain;

packages/frontend/src/pages/projects/id/domain/Add.tsx

@@ -0,0 +1,69 @@
+import React, { useMemo } from 'react';
+import { useParams, useNavigate, useLocation } from 'react-router-dom';
+import { Typography, IconButton } from '@material-tailwind/react';
+
+import Stepper from '../../../../components/Stepper';
+import SetupDomain from '../../../../components/projects/project/settings/SetupDomain';
+
+const AddDomain = () => {
+  const { id } = useParams();
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const stepperValues = [
+    {
+      step: 1,
+      route: `/projects/${id}/domain/add`,
+      label: 'Setup',
+    },
+    {
+      step: 2,
+      route: `/projects/${id}/domain/add/config`,
+      label: 'Configure DNS',
+    },
+  ];
+
+  const activeStep = useMemo(
+    () =>
+      stepperValues.find((data) => data.route === location.pathname)?.step ?? 0,
+    [location.pathname],
+  );
+
+  return (
+    <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>
+      </div>
+
+      <div className=" w-2/3 mx-auto">
+        <div className="bg-blue-gray-50 rounded-lg mt-6 mb-10">
+          <div className="flex justify-start gap-3 p-5">
+            <i className="bg-gray-100 w-12 h-12 rounded-lg">^</i>
+            <Typography className="my-auto w-1/3" variant="h5">
+              Project Name
+            </Typography>
+          </div>
+        </div>
+
+        <div className="flex justify-between">
+          <div>
+            <Stepper activeStep={activeStep} stepperValues={stepperValues} />
+          </div>
+          <div>
+            <SetupDomain />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AddDomain;

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

@@ -3,6 +3,7 @@ import React from 'react';
 import CreateProject from './Create';
 import Project from './Project';
 import { createProjectRoutes } from './create/routes';
+import AddDomain from './id/domain/Add';
 
 export const projectsRoutesWithoutSearch = [
   {
@@ -10,6 +11,10 @@ export const projectsRoutesWithoutSearch = [
     element: <CreateProject />,
     children: createProjectRoutes,
   },
+  {
+    path: ':id/domain/add',
+    element: <AddDomain />,
+  },
 ];
 
 export const projectsRoutesWithSearch = [