-
Notifications
You must be signed in to change notification settings - Fork 1
/
template.js
86 lines (81 loc) · 2.42 KB
/
template.js
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
import React from 'react';
import { graphql, Link } from 'gatsby';
import LeftArrow from '../components/left-arrow';
import RightArrow from '../components/right-arrow';
import Heart from '../components/heart';
import User from '../components/user';
import { truncateString } from '../utils';
const Template = ({
data: {
nycPhoto: {
description,
alt_description,
user: { name, portfolio_url },
urls: { regular },
likes
}
},
pageContext
}) => {
return (
<main>
<div className="relative grid gap-4 bg-black text-white opacity-80 p-4 z-20 capitalize">
<Link to="/" className="relative grid grid-cols-auto-1fr">
<LeftArrow />
Back
</Link>
<h1 className="font-black text-3xl ">{truncateString(description, 100)}</h1>
<p className="text-sm font-normal">{alt_description}</p>
<div className="grid grid-cols-auto-1fr gap-4 items-end text-sm">
<a href={portfolio_url} target="_blank" rel="noreferrer" className="cursor-pointer grid grid-cols-auto-1fr gap-1 items-center hover:text-purple-200 transition">
<User />
{name}
</a>
<div className="grid grid-cols-auto-1fr gap-1 items-center">
<Heart />
{likes}
</div>
</div>
</div>
<div className="absolute top-0 left-0 w-full h-screen z-10">
<div className="flex justify-between items-center w-full h-screen">
{pageContext.prev ? (
<Link className="bg-brand-primary text-white p-4 font-bold capitalize" to={pageContext.prev.slug}>
<LeftArrow />
</Link>
) : (
<div />
)}
{pageContext.next ? (
<Link className="bg-brand-primary text-white p-4 font-bold capitalize" to={pageContext.next.slug}>
<RightArrow />
</Link>
) : (
<div />
)}
</div>
</div>
<div className="absolute top-0 left-0 w-full h-screen bg-cover bg-center z-1">
<img src={regular} alt={alt_description} className="object-cover w-full h-full" />
</div>
</main>
);
};
export const query = graphql`
query ($id: String) {
nycPhoto(id: { eq: $id }) {
id
description
alt_description
user {
name
portfolio_url
}
urls {
regular
}
likes
}
}
`;
export default Template;