show error message when demo is missing

This commit is contained in:
Hans Pagel
2020-08-20 17:38:47 +02:00
parent 4e2cfd1f49
commit 16da584ebd
2 changed files with 31 additions and 20 deletions

View File

@@ -1,6 +1,7 @@
<template> <template>
<div class="demo"> <div class="demo">
<div class="demo__preview" v-if="mainFile"> <template v-if="mainFile">
<div class="demo__preview">
<component :is="mainFile" v-if="mode === 'vue'" /> <component :is="mainFile" v-if="mode === 'vue'" />
<react-renderer :component="mainFile" v-if="mode === 'react'" /> <react-renderer :component="mainFile" v-if="mode === 'react'" />
</div> </div>
@@ -23,6 +24,10 @@
<div class="demo__link"> <div class="demo__link">
<a :href="githubUrl" target="_blank">Edit on GitHub</a> <a :href="githubUrl" target="_blank">Edit on GitHub</a>
</div> </div>
</template>
<div v-else class="demo__error">
Could not find a demo called {{ this.name }}.
</div>
</div> </div>
</template> </template>

View File

@@ -52,4 +52,10 @@
&__link { &__link {
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
} }
&__error {
padding: 1rem 1.5rem;
color: $colorRed;
background-color: rgba($colorRed, 0.1);
}
} }