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

@@ -0,0 +1,8 @@
+[
+  {
+    "domainid":1,
+    "projectid":1,
+    "domain": "randomurl.snowballtools.xyz",
+    "status": "live"
+  }
+]

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>;
 };

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;

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;