forked from cerc-io/snowballtools-base
61 lines
2.2 KiB
TypeScript
61 lines
2.2 KiB
TypeScript
import { relativeTimeMs } from '@/utils/time';
|
|
import { Project } from 'gql-client';
|
|
import { Clock, GitBranch } from 'lucide-react';
|
|
import { ComponentPropsWithoutRef } from 'react';
|
|
|
|
/**
|
|
* Props for the ProjectDeploymentInfo component
|
|
*
|
|
* @property {Project} project - The project data containing deployment information
|
|
*/
|
|
interface ProjectDeploymentInfoProps extends ComponentPropsWithoutRef<'div'> {
|
|
project: Project;
|
|
}
|
|
|
|
/**
|
|
* ProjectDeploymentInfo component
|
|
*
|
|
* Displays information about the latest deployment for a project, including:
|
|
* - Commit message (or "No production deployment" if none exists)
|
|
* - Relative time since deployment or project creation
|
|
* - Branch name (if a deployment exists)
|
|
*
|
|
* The component handles both cases where a project has deployments and where it doesn't,
|
|
* displaying appropriate information in each case.
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* <ProjectDeploymentInfo project={projectData} />
|
|
* ```
|
|
*/
|
|
export const ProjectDeploymentInfo = ({ project, ...props }: ProjectDeploymentInfoProps) => {
|
|
const hasDeployment = project.deployments.length > 0;
|
|
const latestDeployment = project.deployments[0];
|
|
|
|
return (
|
|
<div className="flex flex-col gap-3" {...props}>
|
|
{/* Commit message or no deployment message */}
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm text-muted-foreground">
|
|
{hasDeployment ? latestDeployment?.commitMessage : 'No production deployment'}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Timestamp and branch information */}
|
|
<div className="flex items-center gap-1">
|
|
<div className="flex items-center gap-1">
|
|
<Clock className="h-4 w-4 text-muted-foreground" />
|
|
<span className="text-sm text-muted-foreground">
|
|
{hasDeployment ? relativeTimeMs(latestDeployment.createdAt) : relativeTimeMs(project.createdAt)} on
|
|
</span>
|
|
</div>
|
|
{hasDeployment && (
|
|
<div className="flex items-center gap-1">
|
|
<GitBranch className="h-4 w-4 text-muted-foreground" />
|
|
<span className="text-sm text-muted-foreground">{latestDeployment.branch}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|