40 lines
1.1 KiB
Svelte
40 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import DiscordStatus from './Discord/Status.svelte';
|
|
import Panel from '../elements/Panel.svelte';
|
|
|
|
//@ts-ignore
|
|
export let data: WidgetDiscord;
|
|
export let handle: boolean = false;
|
|
export let isPreview: boolean = false;
|
|
</script>
|
|
|
|
<Panel preview={isPreview} {handle}>
|
|
<div class="flex flex-col gap-4">
|
|
<div class="flex justify-between items-center">
|
|
<div class="flex gap-4 items-center">
|
|
<div
|
|
class="avatar w-10 h-10 rounded-full bg-center bg-cover"
|
|
style={data.avatar ? `--avatar: url(${data.avatar})` : undefined} />
|
|
<p class="font-medium">@{data.username}</p>
|
|
</div>
|
|
<div>
|
|
<!-- TODO: Discord badges -->
|
|
</div>
|
|
</div>
|
|
{#if data.activity || data.status}
|
|
<p>
|
|
Currently <DiscordStatus status={data.status} activity={data.activity} />
|
|
{#if data.activity}
|
|
playing <span class="contents font-medium">{data.activity}</span>.
|
|
{/if}
|
|
</p>
|
|
{/if}
|
|
</div>
|
|
</Panel>
|
|
|
|
<style lang="postcss">
|
|
div.avatar {
|
|
@apply bg-accent;
|
|
background-image: var(--avatar);
|
|
}
|
|
</style>
|