CocoClassHelpDocs/components/HomeSection/HomeSection.vue

<script setup lang="ts">
import { toRefs, computed, useSlots, h } from "vue";
import { useBreakpoints } from "@vueuse/core";

const props = defineProps<{
  title?: string;
}>();
const { title } = toRefs(props);

const breakpoints = useBreakpoints({
  tablet: 640,
  laptop: 1024,
  desktop: 1280,
})
const isMobile = computed(() => breakpoints.isSmaller('tablet'))

const slots = useSlots();
const titleNode = computed(() => {
  return slots.title ? slots.title()?.[0] : title.value ? h("h1", {}, title.value) : null;
});
</script>
<template>
  <div class="home-section">
    <component :is="titleNode" class="title" />
    <el-row class="content" justify="center" :gutter="isMobile ? 8 : 20" tag="section" v-bind="$attrs">
      <slot></slot>
    </el-row>
  </div>
</template>
<style lang="scss" scoped>
@use '@/.vitepress/theme/screen' as *;

.home-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 20px;
}

.title {
  text-wrap: nowrap;

  @include breakpoint(mobile) {
    width: 100%;
    padding-left: 10px;
    font-size: 16px;
    line-height: 16px;
  }
}

.content {
  width: 100%;
}

.el-row {
  row-gap: 20px;
  align-items: stretch;
}
</style>