75 lines
1.4 KiB
Vue
75 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { messages } from '../lib/messages'
|
|
import SuggestionChips from './SuggestionChips.vue'
|
|
|
|
defineProps<{ suggestions: readonly string[] }>()
|
|
defineEmits<{ pick: [suggestion: string] }>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="empty">
|
|
<h1>
|
|
{{ messages.emptyStateHeading
|
|
}}<span class="accent">{{ messages.emptyStateHeadingAccent }}</span>
|
|
</h1>
|
|
<p class="lede">
|
|
{{ messages.emptyStateDescription }}
|
|
</p>
|
|
<template v-if="suggestions.length">
|
|
<div class="label">{{ messages.emptyStateSuggestionLabel }}</div>
|
|
<SuggestionChips :suggestions="suggestions" @pick="$emit('pick', $event)" />
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.empty {
|
|
padding: var(--s-5) 0 var(--s-3);
|
|
}
|
|
|
|
h1 {
|
|
max-width: 16ch;
|
|
margin: 0 0 var(--s-5);
|
|
font-family: var(--f-display);
|
|
font-size: var(--t-hero);
|
|
font-weight: 600;
|
|
line-height: var(--lh-hero);
|
|
letter-spacing: var(--ls-hero);
|
|
}
|
|
|
|
.accent {
|
|
color: var(--c-accent);
|
|
}
|
|
|
|
.lede {
|
|
max-width: 52ch;
|
|
margin: 0 0 var(--s-9);
|
|
color: var(--c-text-muted);
|
|
text-wrap: pretty;
|
|
}
|
|
|
|
.label {
|
|
margin-bottom: var(--s-5);
|
|
color: var(--c-text-faint);
|
|
font-family: var(--f-mono);
|
|
font-size: var(--t-caps);
|
|
letter-spacing: var(--ls-caps);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
h1 {
|
|
font-size: 38px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 560px) {
|
|
.empty {
|
|
padding-top: var(--s-1);
|
|
}
|
|
|
|
h1 {
|
|
font-size: 32px;
|
|
}
|
|
}
|
|
</style>
|