src/components/SocialList.astro 4.1 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 class="inline-block p-2 sm:hover:text-link" href={SOCIAL_LINKS.linkedin} }>
96
				<svg
97
					xmlns="http://www.w3.org/2000/svg"
98
					class="h-6 w-6"
99
					width="44"
100
					height="44"
101
					viewBox="0 0 24 24"
102
					stroke-width="1.5"
103
					stroke="currentColor"
104
					fill="none"
105
					stroke-linecap="round"
106
					stroke-linejoin="round"
107
				>
108
					<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
109
					<rect x="4" y="4" width="16" height="16" rx="2"></rect>
110
					<line x1="8" y1="11" x2="8" y2="16"></line>
111
					<line x1="8" y1="8" x2="8" y2="8.01"></line>
112
					<line x1="12" y1="16" x2="12" y2="11"></line>
113
					<path d="M16 16v-3a2 2 0 0 0 -4 0"></path>
114
				</svg>
115
				<span class="sr-only">LinkedIn</span>
116
			</a>
117
		</li>
118
		<li>
119
			<a class="inline-block p-2 sm:hover:text-link" href={SOCIAL_LINKS.ethereum} }>
120
				<svg
121
					xmlns="http://www.w3.org/2000/svg"
122
					class="h-6 w-6"
123
					width="44"
124
					height="44"
125
					viewBox="0 0 24 24"
126
					stroke-width="1.5"
127
					stroke="currentColor"
128
					fill="none"
129
					stroke-linecap="round"
130
					stroke-linejoin="round"
131
				>
132
					<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
133
					<path d="M6 12l6 -9l6 9l-6 9z"></path>
134
					<path d="M6 12l6 -3l6 3l-6 2z"></path>
135
				</svg>
136
				<span class="sr-only">Ethereum</span>
137
			</a>
138
		</li>
139
	</ul>
140
</div>