import { defineComponent } from 'vue'
import useGameNews from './useGameNews'

export default defineComponent(() => {
  const store = useGameNews()
  return () => (
    <div
      class="w-full h-full grid grid-cols-1 grid-rows-3 p-2 gap-y-1"
      style={{
        background: 'rgba(23,33,45,.6)'
      }}
    >
      {store.list
        .filter((_, index) => index < 3)
        .map((item) => (
          <div class={'w-full rounded-xl bg-[#17212d] flex gap-x-2 p-1'}>
            <img class={'h-full w-[45px]  rounded-lg object-cover'} src={item.cover}></img>
            <div class={'flex flex-col overflow-hidden justify-between py-[2px]'}>
              <span class={'text-white text-nowrap text-[14px] text-ellipsis overflow-hidden'}>
                {item.title}
              </span>
              <span class={'text-white text-nowrap text-[12px] opacity-60 text-ellipsis overflow-hidden'}>{item.content}</span>
            </div>
          </div>
        ))}
    </div>
  )
})