-
-
- {project?.name}
-
-
+
+
-
-
+ variant="tertiary"
+ className="rounded-full h-11 w-11 p-0"
+ aria-label="Go back"
+ leftIcon={}
+ onClick={() => navigate(-1)}
+ />
+
+ {project?.name}
+
+
+
+
+
+
+
+
-
-
-
-
-
-
- Overview
-
-
-
-
- Deployments
-
-
-
-
- Database
-
-
-
-
- Integrations
-
-
-
-
- Settings
-
-
-
-
+
+
+
+
+
+ Overview
+
+
+ Deployments
+
+
+ Database
+
+
+ Integrations
+
+
+ Settings
+
+
+ {/* Not wrapping in Tab.Content because we are using Outlet */}
+
-
+
Project not found
+
+
+ Project not found.
+
+
)}
);
diff --git a/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx b/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx
index 21f281c1..81cdbe16 100644
--- a/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx
@@ -1,18 +1,30 @@
import React, { useEffect, useState } from 'react';
import { Domain, DomainStatus } from 'gql-client';
-import { useNavigate, useOutletContext } from 'react-router-dom';
+import { Link, useNavigate, useOutletContext } from 'react-router-dom';
import { RequestError } from 'octokit';
-import { Typography, Chip, Avatar, Tooltip } from '@material-tailwind/react';
-
-import ActivityCard from '../../../../components/projects/project/ActivityCard';
-import { relativeTimeMs } from '../../../../utils/time';
import { useOctokit } from '../../../../context/OctokitContext';
import { GitCommitWithBranch, OutletContextType } from '../../../../types';
import { useGQLClient } from '../../../../context/GQLClientContext';
-import { formatAddress } from '../../../../utils/format';
import { Button } from 'components/shared/Button';
import { Heading } from 'components/shared/Heading';
+import { Avatar } from 'components/shared/Avatar';
+import { getInitials } from 'utils/geInitials';
+import {
+ BranchStrokeIcon,
+ CheckRoundFilledIcon,
+ ClockIcon,
+ CursorBoxIcon,
+ GithubStrokeIcon,
+ GlobeIcon,
+ LinkIcon,
+ StorageIcon,
+} from 'components/shared/CustomIcon';
+import { Tag } from 'components/shared/Tag';
+import { Activity } from 'components/projects/project/overview/Activity';
+import { OverviewInfo } from 'components/projects/project/overview/OverviewInfo';
+import { CalendarDaysIcon } from 'components/shared/CustomIcon/CalendarDaysIcon';
+import { relativeTimeMs } from 'utils/time';
const COMMITS_PER_PAGE = 4;
@@ -103,92 +115,109 @@ const OverviewTabPanel = () => {
}, [project]);
return (
-
+
-
+
-
-
{project.name}
-
+
+
+ {project.name}
+
+
{project.subDomain}
-
+
-
-
^ Domain
+
}>
{liveDomain ? (
-
+
}>
+ Connected
+
) : (
-
-
+
+ }>
+ Not connected
+
)}
-
+
{project.deployments.length !== 0 ? (
<>
-
-
^ Source
-
^ {project.deployments[0]?.branch}
-
-
-
^ Deployment
-
{liveDomain?.name}
-
-
-
^ Created
-
- {relativeTimeMs(project.deployments[0].createdAt)} by ^{' '}
-
- {formatAddress(project.deployments[0].createdBy.name ?? '')}
-
-
-
+ {/* SOURCE */}
+
}>
+
+
+
+ {project.deployments[0]?.branch}
+
+
+
+
+ {/* DATABASE */}
+
}>
+
+
+
+ {/* // TODO: add db name
+ dbname
+ */}
+
+
+
+
+
+
+ {/* DEPLOYMENT */}
+
}>
+
+
+
+ {liveDomain?.name}{' '}
+
+
+
+
+
+
+ {/* DEPLOYMENT DATE */}
+
}>
+
+
{relativeTimeMs(project.deployments[0].createdAt)}
+ by
+
+
{project.deployments[0]?.createdBy?.name}
+
+
) : (
-
No current deployment found
+
+ No current deployment found.
+
)}
-
-
- Activity
-
-
-
- {activities.map((activity, index) => {
- return (
-
- );
- })}
-
-
+
);
};
diff --git a/packages/frontend/src/utils/cloneElement.tsx b/packages/frontend/src/utils/cloneElement.tsx
new file mode 100644
index 00000000..202f9e45
--- /dev/null
+++ b/packages/frontend/src/utils/cloneElement.tsx
@@ -0,0 +1,43 @@
+import React, {
+ ReactElement,
+ isValidElement,
+ Children,
+ cloneElement as reactCloneElement,
+ HTMLProps,
+ ReactNode,
+} from 'react';
+import { ClassProp } from 'tailwind-variants';
+import { cn } from './classnames';
+
+interface cloneElement extends HTMLProps
{
+ element: ReactNode;
+ themeStyle?: (props: ClassProp) => string;
+}
+
+export const cloneElement = ({
+ element,
+ themeStyle,
+ className,
+ ...props
+}: cloneElement) => {
+ if (isValidElement(element)) {
+ return (
+ <>
+ {Children.map(element, (child) => {
+ const originalClassName = (child.props as HTMLProps)
+ ?.className;
+
+ return reactCloneElement(child as ReactElement, {
+ className: themeStyle
+ ? themeStyle({
+ className: cn(originalClassName, className), // overriding icon classNames
+ })
+ : originalClassName,
+ ...props,
+ });
+ })}
+
+ );
+ }
+ return <>;
+};