Implement layout for Project settings tab panel (#10)

* Implement tab functionality for settings pannel

* Use material ui input component

* Handle form state of general panel

* Organize project components

---------

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

packages/frontend/src/components/projects/project/ActivityCard.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { relativeTime } from '../utils/time';
+import { relativeTime } from '../../../utils/time';
 
 interface ActivityDetails {
   author: string;

packages/frontend/src/components/projects/project/DeploymentDetailsCard.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { relativeTime } from '../utils/time';
+import { relativeTime } from '../../../utils/time';
 
 interface DeploymentDetails {
   title: string;

packages/frontend/src/components/projects/project/DeploymentsTabPanel.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 
-import deploymentDetails from '../assets/deployments.json';
+import deploymentDetails from '../../../assets/deployments.json';
 import DeployDetailsCard from './DeploymentDetailsCard';
-import Dropdown from './Dropdown';
+import Dropdown from '../../Dropdown';
 
 const STATUS_OPTIONS = [
   { value: 'production', label: 'Production' },
   { value: 'preview', label: 'Preview' },
 ];
 
-const Deployments = () => {
+const DeploymentsTabPanel = () => {
   return (
     <div className="p-4">
       <div className="grid grid-cols-4 gap-2 text-sm text-gray-600">
@@ -44,4 +44,4 @@ const Deployments = () => {
   );
 };
 
-export default Deployments;
+export default DeploymentsTabPanel;

packages/frontend/src/components/projects/project/OverviewTabPanel.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 
 import ActivityCard from './ActivityCard';
-import activityDetails from '../assets/activities.json';
+import activityDetails from '../../../assets/activities.json';
-import { ProjectDetails } from '../types/project';
+import { ProjectDetails } from '../../../types/project';
-import { relativeTime } from '../utils/time';
+import { relativeTime } from '../../../utils/time';
 
 interface OverviewProps {
   project: ProjectDetails;
 }
 
-const Overview = ({ project }: OverviewProps) => (
+const OverviewTabPanel = ({ project }: OverviewProps) => (
   <div className="grid grid-cols-5">
     <div className="col-span-3 p-2">
       <div className="flex items-center gap-2 p-2 ">
@@ -54,4 +54,4 @@ const Overview = ({ project }: OverviewProps) => (
   </div>
 );
 
-export default Overview;
+export default OverviewTabPanel;

packages/frontend/src/components/projects/project/ProjectTabs.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 
-import Overview from './Overview';
+import OverviewTabPanel from './OverviewTabPanel';
-import Deployments from './Deployments';
+import DeploymentsTabPanel from './DeploymentsTabPanel';
-import { ProjectDetails } from '../types/project';
+import { ProjectDetails } from '../../../types/project';
+import SettingsTabPanel from './SettingsTabPanel';
 
 interface ProjectTabsProps {
   project: ProjectDetails;
@@ -26,15 +27,6 @@ const Integrations = () => (
     </p>
   </div>
 );
-const Settings = () => (
-  <div>
-    Content of settings tab
-    <p className="block">
-      It uses a dictionary of over 200 Latin words, combined with a handful of
-      model sentence.
-    </p>
-  </div>
-);
 
 const ProjectTabs = ({ project }: ProjectTabsProps) => {
   return (
@@ -51,10 +43,10 @@ const ProjectTabs = ({ project }: ProjectTabsProps) => {
         <Tab className={'p-2 cursor-pointer'}>Settings</Tab>
       </TabList>
       <TabPanel>
-        <Overview project={project} />
+        <OverviewTabPanel project={project} />
       </TabPanel>
       <TabPanel>
-        <Deployments />
+        <DeploymentsTabPanel />
       </TabPanel>
       <TabPanel>
         <Database />
@@ -63,7 +55,7 @@ const ProjectTabs = ({ project }: ProjectTabsProps) => {
         <Integrations />
       </TabPanel>
       <TabPanel>
-        <Settings />
+        <SettingsTabPanel />
       </TabPanel>
     </Tabs>
   );

packages/frontend/src/components/projects/project/SettingsTabPanel.tsx

@@ -0,0 +1,83 @@
+import React, { createElement } from 'react';
+
+import {
+  Tabs,
+  TabsHeader,
+  TabsBody,
+  Tab,
+  TabPanel,
+} from '@material-tailwind/react';
+
+import GeneralTabPanel from './settings/GeneralTabPanel';
+
+const Domains = () => {
+  return <div>Domains</div>;
+};
+
+const EnvironmentVariables = () => {
+  return <div>Environment Variables</div>;
+};
+
+const Members = () => {
+  return <div>Members</div>;
+};
+
+const tabsData = [
+  {
+    label: 'General',
+    icon: '^',
+    value: 'general',
+    component: GeneralTabPanel,
+  },
+  {
+    label: 'Domains',
+    icon: '^',
+    value: 'domains',
+    component: Domains,
+  },
+  {
+    label: 'Environment variables',
+    icon: '^',
+    value: 'environmentVariables',
+    component: EnvironmentVariables,
+  },
+  {
+    label: 'Members',
+    icon: '^',
+    value: 'members',
+    component: Members,
+  },
+];
+
+const SettingsTabPanel = () => {
+  return (
+    <>
+      <Tabs value={'general'} orientation="vertical" className="my-6">
+        <TabsHeader
+          className="w-60 bg-transparent"
+          indicatorProps={{
+            className: 'bg-gray-900/10 shadow-none !text-gray-900',
+          }}
+        >
+          {tabsData.map(({ label, value, icon }) => (
+            <Tab key={value} value={value} className="flex justify-start">
+              <div className="flex gap-2">
+                <div>{icon}</div>
+                <div>{label}</div>
+              </div>
+            </Tab>
+          ))}
+        </TabsHeader>
+        <TabsBody>
+          {tabsData.map(({ value, component }) => (
+            <TabPanel key={value} value={value} className="p-2">
+              {createElement(component)}
+            </TabPanel>
+          ))}
+        </TabsBody>
+      </Tabs>
+    </>
+  );
+};
+
+export default SettingsTabPanel;

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

@@ -0,0 +1,76 @@
+import React from 'react';
+import { useForm } from 'react-hook-form';
+
+import { Button } from '@material-tailwind/react';
+import { Input } from '@material-tailwind/react';
+
+const GeneralTabPanel = () => {
+  const { handleSubmit, register } = useForm({
+    defaultValues: {
+      appName: 'iglootools',
+      description: '',
+    },
+  });
+
+  return (
+    <form onSubmit={handleSubmit(() => {})}>
+      <div className="mb-4">
+        <h4>Project info</h4>
+      </div>
+      <div className="my-2 w-3/5">
+        <label
+          htmlFor="input"
+          className="block text-sm font-medium text-gray-800"
+        >
+          App name
+        </label>
+        <Input
+          id="input"
+          variant="outlined"
+          // TODO: Debug issue: https://github.com/creativetimofficial/material-tailwind/issues/427
+          crossOrigin={undefined}
+          size="md"
+          {...register('appName')}
+        />
+      </div>
+      <div className="my-2 w-3/5">
+        <label
+          htmlFor="input"
+          className="block text-sm font-medium text-gray-800"
+        >
+          Description (Optional)
+        </label>
+        <Input
+          id="input"
+          variant="outlined"
+          crossOrigin={undefined}
+          size="md"
+          {...register('description')}
+        />
+      </div>
+      <div className="my-2 w-3/5">
+        <label
+          htmlFor="input"
+          className="block text-sm font-medium text-gray-800"
+        >
+          Project ID
+        </label>
+        <Input
+          id="input"
+          crossOrigin={undefined}
+          variant="outlined"
+          value="62f87575-7a2b-4951-8156-9f9821j380d"
+          size="md"
+          disabled
+        />
+      </div>
+      <div>
+        <Button type="submit" variant="gradient" size="sm">
+          Save
+        </Button>
+      </div>
+    </form>
+  );
+};
+
+export default GeneralTabPanel;

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

@@ -5,7 +5,7 @@ import { Button } from '@material-tailwind/react';
 
 import HorizontalLine from '../../components/HorizontalLine';
 import projects from '../../assets/projects.json';
-import ProjectTabs from '../../components/Tab';
+import ProjectTabs from '../../components/projects/project/ProjectTabs';
 
 const getProject = (id: number) => {
   return projects.find((project) => {

packages/frontend/src/pages/projects/create/Success.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { Button } from '@material-tailwind/react';
 import { Link } from 'react-router-dom';
 
+import { Button } from '@material-tailwind/react';
+
 const Success = () => {
   return (
     <div className="flex justify-center">
@@ -16,7 +17,7 @@ const Success = () => {
               Your project has been deployed at{' '}
               <Link to="https://www.iglootools.snowballtools.xyz">
                 <span className="text-blue-600">
-                  ^www.iglootools.snowballtools.xyz
+                  ^ www.iglootools.snowballtools.xyz
                 </span>
               </Link>
             </span>