38 lines
1.3 KiB
Svelte
38 lines
1.3 KiB
Svelte
<script>
|
|
import { t } from '../i18n'
|
|
|
|
export let error = ''
|
|
export let onDismiss = () => {}
|
|
|
|
function translateError(msg) {
|
|
const map = {
|
|
'vault not open': t('error.vaultNotOpen'),
|
|
}
|
|
return map[msg] || msg
|
|
}
|
|
|
|
function handleKeydown(e) {
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
e.preventDefault()
|
|
onDismiss()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
{#if error}
|
|
<div class="error-banner" role="button" tabindex="0" on:click={onDismiss} on:keydown={handleKeydown}>
|
|
{translateError(error)}
|
|
<button class="dismiss-btn" on:click|stopPropagation={onDismiss} aria-label="Dismiss">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
.error-banner { background: #3a2222; color: #ff8888; padding: 8px 24px; font-size: 12px; border-bottom: 1px solid #4a2222; flex-shrink: 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
|
|
.dismiss-btn { background: none; border: none; color: #ff6666; cursor: pointer; padding: 2px; display: flex; align-items: center; border-radius: 2px; }
|
|
.dismiss-btn:hover { color: #ff4444; }
|
|
</style>
|