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>
This commit is contained in:
GitHub
parent
0b91771e90
commit
c0a20c80a2
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
|
||||
import { relativeTime } from '../utils/time';
|
||||
import { relativeTime } from '../../../utils/time';
|
||||
|
||||
interface ActivityDetails {
|
||||
author: string;
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
|
||||
import { relativeTime } from '../utils/time';
|
||||
import { relativeTime } from '../../../utils/time';
|
||||
|
||||
interface DeploymentDetails {
|
||||
title: string;
|
||||
@ -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;
|
||||
@ -1,15 +1,15 @@
|
||||
import React from 'react';
|
||||
|
||||
import ActivityCard from './ActivityCard';
|
||||
import activityDetails from '../assets/activities.json';
|
||||
import { ProjectDetails } from '../types/project';
|
||||
import { relativeTime } from '../utils/time';
|
||||
import activityDetails from '../../../assets/activities.json';
|
||||
import { ProjectDetails } from '../../../types/project';
|
||||
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;
|
||||
@ -1,9 +1,10 @@
|
||||
import React from 'react';
|
||||
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
|
||||
|
||||
import Overview from './Overview';
|
||||
import Deployments from './Deployments';
|
||||
import { ProjectDetails } from '../types/project';
|
||||
import OverviewTabPanel from './OverviewTabPanel';
|
||||
import DeploymentsTabPanel from './DeploymentsTabPanel';
|
||||
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>
|
||||
);
|
||||
@ -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;
|
||||
@ -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;
|
||||
@ -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) => {
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user