src/components/SocialList.astro 4.2 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.medium}
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
					viewBox="0 0 24 24"
77
					stroke-width="1.5"
78
					stroke="currentColor"
79
					fill="none"
80
					stroke-linecap="round"
81
					stroke-linejoin="round"
82
				>
83
					<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
84
					<rect x="4" y="4" width="16" height="16" rx="2"></rect>
85
					<path d="M8 9h1l3 3l3 -3h1"></path>
86
					<line x1="8" y1="15" x2="10" y2="15"></line>
87
					<line x1="14" y1="15" x2="16" y2="15"></line>
88
					<line x1="9" y1="9" x2="9" y2="15"></line>
89
					<line x1="15" y1="9" x2="15" y2="15"></line>
90
				</svg>
91
				<span class="sr-only">Medium</span>
92
			</a>
93
		</li>
94
		<li>
95
			<a
96
				class="inline-block p-2 sm:hover:text-link"
97
				href={SOCIAL_LINKS.linkedin}
98
				target="_blank"
99
				rel="noopener noreferrer"
100
			>
101
				<svg
102
					xmlns="http://www.w3.org/2000/svg"
103
					class="h-6 w-6"
104
					width="44"
105
					height="44"
106
					viewBox="0 0 24 24"
107
					stroke-width="1.5"
108
					stroke="currentColor"
109
					fill="none"
110
					stroke-linecap="round"
111
					stroke-linejoin="round"
112
				>
113
					<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
114
					<rect x="4" y="4" width="16" height="16" rx="2"></rect>
115
					<line x1="8" y1="11" x2="8" y2="16"></line>
116
					<line x1="8" y1="8" x2="8" y2="8.01"></line>
117
					<line x1="12" y1="16" x2="12" y2="11"></line>
118
					<path d="M16 16v-3a2 2 0 0 0 -4 0"></path>
119
				</svg>
120
				<span class="sr-only">LinkedIn</span>
121
			</a>
122
		</li>
123
		<li>
124
			<a
125
				class="inline-block p-2 sm:hover:text-link"
126
				href={SOCIAL_LINKS.ethereum}
127
				target="_blank"
128
				rel="noopener noreferrer"
129
			>
130
				<svg
131
					xmlns="http://www.w3.org/2000/svg"
132
					class="h-6 w-6"
133
					width="44"
134
					height="44"
135
					viewBox="0 0 24 24"
136
					stroke-width="1.5"
137
					stroke="currentColor"
138
					fill="none"
139
					stroke-linecap="round"
140
					stroke-linejoin="round"
141
				>
142
					<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
143
					<path d="M6 12l6 -9l6 9l-6 9z"></path>
144
					<path d="M6 12l6 -3l6 3l-6 2z"></path>
145
				</svg>
146
				<span class="sr-only">Ethereum</span>
147
			</a>
148
		</li>
149
	</ul>
150
</div>