-
Notifications
You must be signed in to change notification settings - Fork 45
/
ProjectCard.tsx
57 lines (52 loc) · 1.88 KB
/
ProjectCard.tsx
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
import { IProjectInfo } from "../interfaces/IProjectInfo";
import ProjectDetailList from "./ProjectDetailList";
import ProjectCardHeader from "./ProjectCardHeader";
import "./ProjectCard.css";
import Markdown from "./Markdown";
const shouldShowSection = (items?: string[]) => items && items.length > 0;
interface IProjectCardProps {
project: IProjectInfo;
}
const ProjectCard: React.FC<IProjectCardProps> = (props) => {
const { project } = props;
return (
<div className="project-card m-4 rounded p-4 shadow-sharp transition ease-in-out hover:shadow-hover">
<ProjectCardHeader project={project} />
<div className="mt-4 grid gap-4 lg:grid-cols-3 lg:grid-rows-1">
{project.description && (
<Markdown
className="break-words text-sm"
body={project.description}
/>
)}
<div className="grid gap-4 md:grid-cols-3 lg:col-span-2 lg:grid-cols-4">
{shouldShowSection(project.task) && (
<ProjectDetailList header="Task" items={project.task} />
)}
{shouldShowSection(project.license) && (
<ProjectDetailList header="License" items={project.license} />
)}
{shouldShowSection(project.language) && (
<ProjectDetailList
header="Supported Languages"
items={project.language!}
/>
)}
{shouldShowSection(project.type) && (
<ProjectDetailList header="Type" items={project.type} />
)}
{shouldShowSection(project.inputs) && (
<ProjectDetailList header="Input Methods" items={project.inputs} />
)}
{shouldShowSection(project.outputs) && (
<ProjectDetailList
header="Output Methods"
items={project.outputs}
/>
)}
</div>
</div>
</div>
);
};
export default ProjectCard;