text: import Link from '@/components/Link'
  import SectionContainer from '@/components/SectionContainer'
  import Tag from '@/components/Tag'
  import siteMetadata from '@/data/siteMetadata'
  
  const postDateTemplate = { year: 'numeric', month: 'long', day: 'numeric' }
  
  export default function ListLayout({ posts, title }) {
    
  
    return (
      <SectionContainer>
        <div className="divide-y ">
          <div className="pt-6 pb-6 space-y-2 md:space-y-5">
            <h1 className="leading-9 tracking-tight sm:leading-10 md:leading-14">
              {title}
            </h1>
          </div>
          <ul>
            {posts.map((frontMatter) => {
              const { slug, date, title, summary, tags } = frontMatter
              return (
                <li key={slug} className="py-4">
                  <article className="space-y-2 xl:grid xl:grid-cols-4 xl:space-y-0 xl:items-baseline">
                    <dl>
                      <dt className="sr-only">发表于</dt>
                      <dd className="text-base font-medium leading-6 ">
                        <time dateTime={date}>
                          {new Date(date).toLocaleDateString(siteMetadata.locale, postDateTemplate)}
                        </time>
                      </dd>
                    </dl>
                    <div className="space-y-3 xl:col-span-3">
                      <div>
                        <strong className="text-lg leading-8 tracking-tight">
                          <Link href={`/blog/${slug}`} className="">
                            {title}
                          </Link>
                        </strong>
                       <div className="flex flex-wrap">
                          {tags.map((tag) => (
                            <Tag key={tag} text={tag} />
                          ))}
                          </div>
                      </div>
                      <div className="prose max-w-none">
                        {summary}
                      </div>
                    </div>
                  </article>
                </li>
              )
            })}
          </ul>
        </div>
  </SectionContainer>
    )
  }
  