From 60235902a76b3256883b6cab5789907c0eb519f7 Mon Sep 17 00:00:00 2001
From: Nabarun Gogoi <nabarun@deepstacksoft.com>
Date: Tue, 26 Dec 2023 12:47:42 +0530
Subject: [PATCH] Implement layout for Domain tab in project settings (#25)

* Implement layout for Domains tab in settings

* Handle review changes

* Add json file for domains and take values from it

* Handle review changes

* Rename DomainsCard to DomainCard

---------

Co-authored-by: neeraj <neeraj.rtly@gmail.com>
---
 packages/frontend/src/assets/domains.json     |  8 ++++
 .../projects/project/SettingsTabPanel.tsx     |  6 +--
 .../projects/project/settings/DomainCard.tsx  | 48 +++++++++++++++++++
 .../projects/project/settings/Domains.tsx     | 36 ++++++++++++++
 4 files changed, 93 insertions(+), 5 deletions(-)
 create mode 100644 packages/frontend/src/assets/domains.json
 create mode 100644 packages/frontend/src/components/projects/project/settings/DomainCard.tsx
 create mode 100644 packages/frontend/src/components/projects/project/settings/Domains.tsx

diff --git a/packages/frontend/src/assets/domains.json b/packages/frontend/src/assets/domains.json
new file mode 100644
index 00000000..9b8f03b3
--- /dev/null
+++ b/packages/frontend/src/assets/domains.json
@@ -0,0 +1,8 @@
+[
+  {
+    "domainid":1,
+    "projectid":1,
+    "domain": "randomurl.snowballtools.xyz",
+    "status": "live"
+  }
+]
diff --git a/packages/frontend/src/components/projects/project/SettingsTabPanel.tsx b/packages/frontend/src/components/projects/project/SettingsTabPanel.tsx
index 02089c10..eb555207 100644
--- a/packages/frontend/src/components/projects/project/SettingsTabPanel.tsx
+++ b/packages/frontend/src/components/projects/project/SettingsTabPanel.tsx
@@ -1,5 +1,4 @@
 import React, { createElement } from 'react';
-
 import {
   Tabs,
   TabsHeader,
@@ -8,12 +7,9 @@ import {
   TabPanel,
 } from '@material-tailwind/react';
 
+import Domains from './settings/Domains';
 import GeneralTabPanel from './settings/GeneralTabPanel';
 
-const Domains = () => {
-  return <div>Domains</div>;
-};
-
 const EnvironmentVariables = () => {
   return <div>Environment Variables</div>;
 };
diff --git a/packages/frontend/src/components/projects/project/settings/DomainCard.tsx b/packages/frontend/src/components/projects/project/settings/DomainCard.tsx
new file mode 100644
index 00000000..6f3d9374
--- /dev/null
+++ b/packages/frontend/src/components/projects/project/settings/DomainCard.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import {
+  Chip,
+  Typography,
+  Menu,
+  MenuHandler,
+  MenuList,
+  MenuItem,
+} from '@material-tailwind/react';
+
+const DomainCard = (props: { domain: string; status: string }) => {
+  return (
+    <>
+      <div className="flex justify-between py-3">
+        <div className="flex justify-start gap-1">
+          <Typography variant="h6">
+            <i>^</i> {props.domain}
+          </Typography>
+          <Chip
+            className=" w-fit"
+            value={props.status}
+            color="green"
+            variant="ghost"
+            icon={<i>^</i>}
+          />
+        </div>
+
+        <div className="flex justify-start gap-1">
+          <i id="refresh" className="cursor-pointer w-8 h-8">
+            ^
+          </i>
+          <Menu placement="bottom-end">
+            <MenuHandler>
+              <button className="border-2 rounded-full w-8 h-8">...</button>
+            </MenuHandler>
+            <MenuList>
+              <MenuItem className="text-black">^ Edit domain</MenuItem>
+              <MenuItem className="text-red-500">^ Delete domain</MenuItem>
+            </MenuList>
+          </Menu>
+        </div>
+      </div>
+      <Typography variant="small">Production</Typography>
+    </>
+  );
+};
+
+export default DomainCard;
diff --git a/packages/frontend/src/components/projects/project/settings/Domains.tsx b/packages/frontend/src/components/projects/project/settings/Domains.tsx
new file mode 100644
index 00000000..ac58da1d
--- /dev/null
+++ b/packages/frontend/src/components/projects/project/settings/Domains.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { Button, Typography } from '@material-tailwind/react';
+
+import DomainCard from './DomainCard';
+import domainsData from '../../../../assets/domains.json';
+
+const Domains = () => {
+  const { id } = useParams();
+  return (
+    <>
+      <div className="flex justify-between p-2 ">
+        <Typography variant="h2">Domain</Typography>
+        <Button variant="outlined" className="rounded-full">
+          Add domain
+        </Button>
+      </div>
+
+      {domainsData
+        .filter((domain) => {
+          return Number(id) == domain.projectid;
+        })
+        .map((domain) => {
+          return (
+            <DomainCard
+              status={domain.status}
+              domain={domain.domain}
+              key={domain.domainid}
+            />
+          );
+        })}
+    </>
+  );
+};
+
+export default Domains;