src/components/SocialList.astro 4.3 K raw
1
---
2
import { SOCIAL_LINKS } from "@/data/constants";
3
4
// *** SVG icons from https://tablericons.com/ ***
5
---
6
7
<div class="flex flex-wrap items-center gap-x-4 sm:items-center">
8
	<p>Find me on</p>
9
	<ul class="flex flex-1 items-center gap-x-4 sm:flex-initial">
10
		<li>
11
			<a
12
				class="inline-block p-2 sm:hover:text-link"
13
				href={SOCIAL_LINKS.github}
14
				target="_blank"
15
				rel="noopener noreferrer"
16
			>
17
				<svg
18
					class="h-6 w-6"
19
					aria-hidden="true"
20
					focusable="false"
21
					xmlns="http://www.w3.org/2000/svg"
22
					viewBox="0 0 24 24"
23
					stroke-width="1.5"
24
					stroke="currentColor"
25
					fill="none"
26
					stroke-linecap="round"
27
					stroke-linejoin="round"
28
				>
29
					<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
30
					<path
31
						d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"
32
					>
33
					</path>
34
				</svg>
35
				<span class="sr-only">Github</span>
36
			</a>
37
		</li>
38
		<li>
39
			<a
40
				class="inline-block p-2 sm:hover:text-link"
41
				href={SOCIAL_LINKS.twitter}
42
				target="_blank"
43
				rel="noopener noreferrer"
44
			>
45
				<svg
46
					class="h-6 w-6"
47
					aria-hidden="true"
48
					focusable="false"
49
					xmlns="http://www.w3.org/2000/svg"
50
					viewBox="0 0 24 24"
51
					stroke-width="1.5"
52
					stroke="currentColor"
53
					fill="none"
54
					stroke-linecap="round"
55
					stroke-linejoin="round"
56
				>
57
					<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
58
					<path
59
						d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z"
60
					>
61
					</path>
62
				</svg>
63
				<span class="sr-only">Twitter</span>
64
			</a>
65
		</li>
66
		<li>
67
			<a
68
				class="inline-block p-2 sm:hover:text-link"
69
				href={SOCIAL_LINKS.youtube}
70
				target="_blank"
71
				rel="noopener noreferrer"
72
			>
73
				<svg
74
					xmlns="http://www.w3.org/2000/svg"
75
					class="h-6 w-6"
76
					width="44"
77
					height="44"
78
					viewBox="0 0 24 24"
79
					stroke-width="1.5"
80
					stroke="currentColor"
81
					fill="none"
82
					stroke-linecap="round"
83
					stroke-linejoin="round"
84
				>
85
					<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
86
					<path d="M3 5m0 4a4 4 0 0 1 4 -4h10a4 4 0 0 1 4 4v6a4 4 0 0 1 -4 4h-10a4 4 0 0 1 -4 -4z"
87
					></path>
88
					<path d="M10 9l5 3l-5 3z"></path>
89
				</svg>
90
				<span class="sr-only">YouTube</span>
91
			</a>
92
		</li>
93
		<li>
94
			<a
95
				class="inline-block p-2 sm:hover:text-link"
96
				href={SOCIAL_LINKS.twitch}
97
				target="_blank"
98
				rel="noopener noreferrer"
99
			>
100
				<svg
101
					xmlns="http://www.w3.org/2000/svg"
102
					class="h-6 w-6"
103
					width="44"
104
					height="44"
105
					viewBox="0 0 24 24"
106
					stroke-width="1.5"
107
					stroke="currentColor"
108
					fill="none"
109
					stroke-linecap="round"
110
					stroke-linejoin="round"
111
				>
112
					<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
113
					<path
114
						d="M4 5v11a1 1 0 0 0 1 1h2v4l4 -4h5.584c.266 0 .52 -.105 .707 -.293l2.415 -2.414c.187 -.188 .293 -.442 .293 -.708v-8.585a1 1 0 0 0 -1 -1h-14a1 1 0 0 0 -1 1z"
115
					></path>
116
					<path d="M16 8l0 4"></path>
117
					<path d="M12 8l0 4"></path>
118
				</svg>
119
				<span class="sr-only">Twitch</span>
120
			</a>
121
		</li>
122
		<li>
123
			<a
124
				class="inline-block p-2 sm:hover:text-link"
125
				href={SOCIAL_LINKS.medium}
126
				target="_blank"
127
				rel="noopener noreferrer"
128
			>
129
				<svg
130
					xmlns="http://www.w3.org/2000/svg"
131
					class="h-6 w-6"
132
					viewBox="0 0 24 24"
133
					stroke-width="1.5"
134
					stroke="currentColor"
135
					fill="none"
136
					stroke-linecap="round"
137
					stroke-linejoin="round"
138
				>
139
					<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
140
					<rect x="4" y="4" width="16" height="16" rx="2"></rect>
141
					<path d="M8 9h1l3 3l3 -3h1"></path>
142
					<line x1="8" y1="15" x2="10" y2="15"></line>
143
					<line x1="14" y1="15" x2="16" y2="15"></line>
144
					<line x1="9" y1="9" x2="9" y2="15"></line>
145
					<line x1="15" y1="9" x2="15" y2="15"></line>
146
				</svg>
147
				<span class="sr-only">Medium</span>
148
			</a>
149
		</li>
150
	</ul>
151
</div>