src/components/SocialList.astro 6.0 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.ethereum}
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
                                                              stroke-linejoin="round"
109
                                                                               >
110
                                                                               <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
111
                                                                               <path d="M6 12l6 -9l6 9l-6 9z"></path>
112
                                                                               <path d="M6 12l6 -3l6 3l-6 2z"></path>
113
        </svg>
114
        <span class="sr-only">Ethereum</span>
115
      </a>
116
    </li>
117
118
119
		<li>
120
			<a
121
				class="inline-block p-2 sm:hover:text-link"
122
				href={SOCIAL_LINKS.farcaster}
123
				target="_blank"
124
				rel="noopener noreferrer"
125
			>
126
127
128
      <svg
129
130
					xmlns="http://www.w3.org/2000/svg"
131
					class="h-5 w-5"
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 d="M1.30081 5.95589L0.663137 3.72734H4.11868H4.61868V3.22734V0.5H19.0974V3.22734V3.72734H19.5974H23.3371L22.7003 5.95589H22.2967H21.7967V6.45589V19.5144V20.0144H22.2967C22.3976 20.0144 22.5064 20.1036 22.5064 20.247V21.1275V21.6275H23.0064H23.1484C23.2487 21.6275 23.3581 21.7161 23.3581 21.8612V22.2418H16.4058V21.8612C16.4058 21.7161 16.5151 21.6275 16.6155 21.6275H16.7574H17.2574V21.1275V20.247C17.2574 20.125 17.34 20.0375 17.4271 20.0183L17.82 19.9314L17.8192 19.529L17.8035 12.3237L17.8035 12.3024L17.8016 12.2813C17.5291 9.15908 14.985 6.68965 11.8581 6.68965C8.73115 6.68965 6.18706 9.15908 5.91448 12.2813L5.91263 12.3025L5.91259 12.3238L5.89816 19.523L5.89729 19.9535L6.32283 20.0183C6.42585 20.034 6.55708 20.0886 6.65436 20.1647C6.71995 20.216 6.73823 20.2498 6.74258 20.2594V21.1275V21.6275H7.24258H7.38452C7.486 21.6275 7.59543 21.7173 7.59543 21.8612V22.2418H0.641941V21.8612C0.641941 21.7173 0.751371 21.6275 0.852847 21.6275H0.994788H1.49479V21.1275V20.247C1.49479 20.1036 1.60357 20.0144 1.70449 20.0144H2.20449V19.5144V6.45589V5.95589H1.70449H1.30081Z"/>
140
        </svg>
141
				<span class="sr-only">Farcaster</span>
142
			</a>
143
		</li>
144
145
		<li>
146
			<a
147
				class="inline-block p-2 sm:hover:text-link"
148
				href={SOCIAL_LINKS.medium}
149
				target="_blank"
150
				rel="noopener noreferrer"
151
			>
152
				<svg
153
					xmlns="http://www.w3.org/2000/svg"
154
					class="h-6 w-6"
155
					viewBox="0 0 24 24"
156
					stroke-width="1.5"
157
					stroke="currentColor"
158
					fill="none"
159
					stroke-linecap="round"
160
					stroke-linejoin="round"
161
				>
162
					<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
163
					<rect x="4" y="4" width="16" height="16" rx="2"></rect>
164
					<path d="M8 9h1l3 3l3 -3h1"></path>
165
					<line x1="8" y1="15" x2="10" y2="15"></line>
166
					<line x1="14" y1="15" x2="16" y2="15"></line>
167
					<line x1="9" y1="9" x2="9" y2="15"></line>
168
					<line x1="15" y1="9" x2="15" y2="15"></line>
169
				</svg>
170
				<span class="sr-only">Medium</span>
171
			</a>
172
		</li>
173
	</ul>
174
</div>