83 lines
1.5 KiB
Vue
83 lines
1.5 KiB
Vue
<template>
|
|
<div :class="{ error: !loading && !data.length }" class="grid">
|
|
<!-- Loading placeholder -->
|
|
<GridItemSkeleton v-if="loading" />
|
|
<GridItemSkeleton v-if="loading" />
|
|
|
|
<!-- Items -->
|
|
<GridItem v-else :key="item.id" v-for="item in data" :item="item" />
|
|
|
|
<!-- Error messages -->
|
|
<p v-if="!loading && !data.length" class="alert"><b>💡 Restart API</b>: 0 fruits !</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from "vuex";
|
|
import GridItemSkeleton from "./GridItemSkeleton";
|
|
|
|
export default {
|
|
name: "Grid",
|
|
components: {
|
|
GridItemSkeleton,
|
|
GridItem: () => import("./GridItem")
|
|
},
|
|
props: {
|
|
data: Array
|
|
},
|
|
computed: {
|
|
...mapState(["loading"])
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
column-gap: 1rem;
|
|
row-gap: 1.5rem;
|
|
|
|
&.error {
|
|
display: block;
|
|
}
|
|
|
|
@media screen and (min-width: @md) {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
@media screen and (min-width: @lg) {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
|
|
@media screen and (min-width: @xl) {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
|
|
.alert {
|
|
box-sizing: border-box;
|
|
margin: 0 auto;
|
|
width: 80%;
|
|
background-color: @color-3;
|
|
color: @color-2;
|
|
padding: 1rem 1.5rem;
|
|
border-radius: 4px;
|
|
|
|
@media screen and (min-width: @sm) {
|
|
width: 50%;
|
|
max-width: 535px;
|
|
}
|
|
|
|
pre {
|
|
padding: 1rem;
|
|
border-radius: 4px;
|
|
background-color: rgb(45, 48, 55);
|
|
|
|
span {
|
|
color: @color-3;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|