1de4f8a605
- AppNav: hide entire logo div (incl. mr-10 margin) below md: breakpoint to eliminate the phantom whitespace left of the hamburger button - admin: 2×2 grid on mobile → flex row at sm:, so "Schlagworte" fits Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
75 lines
2.3 KiB
Svelte
75 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
import { slide } from 'svelte/transition';
|
|
import { m } from '$lib/paraglide/messages.js';
|
|
import UsersTab from './UsersTab.svelte';
|
|
import TagsTab from './TagsTab.svelte';
|
|
import GroupsTab from './GroupsTab.svelte';
|
|
import SystemTab from './SystemTab.svelte';
|
|
|
|
let { data, form } = $props();
|
|
|
|
let activeTab = $state('users');
|
|
</script>
|
|
|
|
<div class="mx-auto max-w-7xl px-4 py-8 font-sans sm:px-6 lg:px-8">
|
|
<div class="mb-8 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
|
<h1 class="font-serif text-3xl text-ink">{m.admin_heading()}</h1>
|
|
|
|
<!-- Tabs -->
|
|
<div class="grid grid-cols-2 rounded-lg border border-line bg-surface p-1 shadow-sm sm:flex">
|
|
<button
|
|
class="rounded-md px-2 py-2 text-sm font-bold tracking-wide uppercase transition sm:px-4 {activeTab ===
|
|
'users'
|
|
? 'bg-primary text-primary-fg'
|
|
: 'text-ink-2 hover:text-ink'}"
|
|
onclick={() => (activeTab = 'users')}>{m.admin_tab_users()}</button
|
|
>
|
|
<button
|
|
class="rounded-md px-2 py-2 text-sm font-bold tracking-wide uppercase transition sm:px-4 {activeTab ===
|
|
'groups'
|
|
? 'bg-primary text-primary-fg'
|
|
: 'text-ink-2 hover:text-ink'}"
|
|
onclick={() => (activeTab = 'groups')}>{m.admin_tab_groups()}</button
|
|
>
|
|
<button
|
|
class="rounded-md px-2 py-2 text-sm font-bold tracking-wide uppercase transition sm:px-4 {activeTab ===
|
|
'tags'
|
|
? 'bg-primary text-primary-fg'
|
|
: 'text-ink-2 hover:text-ink'}"
|
|
onclick={() => (activeTab = 'tags')}>{m.admin_tab_tags()}</button
|
|
>
|
|
<button
|
|
class="rounded-md px-2 py-2 text-sm font-bold tracking-wide uppercase transition sm:px-4 {activeTab ===
|
|
'system'
|
|
? 'bg-primary text-primary-fg'
|
|
: 'text-ink-2 hover:text-ink'}"
|
|
onclick={() => (activeTab = 'system')}>{m.admin_tab_system()}</button
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
{#if form?.message}
|
|
<div class="mb-6 rounded border border-accent/50 bg-accent/20 p-4 text-ink">
|
|
{form.message}
|
|
</div>
|
|
{/if}
|
|
|
|
{#if activeTab === 'users'}
|
|
<div in:slide>
|
|
<UsersTab users={data.users} />
|
|
</div>
|
|
{:else if activeTab === 'tags'}
|
|
<div in:slide>
|
|
<TagsTab tags={data.tags} />
|
|
</div>
|
|
{:else if activeTab === 'groups'}
|
|
<div in:slide>
|
|
<GroupsTab groups={data.groups} />
|
|
</div>
|
|
{:else if activeTab === 'system'}
|
|
<div in:slide>
|
|
<SystemTab />
|
|
</div>
|
|
{/if}
|
|
</div>
|