Files
MediaManager-maxdorninger/web/src/routes/dashboard/settings/+page.svelte

59 lines
2.2 KiB
Svelte

<script lang="ts">
import UserTable from '$lib/components/user-data-table.svelte';
import {page} from '$app/state';
import * as Card from "$lib/components/ui/card/index.js";
import {getContext} from "svelte";
import UserSettings from '$lib/components/user-settings.svelte';
import {Separator} from "$lib/components/ui/separator";
import * as Sidebar from '$lib/components/ui/sidebar/index.js';
import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
import {base} from "$app/paths";
let currentUser = getContext("user")
let users = page.data.users;
</script>
<header class="flex h-16 shrink-0 items-center gap-2">
<div class="flex items-center gap-2 px-4">
<Sidebar.Trigger class="-ml-1"/>
<Separator class="mr-2 h-4" orientation="vertical"/>
<Breadcrumb.Root>
<Breadcrumb.List>
<Breadcrumb.Item class="hidden md:block">
<Breadcrumb.Link href="{base}/dashboard">MediaManager</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator class="hidden md:block"/>
<Breadcrumb.Item>
<Breadcrumb.Page>Settings</Breadcrumb.Page>
</Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb.Root>
</div>
</header>
<div class="flex w-full flex-1 flex-col gap-4 p-4 pt-0 max-w-[1000px] mx-auto">
<h1 class="scroll-m-20 my-6 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">
Settings
</h1>
<Card.Root id="me">
<Card.Header>
<Card.Title>You</Card.Title>
<Card.Description>Change your email or password</Card.Description>
</Card.Header>
<Card.Content>
<UserSettings/>
</Card.Content>
</Card.Root>
{#if currentUser().is_superuser}
<Card.Root id="users">
<Card.Header>
<Card.Title>Users</Card.Title>
<Card.Description>Edit or delete users</Card.Description>
</Card.Header>
<Card.Content>
<UserTable bind:users={users}/>
</Card.Content>
</Card.Root>
{/if}
</div>