63 lines
1.2 KiB
Svelte
63 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import { Trash2Icon, EditIcon } from "svelte-feather-icons";
|
|
import { getContext } from "svelte";
|
|
import type { Flashcards } from "../../background/database";
|
|
export let cardID: IDBValidKey;
|
|
|
|
const flashcardDB = getContext<Promise<Flashcards>>("flashcardDB");
|
|
$: cardPromise = flashcardDB.then((db) => db.getCard(cardID));
|
|
</script>
|
|
|
|
<div class="container">
|
|
{#await cardPromise then card}
|
|
{#if card}
|
|
<div class="translation">
|
|
<p>{card.src}</p>
|
|
<p>{card.result}</p>
|
|
</div>
|
|
<div class="buttons">
|
|
<button class="edit">
|
|
<EditIcon />
|
|
</button>
|
|
<button class="delete">
|
|
<Trash2Icon />
|
|
</button>
|
|
</div>
|
|
{/if}
|
|
{/await}
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
@use "../common";
|
|
.container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 1em;
|
|
margin: 0.1em;
|
|
height: 100%;
|
|
width: calc(100% - 1vw);
|
|
background-color: var(--background-color-3);
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
.buttons {
|
|
display: flex;
|
|
}
|
|
|
|
button {
|
|
@include common.button;
|
|
border: 0;
|
|
height: 3em;
|
|
width: 3em;
|
|
margin: 0.3em;
|
|
border-radius: 2px;
|
|
&.edit {
|
|
@include common.button_green;
|
|
}
|
|
&.delete {
|
|
@include common.button_red;
|
|
}
|
|
}
|
|
</style>
|