Fix icons in streamers table (#13)

Author: matiboux

app/app/src/components/CountryFlag.astro

@@ -0,0 +1,45 @@
+---
+type CountryCode =
+	| 'AUS' // Australia
+	| 'BEL' // Belgium
+	| 'CAN' // Canada
+	| 'CHE' // Switzerland
+	| 'ESP' // Spain
+	| 'FRA' // France
+	| 'GBR' // United Kingdom
+	| 'IDN' // Indonesia
+	| 'ITA' // Italy
+	| 'USA' // United States
+
+function parseCountryCode(code: any): string | undefined
+{
+	return typeof code === 'string' ? code.toUpperCase() : code
+}
+
+const countryCode: CountryCode | undefined = parseCountryCode(Astro.props.country) as any
+---
+
+{
+countryCode === 'AUS'
+	? <span class="icon-[twemoji--flag-australia] icon-align icon-fw"></span>
+: countryCode === 'BEL'
+	? <span class="icon-[twemoji--flag-belgium] icon-align icon-fw"></span>
+: countryCode === 'CAN'
+	? <span class="icon-[twemoji--flag-canada] icon-align icon-fw"></span>
+: countryCode === 'CHE'
+	? <span class="icon-[twemoji--flag-switzerland] icon-align icon-fw"></span>
+: countryCode === 'ESP'
+	? <span class="icon-[twemoji--flag-spain] icon-align icon-fw"></span>
+: countryCode === 'FRA'
+	? <span class="icon-[twemoji--flag-france] icon-align icon-fw"></span>
+: countryCode === 'GBR'
+	? <span class="icon-[twemoji--flag-united-kingdom] icon-align icon-fw"></span>
+: countryCode === 'IDN'
+	? <span class="icon-[twemoji--flag-indonesia] icon-align icon-fw"></span>
+: countryCode === 'ITA'
+	? <span class="icon-[twemoji--flag-italy] icon-align icon-fw"></span>
+: countryCode === 'USA'
+	? <span class="icon-[twemoji--flag-united-states] icon-align icon-fw"></span>
+:
+	<em>{countryCode}</em>
+}

app/app/src/components/SocialPlatformIcon.astro

@@ -0,0 +1,30 @@
+---
+type SocialPlatform =
+	| 'twitch' // Twitch
+	| 'twitter' // Twitter
+	| 'youtube' // YouTube
+	| 'tiktok' // TikTok
+	| 'instagram' // Instagram
+
+function parseSocialPlatform(code: any): string | undefined
+{
+	return typeof code === 'string' ? code.toLowerCase() : code
+}
+
+const socialPlatform: SocialPlatform | undefined = parseSocialPlatform(Astro.props.platform) as any
+---
+
+{
+socialPlatform === 'twitch'
+	? <span class="icon-[mdi--twitch] icon-align icon-fw"></span>
+: socialPlatform === 'twitter'
+	? <span class="icon-[mdi--twitter] icon-align icon-fw"></span>
+: socialPlatform === 'youtube'
+	? <span class="icon-[mdi--youtube] icon-align icon-fw"></span>
+: socialPlatform === 'tiktok'
+	? <span class="icon-[ic--baseline-tiktok] icon-align icon-fw"></span>
+: socialPlatform === 'instagram'
+	? <span class="icon-[mdi--instagram] icon-align icon-fw"></span>
+:
+	<em>{socialPlatform}</em>
+}

app/app/src/components/StreamersTable.astro

@@ -1,6 +1,8 @@
 ---
 import YAML from 'yaml'
 
+import CountryFlag from '~/components/CountryFlag.astro'
+import SocialPlatformIcon from '~/components/SocialPlatformIcon.astro'
 import streamersSocialsYml from '~/data/streamers/socials.yml?raw'
 
 interface StreamerSocials {
@@ -19,27 +21,6 @@ const streamersSocials = YAML.parse(streamersSocialsYml) as Record<string, Strea
 const streamers: Array<StreamerSocials> = streamersList.map(
 	(name) => streamersSocials[name] || { name, country: '?', socials: [] }
 )
-
-const countryFlag: Record<string, string> = {
-	'AUS': 'australia',
-	'BEL': 'belgium',
-	'CAN': 'canada',
-	'CHE': 'switzerland',
-	'ESP': 'spain',
-	'FRA': 'france',
-	'GBR': 'united-kingdom',
-	'IDN': 'indonesia',
-	'ITA': 'italy',
-	'USA': 'united-states',
-}
-
-const socialIcons: Record<string, string> = {
-	'twitch': 'mdi--twitch',
-	'twitter': 'mdi--twitter',
-	'youtube': 'mdi--youtube',
-	'tiktok': 'ic--baseline-tiktok',
-	'instagram': 'mdi--instagram',
-}
 ---
 
 <table>
@@ -56,19 +37,14 @@ const socialIcons: Record<string, string> = {
 		{streamers.map((streamer) => (
 			<tr>
 				<td>
-					{countryFlag[streamer.country] !== undefined
-						? <span class={`icon-[twemoji--flag-${countryFlag[streamer.country]}] icon-align icon-fw`}></span>
-						: <em>{streamer.country}</em>
-					}
+					<CountryFlag country={streamer.country} />
 				</td>
 				<td>{streamer.name}</td>
 				<td>
 					{streamer.socials?.map((social, index) => (
 						<>
 							<a href={social.url} target="_blank" rel="noopener noreferrer">{
-								socialIcons[social.platform.toLowerCase()] !== undefined
-									? <span class={`icon-[${socialIcons[social.platform.toLowerCase()]}] icon-align icon-fw`}></span>
-									: <em>{social.platform}</em>
+								}<SocialPlatformIcon platform={social.platform} />{
 							}</a>{index < streamer.socials.length - 1 && ', '}
 						</>
 					))}