86 lines
2.0 KiB
Svelte
86 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
import { fade } from "svelte/transition";
|
|
import type { CardConfig } from "./Card.types";
|
|
import { IconHelpCircle, IconRefresh } from "@tabler/icons-svelte";
|
|
import Tooltip from "$lib/Tooltip.svelte";
|
|
|
|
export let config: CardConfig;
|
|
</script>
|
|
|
|
<div class="card" in:fade={{ duration: 250 }}>
|
|
<div class="header">
|
|
<h2 class="title">{config.title}</h2>
|
|
<div class="actions">
|
|
{#if config.showHelp}
|
|
<Tooltip text={config.helpText}>
|
|
<button aria-label="Help">
|
|
<IconHelpCircle />
|
|
</button>
|
|
</Tooltip>
|
|
{/if}
|
|
{#if config.showRefresh}
|
|
<button on:click={config.onRefresh} aria-label="Refresh">
|
|
<IconRefresh />
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.card {
|
|
width: 85%;
|
|
max-width: 400px;
|
|
margin: auto;
|
|
margin-top: 25px;
|
|
padding: 10px;
|
|
background-color: var(--island-bg-color);
|
|
border-radius: 10px;
|
|
box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.29);
|
|
}
|
|
|
|
.header {
|
|
color: var(--island-header-color);
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
text-shadow: 2px 1px 10px rgba(0, 0, 0, 0.29);
|
|
}
|
|
|
|
.title {
|
|
flex-grow: 1;
|
|
text-align: center;
|
|
margin: 0;
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 0;
|
|
display: flex;
|
|
gap: 0px
|
|
}
|
|
|
|
.content {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
color: white;
|
|
background: none;
|
|
border: none;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
button:hover {
|
|
color: var(--island-header-color);
|
|
}
|
|
</style>
|