74 lines
2.7 KiB
Svelte
74 lines
2.7 KiB
Svelte
<script lang="ts">
|
|
import Icon from "$lib/components/atoms/icon.svelte";
|
|
import MaxWidthWrapper from "$lib/components/molecules/max-width-wrapper.svelte";
|
|
import { Button } from "$lib/components/ui/button";
|
|
import * as Card from "$lib/components/ui/card";
|
|
import { Input } from "$lib/components/ui/input";
|
|
import { mainNavTree } from "$lib/core/constants";
|
|
import { breadcrumbs } from "$lib/global.stores";
|
|
import { Plus, RefreshCw, Search } from "@lucide/svelte";
|
|
import { toast } from "svelte-sonner";
|
|
|
|
breadcrumbs.set([mainNavTree[1]]);
|
|
</script>
|
|
|
|
<MaxWidthWrapper cls="">
|
|
<Card.Root>
|
|
<Card.Content>
|
|
<div class="flex items-center justify-between gap-2">
|
|
<Card.Title>Users</Card.Title>
|
|
<div class="flex items-center gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onclick={() => {
|
|
toast("Refreshing users...", {
|
|
description: "simulating API call",
|
|
});
|
|
}}
|
|
>
|
|
<Icon icon={RefreshCw} cls="h-4 w-auto" />
|
|
Refresh
|
|
</Button>
|
|
<Button
|
|
onclick={() => {
|
|
toast("Creating user...", {
|
|
description: "simulating API call",
|
|
});
|
|
}}
|
|
size="sm"
|
|
>
|
|
<Icon icon={Plus} cls="h-4 w-auto" />
|
|
Create User
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 grid grid-cols-1 gap-3 md:grid-cols-3">
|
|
<!-- Search -->
|
|
<div class="relative">
|
|
<Icon
|
|
icon={Search}
|
|
cls="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground"
|
|
/>
|
|
<Input
|
|
class="pl-10"
|
|
placeholder="Search by email, name, or username..."
|
|
oninput={(event) => {
|
|
toast.info("Searching...", {
|
|
description: "simulating API call",
|
|
});
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid place-items-center p-8 py-32">
|
|
<span class="text-xl font-semibold">
|
|
Not Active At The Moment
|
|
</span>
|
|
</div>
|
|
</Card.Content>
|
|
</Card.Root>
|
|
</MaxWidthWrapper>
|