commerce/components/layout/stories-detail.tsx

import clsx from 'clsx';
import { format } from 'date-fns';
import { getBlog } from 'lib/shopify';
import Image from 'next/image';
import Link from 'next/link';
import { SupportedLocale } from './navbar/language-control';

export default async function StoriesDetail({
  locale,
  handle,
  articles,
  more = false
}: {
  locale?: SupportedLocale;
  handle: string;
  articles?: number;
  more?: boolean;
}) {
  const blog = await getBlog({
    handle: handle,
    articles: articles || 250,
    language: locale?.toUpperCase()
  });

  if (!blog) return null;

  return (
    <div className="px-6 py-24">
      <div className="mx-auto flex max-w-screen-lg flex-col space-y-6">
        <h3 className="font-serif text-5xl">stories</h3>
        <div
          className={clsx(
            'font-multilingual font-extralight',
            'flex flex-col space-y-6 md:space-y-px'
          )}
        >
          {blog?.articles?.map((article, index) => (
            <Link href={`/stories/${article.handle}`} key={`${article.handle}-${index}`}>
              <div className="flex flex-col space-y-2 bg-white text-black md:col-span-1 md:flex-row md:space-x-2 md:space-y-0">
                <div className="relative aspect-[4/3] min-w-full overflow-hidden md:min-w-[480px]">
                  {!!article?.image?.url && (
                    <Image
                      src={article?.image?.url}
                      width={article?.image?.width}
                      height={article?.image?.height}
                      alt={article?.image?.altText || `image-for-${article?.handle}`}
                      className={clsx(
                        'h-full w-full object-cover',
                        'transition duration-300 ease-in-out hover:scale-105'
                      )}
                    />
                  )}
                </div>
                <div className="flex grow flex-col space-y-4 p-6 md:p-12">
                  <div className="text-sm">
                    {format(new Date(article?.publishedAt), 'yyyy-MM-dd')}
                  </div>
                  <div className="text-3xl">{article?.title}</div>
                  <div className="text-lg">{article?.excerpt}</div>
                </div>
              </div>
            </Link>
          ))}
        </div>
        {more && (
          <div className="flex w-full flex-row justify-center pt-12">
            <Link
              href="/stories"
              className="mx-auto max-w-sm border border-dark px-24 py-3 text-center text-lg transition-colors duration-150 hover:border-dark/40"
            >
              more stories
            </Link>
          </div>
        )}
      </div>
    </div>
  );
}