import { div, span, main, section, aside, h3, p, ul, li } from '@laniakeasupercluster/widgets'

const blogData = [
    { id: '1', title: 'Blog 1', content: 'Content 1', date: new Date() },
    { id: '2', title: 'Blog 2', content: 'Content 2', date: new Date() },
    { id: '3', title: 'Blog 3', content: 'Content 3', date: new Date() },
]
const tagData = ['JavaScript', 'CSS', 'HTML', 'Web', 'JavaScript', 'CSS', 'HTML', 'Web', 'JavaScript', 'CSS', 'HTML', 'Web', 'JavaScript', 'CSS', 'HTML', 'Web']
const articleData = ['Article 1', 'Article 2', 'Article 3']

document.body.appendChild(div.grid({ gridTemplateColumns: '3fr 1fr', gap: '1rem' }).w('1280px').mx('auto').p('1rem').childs([
    main.grid({ gap: '1rem' }).childs(blogData.map(blog => section.childs([
        h3.text(blog.title),
        p.text(blog.content),
        p.text(blog.date),
    ]))),
    aside.grid({ gridColumn: '2', flexDirection: 'column', gap: '1rem' }).childs([
        div.childs([
            h3.font('bold').text('# TAG'),
            div.flex({ gap: '.5rem', flexWrap: 'wrap' }).childs([
                // cursor-pointer overflow-clip hover:text-pink-500
                ...tagData.map(tag => span.bg('rgba(200,200,200,.2)').radius('.25rem').px('8px').text(tag))
            ]),
        ]),
        div.childs([
            h3.font('bold 8px').text('# 归档'),
            ul.childs(articleData.map(article => li.text(article))),
        ]),
    ]),
]))