Justin Edmund
c54c959522
- onCancel callback with fixed "Nevermind" label - optional primaryAction object (label, onclick, destructive, disabled) - optional left snippet for custom content
64 lines
1.2 KiB
Svelte
64 lines
1.2 KiB
Svelte
<svelte:options runes={true} />
|
|
|
|
<script lang="ts">
|
|
import type { Snippet } from 'svelte'
|
|
import Button from './Button.svelte'
|
|
|
|
interface PrimaryAction {
|
|
label: string
|
|
onclick: () => void
|
|
destructive?: boolean
|
|
disabled?: boolean
|
|
}
|
|
|
|
interface Props {
|
|
onCancel: () => void
|
|
cancelDisabled?: boolean
|
|
primaryAction?: PrimaryAction
|
|
left?: Snippet
|
|
}
|
|
|
|
let { onCancel, cancelDisabled = false, primaryAction, left }: Props = $props()
|
|
</script>
|
|
|
|
<div class="modal-footer">
|
|
{#if left}
|
|
<div class="left">
|
|
{@render left()}
|
|
</div>
|
|
{/if}
|
|
<div class="actions">
|
|
<Button variant="ghost" onclick={onCancel} disabled={cancelDisabled}>Nevermind</Button>
|
|
{#if primaryAction}
|
|
<Button
|
|
variant={primaryAction.destructive ? 'destructive' : 'primary'}
|
|
onclick={primaryAction.onclick}
|
|
disabled={primaryAction.disabled}
|
|
>
|
|
{primaryAction.label}
|
|
</Button>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
@use '$src/themes/spacing' as spacing;
|
|
|
|
.modal-footer {
|
|
padding: spacing.$unit-2x;
|
|
padding-top: 0;
|
|
display: flex;
|
|
gap: spacing.$unit-2x;
|
|
align-items: center;
|
|
}
|
|
|
|
.left {
|
|
flex: 1;
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
gap: spacing.$unit;
|
|
margin-left: auto;
|
|
}
|
|
</style>
|