53 lines
1.7 KiB
Svelte
53 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import { enhance } from '$app/forms';
|
|
import { Button } from 'bits-ui';
|
|
import IconDeviceFloppy from '~icons/tabler/device-floppy';
|
|
import IconTrash from '~icons/tabler/trash';
|
|
import IconX from '~icons/tabler/x';
|
|
|
|
let { children, createOnly } = $props();
|
|
</script>
|
|
|
|
<div class="w-full sm:px-6 px-3 py-4 max-w-xl mx-auto mb-12">
|
|
<form method="POST" action="?/update" use:enhance>
|
|
{@render children()}
|
|
|
|
<div class="flex gap-2 justify-between sm:text-base text-sm">
|
|
<div class="flex gap-2">
|
|
<Button.Root
|
|
type="submit"
|
|
class="flex items-center gap-2 text-black cursor-pointer
|
|
bg-neutral-100 hover:bg-neutral-400 hover:scale-95 transition-all duration-300 ease-in-out
|
|
rounded-full py-2 px-4 border border-neutral-100"
|
|
>
|
|
<IconDeviceFloppy />
|
|
<p>Save</p>
|
|
</Button.Root>
|
|
|
|
<Button.Root
|
|
type="button"
|
|
onclick={() => history.back()}
|
|
class="flex items-center gap-2 text-white cursor-pointer
|
|
bg-neutral-800 hover:bg-neutral-700 hover:scale-95 transition-all duration-300 ease-in-out
|
|
rounded-full py-2 px-4 border border-neutral-600"
|
|
>
|
|
<IconX />
|
|
<p>Cancel</p>
|
|
</Button.Root>
|
|
</div>
|
|
|
|
{#if !createOnly}
|
|
<Button.Root
|
|
formaction="?/delete"
|
|
class="flex items-center gap-2 text-white cursor-pointer
|
|
bg-red-700 hover:bg-red-500 hover:scale-95 transition-all duration-300 ease-in-out
|
|
rounded-full py-2 px-4 border border-red-500"
|
|
>
|
|
<IconTrash />
|
|
<p>Delete</p>
|
|
</Button.Root>
|
|
{/if}
|
|
</div>
|
|
</form>
|
|
</div>
|