blob: ff6a6a596832a62c829194757f211cd70faf6ddb (
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
|
/**
* Detail view, displaying text plus media
*/
import React from "react";
import Gallery from "./Gallery.js";
import Vimeo from "@u-wave/react-vimeo";
export default function Detail({ node, visible, onClose }) {
if (!node) {
return <div className="detail" />;
}
const { id, data } = node;
const index = id + 1;
return (
<div className={visible ? "detail visible" : "detail"}>
<div className="content">
<div>
<div className="title">
<div className="index">{pad(index)}</div>
{data.author && (
<div dangerouslySetInnerHTML={{ __html: data.author }} />
)}
<div dangerouslySetInnerHTML={{ __html: data.title }} />
</div>
<div
className="citation"
dangerouslySetInnerHTML={{ __html: data.citation }}
/>
<div
className="description"
dangerouslySetInnerHTML={{ __html: data.description }}
/>
</div>
</div>
<div className="media">
<div className="buttons close">
<img src="/assets/img/close.svg" onClick={onClose} />
</div>
{data.type === "video" ? (
visible && (
<div className="video">
<Vimeo
video={data.images[0].uri.replace("player.", "")}
autoplay
loop
/>
</div>
)
) : (
<Gallery images={data.images} visible={visible} />
)}
</div>
</div>
);
}
const pad = (value) => (value < 10 ? "0" + value : value);
const capitalizeWord = (text = "") =>
text ? text.charAt(0).toUpperCase() + text.slice(1) : "";
const capitalize = (text = "") =>
String(text || "")
.split(" ")
.map(capitalizeWord)
.join(" ");
|
