Project Refactoring

src/lib/components/SourceStats/RadarrStats.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { formatSize, log } from '$lib/utils.js';
+	import StatsPlaceholder from './StatsPlaceholder.svelte';
+	import StatsContainer from './StatsContainer.svelte';
+	import RadarrIcon from '../svgs/RadarrIcon.svelte';
+
+	export let large = false;
+
+	async function fetchStats() {
+		return fetch('/radarr/stats')
+			.then((res) => res.json())
+			.then(log)
+			.then((data) => ({
+				moviesAmount: data?.movies?.length
+			}));
+	}
+</script>
+
+{#await fetchStats()}
+	<StatsPlaceholder {large} />
+{:then { moviesAmount }}
+	<StatsContainer
+		{large}
+		title="Radarr"
+		subtitle="Movies Provider"
+		stats={[
+			{ title: 'Movies', value: String(moviesAmount) },
+			{ title: 'Space Taken', value: formatSize(120_000_000_000) },
+			{ title: 'Space Left', value: formatSize(50_000_000_000) }
+		]}
+	>
+		<RadarrIcon slot="icon" class="absolute opacity-20 p-4 h-full inset-y-0 right-2" />
+	</StatsContainer>
+{/await}

src/lib/components/SourceStats/SonarrStats.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { formatSize } from '$lib/utils.js';
+	import { onMount } from 'svelte';
+	import StatsPlaceholder from './StatsPlaceholder.svelte';
+	import StatsContainer from './StatsContainer.svelte';
+	import SonarrIcon from '../svgs/SonarrIcon.svelte';
+
+	export let large = false;
+
+	let statsRequest: Promise<{ moviesAmount: number }> = new Promise((_) => {}) as any;
+
+	onMount(() => {
+		statsRequest = fetch('/radarr/stats')
+			.then((res) => res.json())
+			.then((data) => ({
+				moviesAmount: data?.movies?.length
+			}));
+	});
+</script>
+
+{#await statsRequest}
+	<StatsPlaceholder {large} />
+{:then { moviesAmount }}
+	<StatsContainer
+		{large}
+		title="Sonarr"
+		subtitle="Shows Provider"
+		stats={[
+			{ title: 'Movies', value: String(moviesAmount) },
+			{ title: 'Space Taken', value: formatSize(120_000_000_000) },
+			{ title: 'Space Left', value: formatSize(50_000_000_000) }
+		]}
+		color="#8aacfd21"
+	>
+		<SonarrIcon slot="icon" class="absolute opacity-20 p-4 h-full inset-y-0 right-2" />
+	</StatsContainer>
+{/await}

src/lib/components/SourceStats/StatsContainer.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import classNames from 'classnames';
+	import RadarrIcon from '../svgs/RadarrIcon.svelte';
+
+	type Stat = {
+		title: string;
+		value: string;
+	};
+
+	export let title: string;
+	export let subtitle: string;
+	export let stats: Stat[] = [];
+
+	export let color: string = '#fde68a20';
+	export let large = false;
+</script>
+
+<div
+	class={classNames('relative w-full mx-auto px-6 rounded-xl overflow-hidden', {
+		'h-16': !large,
+		'h-28': large
+	})}
+	style={'background-color: ' + color + ';'}
+>
+	<div class="absolute left-0 inset-y-0 w-[70%] bg-[#ffffff22]" />
+	{#if large}
+		<slot name="icon" />
+	{/if}
+	<div
+		class={classNames('relative z-[1] flex flex-1 h-full', {
+			'justify-between items-center': !large,
+			'flex-col justify-center gap-2': large
+		})}
+	>
+		<div class="flex flex-col">
+			<h3 class="text-zinc-400 font-medium text-xs tracking-wider">{subtitle}</h3>
+			<a href="/static" class="text-zinc-200 font-bold text-xl tracking-wide">{title}</a>
+		</div>
+		<div class="flex gap-8">
+			{#each stats as { title, value }}
+				<div class="flex flex-col items-center gap-0.5">
+					<h3 class="uppercase text-zinc-400 font-medium text-xs tracking-wider">{title}</h3>
+					<div class="font-medium text-sm">{value}</div>
+				</div>
+			{/each}
+		</div>
+	</div>
+</div>

src/lib/components/SourceStats/StatsPlaceholder.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import classNames from 'classnames';
+
+	export let large = false;
+</script>
+
+<div
+	class={classNames('placeholder w-full rounded-xl', {
+		'h-16': !large,
+		'h-28': large
+	})}
+/>