forked from keystonejs/keystone
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathSocials.tsx
More file actions
91 lines (88 loc) · 2.27 KB
/
Copy pathSocials.tsx
File metadata and controls
91 lines (88 loc) · 2.27 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
/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx } from '@emotion/react';
import { HTMLAttributes } from 'react';
import { Twitter } from './icons/Twitter';
// import { YouTube } from './icons/YouTube';
import { Slack } from './icons/Slack';
export function Socials(props: HTMLAttributes<HTMLElement>) {
return (
<div
css={{
display: 'inline-grid',
gridTemplateColumns: '1fr 1fr 1fr',
gap: 'var(--space-large)',
alignItems: 'center',
marginLeft: 'auto',
}}
{...props}
>
<a
href="https://twitter.com/keystonejs"
target="_blank"
rel="noopener noreferrer"
css={{
display: 'inline-flex',
padding: 0,
justifyContent: 'center',
borderRadius: '100%',
color: 'currentColor',
transition: 'color 0.3s ease',
':hover': {
color: '#1da1f2',
},
}}
>
<Twitter css={{ height: '1.5em' }} />
</a>
<a
href="https://community.keystonejs.com/"
target="_blank"
rel="noopener noreferrer"
css={{
display: 'inline-flex',
padding: 0,
justifyContent: 'center',
borderRadius: '100%',
color: 'currentColor',
'.slack-color': {
fill: 'currentColor',
transition: 'fill 0.3s ease',
},
'&:hover .slack-color1': {
fill: '#e01e5a',
},
'&:hover .slack-color2': {
fill: '#36c5f0',
},
'&:hover .slack-color3': {
fill: '#2eb67d',
},
'&:hover .slack-color4': {
fill: '#ecb22e',
},
}}
>
<Slack css={{ height: '1.5em' }} />
</a>
{/* <a
href="https://www.youtube.com/channel/UClWScN0YMgpN7swHVaEPKuQ"
target="_blank"
rel="noopener noreferrer"
css={{
display: 'inline-flex',
padding: 0,
justifyContent: 'center',
borderRadius: '100%',
color: 'currentColor',
transition: 'color 0.3s ease',
':hover': {
color: '#fb0202',
},
}}
>
<YouTube css={{ height: '2em' }} />
</a> */}
</div>
);
}