Spaces:
Sleeping
Sleeping
File size: 2,130 Bytes
fcd4478 66e93d1 fcd4478 abb7588 fcd4478 f80b091 fcd4478 cb6fbf2 fcd4478 cb6fbf2 fcd4478 f80b091 fcd4478 f80b091 96ac62a f80b091 cb6fbf2 f80b091 fcd4478 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
'use client';
import { ProjectBaseInfo } from '@/lib/fetch';
import { format } from 'date-fns';
import Link from 'next/link';
import { useParams } from 'next/navigation';
import { cn } from '@/lib/utils';
import Chip from '../ui/Chip';
export interface ProjectCardProps {
projectInfo: ProjectBaseInfo;
}
export enum LabelType {
BoundingBox = 'bounding_box',
Segmentation = 'segmentation',
Classification = 'classification',
AnomalyDetection = 'anomaly_detection',
SegmentationInstantLearning = 'segmentation_instant_learning',
}
const LabelTypeDisplayText: { [key: string]: string } = {
[LabelType.BoundingBox]: 'detection',
[LabelType.Segmentation]: 'segmentation',
[LabelType.Classification]: 'classification',
[LabelType.AnomalyDetection]: 'anomaly',
[LabelType.SegmentationInstantLearning]: 'vp',
};
const ProjectCard: React.FC<ProjectCardProps> = ({ projectInfo }) => {
const { id, name, created_at, label_type, orgName, subscription } =
projectInfo;
const { projectId: projectIdFromParam } = useParams();
const formattedDate = format(created_at, 'yyyy-MM-dd');
return (
<Link
className={cn(
'p-4 m-2 bg-background l:h-[250px] rounded-xl shadow-md flex items-center border border-transparent hover:border-gray-500 transition-all cursor-pointer',
Number(projectIdFromParam) === id && 'border-gray-500',
)}
href={`/project/${id}`}
>
<div className="overflow-hidden w-full">
<div className="flex items-center justify-between w-full">
<p className="text-xs text-gray-500 truncate mr-2 truncate">
{orgName}
</p>
<p className="text-xs text-gray-500 italic">{subscription}</p>
</div>
<div className="flex mb-1 items-center">
<p className="text-sm font-medium text-gray mr-2 truncate">{name}</p>
<Chip value={LabelTypeDisplayText[label_type]} />
</div>
<div className="flex items-center truncate">
<p className="text-xs text-gray-500">{formattedDate}</p>
</div>
</div>
</Link>
);
};
export default ProjectCard;
|