git-sync/profilarr
1
0
Fork 0
mirror of https://github.com/Dictionarry-Hub/profilarr.git synced 2026-01-31 06:40:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor(state): move empty state into reusable ui comp

Browse Source
This commit is contained in:
Sam Chau
2025-11-03 21:09:26 +10:30
parent c17ae8eac4
commit ed8f81619e
3 changed files with 50 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/lib/client/ui/state/EmptyState.svelte Normal file
View File

@@ -0,0 +1,40 @@
<script lang="ts">
import { Plus } from 'lucide-svelte';
export let icon: any; // Lucide icon component
export let title: string;
export let description: string;
export let buttonText: string;
export let buttonHref: string;
export let buttonIcon: any = Plus; // Default to Plus icon
</script>
<div class="flex min-h-[calc(100vh-4rem)] items-center justify-center p-8">
<div class="w-full max-w-md text-center">
<!-- Icon -->
<div class="mb-6 flex justify-center">
<div class="rounded-full bg-neutral-100 p-6 dark:bg-neutral-800">
<svelte:component this={icon} class="h-12 w-12 text-neutral-400 dark:text-neutral-500" />
</div>
</div>
<!-- Title -->
<h1 class="mb-3 text-2xl font-bold text-neutral-900 dark:text-neutral-50">
{title}
</h1>
<!-- Description -->
<p class="mb-8 text-neutral-600 dark:text-neutral-400">
{description}
</p>
<!-- Action Button -->
<a
href={buttonHref}
class="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600"
>
<svelte:component this={buttonIcon} size={18} />
{buttonText}
</a>
</div>
</div>

2
src/routes/+layout.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import '../app.css';
import logo from '$assets/logo.svg';
import logo from '$assets/logo-firefox-circular-arrow.png';
import Navbar from '$ui/navigation/navbar/navbar.svelte';
import PageNav from '$ui/navigation/pageNav/pageNav.svelte';
import AlertContainer from '$alerts/AlertContainer.svelte';

38
src/routes/arr/[type]/+page.svelte
View File

@@ -1,6 +1,7 @@
<script lang="ts">
import type { PageData } from './$types';
import { Plus, Inbox } from 'lucide-svelte';
import EmptyState from '$ui/state/EmptyState.svelte';
export let data: PageData;
@@ -8,32 +9,11 @@
$: displayName = data.type ? data.type.charAt(0).toUpperCase() + data.type.slice(1) : '';
</script>
<div class="flex min-h-[calc(100vh-4rem)] items-center justify-center p-8">
<div class="w-full max-w-md text-center">
<!-- Icon -->
<div class="mb-6 flex justify-center">
<div class="rounded-full bg-neutral-100 p-6 dark:bg-neutral-800">
<Inbox class="h-12 w-12 text-neutral-400 dark:text-neutral-500" />
</div>
</div>
<!-- Title -->
<h1 class="mb-3 text-2xl font-bold text-neutral-900 dark:text-neutral-50">
No {displayName} instances yet
</h1>
<!-- Description -->
<p class="mb-8 text-neutral-600 dark:text-neutral-400">
Get started by adding your first {displayName} instance to begin managing your media library.
</p>
<!-- Action Button -->
<a
href="/arr/new?type={data.type}"
class="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600"
>
<Plus size={18} />
Add {displayName} Instance
</a>
</div>
</div>
<EmptyState
icon={Inbox}
title="No {displayName} instances yet"
description="Get started by adding your first {displayName} instance to begin managing your media library."
buttonText="Add {displayName} Instance"
buttonHref="/arr/new?type={data.type}"
buttonIcon={Plus}
/>