-
Notifications
You must be signed in to change notification settings - Fork 122
Expand file tree
/
Copy pathCodeExampleList.js
More file actions
114 lines (101 loc) · 2.81 KB
/
CodeExampleList.js
File metadata and controls
114 lines (101 loc) · 2.81 KB
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
import React, { memo } from 'react';
import cn from 'classnames';
import Image from './Image';
import * as css from './CodeExampleList.module.css';
import NodeIcon from '../images/node-icon.mini.svg';
import P5Icon from '../images/p5js-icon.mini.svg';
import ProcessingLogo from '../images/processing-icon.mini.svg';
const icons = {
p5: () => <P5Icon className={css.p5} />,
node: () => <NodeIcon className={css.node} />,
processing: () => <ProcessingLogo className={css.processing} />
};
const linkProps = {
title: 'Open code source',
target: '_blank',
rel: 'noreferrer'
};
const useUrls = (urls) => {
const mainUrl = urls.p5 ?? urls.processing ?? urls.node ?? urls.other;
const components = [];
for (const url in urls) {
if (url !== 'other' && urls[url]) {
const Icon = icons[url];
components.push(
<span className={css.icon} key={url}>
<a {...linkProps} title={`Open ${url} source code`} href={urls[url]}>
<Icon />
</a>
</span>
);
}
}
if (urls.other) {
const downloadUrl = urls.other.includes('github.com/')
? `https://minhaskamal.github.io/DownGit/#/home?url=${urls.other}`
: null;
components.push(
<div className={css.links} key="links">
<a {...linkProps} className={css.linkIcon} href={urls.other}>
📒
</a>
{downloadUrl && (
<a
{...linkProps}
className={css.linkIcon}
href={downloadUrl}
title="Download code as zip">
💾
</a>
)}
</div>
);
}
return [mainUrl, components];
};
const CodeExample = ({ example, placeholderImage }) => {
const { title, description, image } = example;
const [mainUrl, urls] = useUrls(example.urls);
const thumbnail = image
? example.image.file.childImageSharp.gatsbyImageData
: placeholderImage;
return (
<li className={css.example}>
<span className={css.thumbnail}>
<a {...linkProps} href={mainUrl}>
{thumbnail && (
<Image image={thumbnail} alt={`"${title}" code example`} />
)}
</a>
</span>
<span className={css.info}>
<a {...linkProps} href={mainUrl}>
<span className={css.title}> {title}</span>
{description && (
<span className={css.description}>{description}</span>
)}
</a>
</span>
{urls}
</li>
);
};
const CodeExampleList = ({
className,
variant,
examples,
placeholderImage
}) => {
return (
<ul className={cn(css.root, className, { [css[variant]]: variant })}>
{examples.map((example, key) => (
<CodeExample
example={example}
key={key}
placeholderImage={placeholderImage}
/>
))}
</ul>
);
};
export default memo(CodeExampleList);