<script>
import Page from './utils/Page.vue';

export default {
  props: [
    'icon',
  ],
  components: {
    Page,
  },
};
</script>

<template>
  <page mini>
    <div class="layout">
      <mcw-material-icon class="main-icon" :icon="icon" />
      <span class="label"><slot></slot></span>
    </div>
  </page>
</template>

<style lang="scss" scoped>
@use "@material/theme/color-palette" as palette;

.layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 16px 0;
}

.main-icon {
  font-size: 75px;
  color: palette.$grey-800;
}

.label {
  margin-top: 14px;
  text-align: center;
}
</style>