Files for my website
bwc9876.dev
Better Socials Organization
+31
-61
+31
-61
src/components/Socials.astro
+31
-61
src/components/Socials.astro
···
1
1
---
2
2
import IconLink, { LabelPlacement } from "@components/IconLink.astro";
3
3
4
+
type SocialData = Array<{
5
+
name: string;
6
+
icon: string;
7
+
link: string;
8
+
overridePack?: string;
9
+
}>;
10
+
4
11
export interface Props {
5
12
labelPlacement: LabelPlacement;
6
13
makeLinksUnfocusable?: boolean;
7
14
[rest: string | number | symbol]: unknown;
8
15
}
9
16
17
+
const socialData: SocialData = [
18
+
{ name: "GitHub", icon: "github", link: "https://github.com/Bwc9876" },
19
+
{ name: "Twitter", icon: "twitter", link: "https://twitter.com/Bwc9876" },
20
+
{ name: "Instagram", icon: "instagram", link: "https://www.instagram.com/bwc6789/" },
21
+
{ name: "LinkedIn", icon: "linkedin", link: "https://www.linkedin.com/in/bwc9876" },
22
+
{ name: "PayPal", icon: "paypal", link: "https://paypal.me/bwc9876" },
23
+
{ name: "Patreon", icon: "patreon", overridePack: "mdi", link: "https://patreon.com/Bwc9876" }
24
+
];
25
+
10
26
const { labelPlacement, makeLinksUnfocusable, ...rest } = Astro.props;
11
27
---
12
28
13
29
<ul {...rest}>
14
-
<li>
15
-
<IconLink
16
-
icon="github"
17
-
size={25}
18
-
tabindex={makeLinksUnfocusable ? "-1" : undefined}
19
-
href="https://github.com/Bwc9876"
20
-
label="GitHub"
21
-
placement={labelPlacement}
22
-
/>
23
-
</li>
24
-
<li>
25
-
<IconLink
26
-
icon="twitter"
27
-
size={25}
28
-
tabindex={makeLinksUnfocusable ? "-1" : undefined}
29
-
href="https://twitter.com/Bwc9876"
30
-
label="Twitter"
31
-
placement={labelPlacement}
32
-
/>
33
-
</li>
34
-
<li>
35
-
<IconLink
36
-
icon="instagram"
37
-
size={25}
38
-
tabindex={makeLinksUnfocusable ? "-1" : undefined}
39
-
href="https://www.instagram.com/bwc6789/"
40
-
label="Instagram"
41
-
placement={labelPlacement}
42
-
/>
43
-
</li>
44
-
<li>
45
-
<IconLink
46
-
icon="linkedin"
47
-
size={25}
48
-
tabindex={makeLinksUnfocusable ? "-1" : undefined}
49
-
href="https://www.linkedin.com/in/bwc9876"
50
-
label="LinkedIn"
51
-
placement={labelPlacement}
52
-
/>
53
-
</li>
54
-
<li>
55
-
<IconLink
56
-
icon="paypal"
57
-
size={25}
58
-
tabindex={makeLinksUnfocusable ? "-1" : undefined}
59
-
href="https://paypal.me/bwc9876"
60
-
label="PayPal"
61
-
placement={labelPlacement}
62
-
/>
63
-
</li>
64
-
<li>
65
-
<IconLink
66
-
icon="patreon"
67
-
overridePack="mdi"
68
-
size={25}
69
-
tabindex={makeLinksUnfocusable ? "-1" : undefined}
70
-
href="https://patreon.com/Bwc9876"
71
-
label="Patreon"
72
-
placement={labelPlacement}
73
-
/>
74
-
</li>
30
+
{
31
+
socialData.map((s) => (
32
+
<li>
33
+
<IconLink
34
+
icon={s.icon}
35
+
overridePack={s.overridePack}
36
+
size={25}
37
+
tabindex={makeLinksUnfocusable ? "-1" : undefined}
38
+
href={s.link}
39
+
label={s.name}
40
+
placement={labelPlacement}
41
+
/>
42
+
</li>
43
+
))
44
+
}
75
45
</ul>