koel/resources/assets/js/components/ui/ScreenEmptyState.vue
2024-07-06 17:44:57 +02:00

31 lines
716 B
Vue
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<article
class="relative flex place-content-center place-items-center flex-1 text-white/50"
data-testid="screen-empty-state"
>
<div class="md:max-w-3/4 px-6 pt-0 mx-auto flex flex-col items-center pb-k-header-height">
<span class="jumbo-icon block text-[6rem] mb-4 opacity-70">
<slot name="icon"></slot>
</span>
<div class="text text-center text-3xl font-light flex flex-col gap-2">
<slot>Placeholder text goes here.</slot>
</div>
</div>
</article>
</template>
<style lang="postcss">
.text {
a {
@apply text-white/80;
&:hover {
@apply text-white;
}
}
.secondary {
@apply text-2xl font-thin;
}
}
</style>