feat: add element_access_denied.svelte; use in badge review page
- New reusable element_access_denied.svelte with title, message, action props - Badge review page: swap inline 'Access Denied' card with the component - Project doc: all 6 steps complete, status → Complete
This commit is contained in:
34
src/lib/elements/element_access_denied.svelte
Normal file
34
src/lib/elements/element_access_denied.svelte
Normal file
@@ -0,0 +1,34 @@
|
||||
<script lang="ts">
|
||||
import { ShieldX } from '@lucide/svelte';
|
||||
|
||||
interface Props {
|
||||
title?: string;
|
||||
message?: string;
|
||||
action_label?: string;
|
||||
on_action?: () => void;
|
||||
}
|
||||
|
||||
let {
|
||||
title = 'Access Denied',
|
||||
message = 'You do not have permission to view this content.',
|
||||
action_label = '',
|
||||
on_action = undefined
|
||||
}: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="card p-6 space-y-4 max-w-sm">
|
||||
<div class="flex items-center gap-2 text-error-500">
|
||||
<ShieldX size="1.2em" />
|
||||
<h3 class="text-lg font-semibold">{title}</h3>
|
||||
</div>
|
||||
<p class="text-sm text-gray-700">{message}</p>
|
||||
{#if action_label && on_action}
|
||||
<button
|
||||
type="button"
|
||||
class="btn preset-tonal-surface w-full"
|
||||
onclick={on_action}
|
||||
>
|
||||
{action_label}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
Reference in New Issue
Block a user