<script setup lang="ts">
import SlideItem from '@/components/slide/SlideItem.vue'
import { communityPosts, formatCount } from '@/mock/homeData'

defineProps({ active: { type: Boolean, default: false } })
</script>

<template>
  <SlideItem>
    <div class="community">
      <div v-for="item in communityPosts" :key="item.id" class="post">
        <img :src="item.cover" class="cover" alt="" />
        <div class="text">
          <p class="title">{{ item.title }}</p>
          <p class="meta">@{{ item.author }} · {{ formatCount(item.digg_count) }}赞</p>
        </div>
      </div>
    </div>
  </SlideItem>
</template>

<style scoped lang="less">
.community {
  height: 100%;
  overflow-y: auto;
  background: #111;
  padding: 10rem;

  .post {
    display: flex;
    gap: 12rem;
    margin-bottom: 12rem;
    background: rgb(29, 29, 29);
    border-radius: 8rem;
    padding: 10rem;
    color: white;

    .cover {
      width: 72rem;
      height: 72rem;
      border-radius: 6rem;
      object-fit: cover;
    }

    .title {
      font-size: 14rem;
      margin: 0 0 8rem;
    }

    .meta {
      font-size: 12rem;
      opacity: 0.6;
      margin: 0;
    }
  }
}
</style>
