commerce/components/layout/stories-preview.tsx

import clsx from 'clsx';
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 StoriesPreview({
  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 || !!blog?.articles) return null;

  return (
    <div className="bg-white px-6 py-24 text-black">
      <div className="mx-auto flex max-w-screen-xl flex-col space-y-6">
        <h3 className="font-serif text-5xl">stories</h3>
        <div
          className={clsx(
            'font-multilingual font-extralight',
            'grid grid-cols-1 gap-y-24 md:grid-cols-3 md:gap-x-4'
          )}
        >
          {blog?.articles?.map((article, index) => (
            <Link href={`/stories/${article.handle}`} key={`${article.handle}-${index}`}>
              <div className="flex flex-col space-y-4 md:col-span-1">
                <div className="relative aspect-square overflow-hidden md:max-w-sm">
                  {!!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="max-w-sm text-lg">{article?.title}</div>
                <div className="max-w-sm">{article?.excerpt}</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-[15px] transition-colors duration-150 hover:border-dark/40"
            >
              more stories
            </Link>
          </div>
        )}
      </div>
    </div>
  );
}