-
Notifications
You must be signed in to change notification settings - Fork 27
/
library-card.tsx
117 lines (113 loc) · 2.85 KB
/
library-card.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
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
import React from 'react';
import classNames from 'classnames';
import { type Library } from '../../models/library';
import {
libraryCardBadgeStyle,
libraryPackageLinkStyle,
libraryPackageTextStyle,
} from './library-card.css';
import {
getBundleSizeBadge,
getGitHubStarsBadge,
getNpmDownloadsBadge,
} from '../../util/stats-util';
import { track } from '../../util/analytics-utils';
import { ResourceCard, type ResourceCardProps } from './resource-card';
export type LibraryCardProps = Omit<
ResourceCardProps,
| 'title'
| 'subtitle'
| 'image'
| 'layout'
| 'imageLayout'
| 'href'
| 'tags'
| 'attributes'
| 'children'
> & {
library: Library;
};
export function LibraryCard({ library, ...props }: LibraryCardProps) {
return (
<ResourceCard
title={library.name}
onTitleClick={() =>
track('resource_clicked', { resource_name: library.name })
}
subtitle={library.author}
image={library.image}
darkImageBackground={library.darkImageBackground}
href={library.href}
tags={library.tags}
allowSelection={!!library.package}
badges={
<>
{library?.repo.includes('github.com') ? (
<Badge
data={getGitHubStarsBadge(
library.repo.replace(/https:\/\/(www\.)?github\.com\//, ''),
)}
href={library.repo}
label={`${library.name} GitHub Repository`}
/>
) : library?.repo !== '' ? (
// TODO: Have other frameworks decide what image to use if not GitHub
<Badge
data={''}
href={library.repo}
label={`${library.name} GitHub Repository`}
/>
) : null}
{library?.package.includes('npmjs') ? (
<>
<Badge
data={getNpmDownloadsBadge(
library.package.replace('https://www.npmjs.com/package/', ''),
)}
href={library.package}
label={`${library.name} NPM Package`}
/>
<Badge
data={getBundleSizeBadge(
library.package.replace('https://www.npmjs.com/package/', ''),
)}
href={`https://bundlephobia.com/package/${library.package.replace(
'https://www.npmjs.com/package/',
'',
)}`}
label={`${library.name} Bundle Size Stats`}
/>
</>
) : library?.package !== '' ? (
// TODO: Have other frameworks decide what image to use if not npm
<div
className={classNames(
libraryPackageLinkStyle,
libraryCardBadgeStyle,
)}
>
<a className={libraryPackageTextStyle} href={library.package}>
📦 Package
</a>
</div>
) : null}
</>
}
{...props}
>
{library.description}
</ResourceCard>
);
}
type BadgeProps = {
data?: string;
href: string;
label: string;
};
function Badge({ data, href, label }: BadgeProps) {
return (
<a href={href} target="_blank" rel="noreferrer">
<img className={libraryCardBadgeStyle} src={data} alt={label} />
</a>
);
}