show error message when demo is missing
This commit is contained in:
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user