cerc-io/snowballtools-base-mirror
16
0
Fork 0
mirror of https://github.com/snowball-tools/snowballtools-base.git synced 2024-11-17 16:29:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

🎨 style: adjust deployment body card design to match with the figma

Browse Source
This commit is contained in:
Wahyu Kurniawan 2024-03-14 21:52:55 +07:00
parent c2417a9daa
commit f3ce0d0621
No known key found for this signature in database
GPG Key ID: 040A1549143A8E33
1 changed files with 55 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
packages/frontend/src/components/projects/project/deployments/DeploymentDialogBodyCard.tsx
View File

@ -1,17 +1,23 @@
import React from 'react';
import { Deployment } from 'gql-client';
import { Typography, Chip, Card } from '@material-tailwind/react';
import { color } from '@material-tailwind/react/types/components/chip';
import { relativeTimeMs } from '../../../../utils/time';
import { relativeTimeMs } from 'utils/time';
import { SHORT_COMMIT_HASH_LENGTH } from '../../../../constants';
import { formatAddress } from '../../../../utils/format';
import {
BranchStrokeIcon,
ClockOutlineIcon,
CommitIcon,
} from 'components/shared/CustomIcon';
import { Avatar } from 'components/shared/Avatar';
import { getInitials } from 'utils/geInitials';
import { OverflownText } from 'components/shared/OverflownText';
import { Tag, TagProps } from 'components/shared/Tag';
interface DeploymentDialogBodyCardProps {
deployment: Deployment;
chip?: {
value: string;
color?: color;
type?: TagProps['type'];
};
}
@ -19,31 +25,54 @@ const DeploymentDialogBodyCard = ({
chip,
deployment,
}: DeploymentDialogBodyCardProps) => {
const commit =
deployment.commitHash.substring(0, SHORT_COMMIT_HASH_LENGTH) +
' ' +
deployment.commitMessage;
return (
<Card className="p-2 shadow-none" placeholder={''}>
<div className="flex flex-col gap-4 px-4 py-4 rounded-xl bg-base-bg-emphasized text-elements-low-em">
{chip && (
<Chip
className={`w-fit normal-case font-normal`}
size="sm"
value={chip.value}
color={chip.color}
/>
<Tag className="w-fit" size="xs" type={chip.type}>
{chip.value}
</Tag>
)}
{deployment.url && (
<Typography variant="small" className="text-black" placeholder={''}>
<div className="flex flex-col gap-3">
{/* Title */}
<p className="text-sm font-medium text-elements-high-em tracking-[0.006em]">
{deployment.url}
</Typography>
)}
<Typography variant="small" placeholder={''}>
^ {deployment.branch} ^{' '}
{deployment.commitHash.substring(0, SHORT_COMMIT_HASH_LENGTH)}{' '}
{deployment.commitMessage}
</Typography>
<Typography variant="small" placeholder={''}>
^ {relativeTimeMs(deployment.createdAt)} ^{' '}
{formatAddress(deployment.createdBy.name ?? '')}
</Typography>
</Card>
</p>
{/* Branch & commit */}
<div className="flex items-center gap-6 text-elements-low-em">
<div className="flex items-center gap-2">
<BranchStrokeIcon size={16} />
<p className="text-sm tracking-[0.006em]">{deployment.branch}</p>
</div>
<div className="flex items-center gap-2 w-full">
<CommitIcon size={16} />
<p className="text-sm tracking-[0.006em] max-w-[80%]">
<OverflownText content={commit}>{commit}</OverflownText>
</p>
</div>
</div>
</div>
<div className="flex items-center gap-2 text-elements-low-em">
<ClockOutlineIcon size={16} />
<p className="text-sm tracking-[0.006em]">
{relativeTimeMs(deployment.createdAt)}
</p>
<Avatar
size={20}
type="orange"
initials={getInitials(deployment.createdBy.name ?? '')}
// TODO: Add avatar image URL
// imageSrc={deployment.createdBy.imageUrl}
/>
<p className="text-sm tracking-[0.006em]">
{deployment.createdBy.name ?? 'Unknown'}
</p>
</div>
</div>
);
};