blob: 5a4f9c82139c63c8a68c68e84f7a87ec39be3e20 (
plain)
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
import GithubIcon from '@assets/images/social-media/github.svg';
import GitlabIcon from '@assets/images/social-media/gitlab.svg';
import { t } from '@lingui/macro';
import { ProjectMeta } from '@ts/types/app';
import { slugify } from '@utils/helpers/slugify';
import useGithubApi from '@utils/hooks/useGithubApi';
import Image from 'next/image';
import { useRouter } from 'next/router';
import styles from './ProjectSummary.module.scss';
const ProjectSummary = ({
title,
cover,
meta,
}: {
title: string;
cover: string;
meta: ProjectMeta;
}) => {
const { license, repos, technologies } = meta;
const { locale } = useRouter();
const { data } = useGithubApi(repos?.github ? repos.github : '');
const getFormattedDate = (date: string) => {
const dateOptions: Intl.DateTimeFormatOptions = {
day: 'numeric',
month: 'long',
year: 'numeric',
};
return new Date(date).toLocaleDateString(locale, dateOptions);
};
return (
<div className={styles.wrapper}>
<div className={styles.cover}>
<Image
src={cover}
alt={t`${title} preview`}
layout="fill"
objectFit="contain"
/>
</div>
<dl className={styles.info}>
{data && (
<div className={styles.info__item}>
<dt>{t`Created on`}</dt>
<dd>{t`${getFormattedDate(data.created_at)}`}</dd>
</div>
)}
{data && (
<div className={styles.info__item}>
<dt>{t`Last updated on`}</dt>
<dd>{t`${getFormattedDate(data.updated_at)}`}</dd>
</div>
)}
<div className={styles.info__item}>
<dt>{t`License`}</dt>
<dd>{license}</dd>
</div>
{technologies && (
<div className={styles.info__item}>
<dt>{t`Technologies`}</dt>
{technologies.map((techno) => (
<dd
key={slugify(techno)}
className={`${styles.techno} ${styles['inline-data']}`}
>
{techno}
</dd>
))}
</div>
)}
{repos && (
<div className={styles.info__item}>
<dt>{t`Repositories`}</dt>
{repos.github && (
<dd className={styles['inline-data']}>
<a
href={`https://github.com/${repos.github}`}
className={styles.repo}
>
<GithubIcon />
<span className="screen-reader-text">Github</span>
</a>
</dd>
)}
{repos.gitlab && (
<dd className={styles['inline-data']}>
<a
href={`https://gitlab.com/${repos.gitlab}`}
className={styles.repo}
>
<GitlabIcon />
<span className="screen-reader-text">Gitlab</span>
</a>
</dd>
)}
</div>
)}
{data && repos && (
<div>
<dt>{t`Popularity`}</dt>
{repos.github && (
<dd>
⭐
<a href={`https://github.com/${repos.github}/stargazers`}>
{t`${data.stargazers_count} stars on Github`}
</a>
</dd>
)}
</div>
)}
</dl>
</div>
);
};
export default ProjectSummary;
|
