PreviousRestoreItem.tsx50 lines · main

1	import { ChevronRightIcon } from 'lucide-react'
2	import Link from 'next/link'
3	import { TimestampInfo } from 'ui-patterns'
4
5	import { StatusBadge } from './StatusBadge'
6	import { CloneStatus } from '@/data/projects/clone-status-query'
7
8	export const PreviousRestoreItem = ({ clone }: { clone: CloneStatus['clones'][number] }) => {
9	if (clone.status === 'REMOVED') {
10	return (
11	<div className="grid grid-cols-4 gap-2 text-sm p-4 group">
12	<div className="min-w-24 truncate">{clone.target_project?.name ?? 'Unknown project'}</div>
13	<div>
14	<StatusBadge status={clone.status} />
15	</div>
16	<div>
17	<TimestampInfo
18	className="text-left text-sm! font-mono tracking-tight text-foreground-lighter"
19	displayAs="utc"
20	utcTimestamp={clone.inserted_at ?? ''}
21	labelFormat="DD MMM YYYY HH:mm:ss (ZZ)"
22	/>
23	</div>
24	</div>
25	)
26	} else {
27	return (
28	<Link
29	href={`/project/${clone.target_project?.ref ?? '_'}`}
30	className="grid grid-cols-4 gap-2 text-sm p-4 group"
31	>
32	<div className="min-w-24 truncate">{clone.target_project?.name ?? 'Unknown project'}</div>
33	<div>
34	<StatusBadge status={clone.status} />
35	</div>
36	<div>
37	<TimestampInfo
38	className="text-left text-sm! font-mono tracking-tight text-foreground-lighter"
39	displayAs="utc"
40	utcTimestamp={clone.inserted_at ?? ''}
41	labelFormat="DD MMM YYYY HH:mm:ss (ZZ)"
42	/>
43	</div>
44	<div className="flex items-center justify-end text-foreground-lighter group-hover:text-foreground">
45	<ChevronRightIcon className="w-4 h-4" />
46	</div>
47	</Link>
48	)
49	}
50	}