<template lang="pug">
div(class="rounded-t-2xl bg-white py-3 px-2 pb-16 mt-6")
  div.flex.mb-2
    div.flex-1
      //span(class="text-gray-400 font-bold") File download
    div.flex
      div(class="rounded-md flex p-1 px-4")
        i.pi.pi-list
  ul(class="flex flex-col gap-3")
    li(v-for="(item, index) in data" :key="index" class="bg-white rounded-md flex shadow-lg py-2 px-4 shadow-gray-100")
      div(class="flex gap-2 w-12 items-center")
        div(class="w-8 h-8 bg-blue-500 rounded-xl text-white flex items-center justify-center")
          i.pi.pi-file
      div(class="flex gap-2 flex-1 flex-col")
        div.flex.gap-2.items-center.text-gray-500.text-md
          span.flex-1 {{ item.name }}
          span.font-sans.text-gray-400.text-sm 1.25MB
        span(class="font-sans text-gray-300 text-xs") 2024-12-02
  div(class="font-sans text-xs text-gray-300 flex items-center justify-center py-6")
    span 没有更多了..
</template>

<script setup>
const data = [
  { name: '1.file_name.zip', size: 12 },
  { name: '2.file_name.zip', size: 12 },
  { name: '3.file_name.zip', size: 12 },
  { name: '4.file_name.zip', size: 12 },
  { name: '5.file_name.zip', size: 12 },
  { name: '6.file_name.zip', size: 12 },
]
</script>
