From 9435addd4550ec0678ab911566ddcaf30a9afb50 Mon Sep 17 00:00:00 2001
From: Sol Irvine <sol@zenzen.io>
Date: Mon, 21 Aug 2023 08:38:34 +0900
Subject: [PATCH] Update stories.tsx

---
 components/layout/stories.tsx | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/components/layout/stories.tsx b/components/layout/stories.tsx
index 0b90cd73d..b88690c30 100644
--- a/components/layout/stories.tsx
+++ b/components/layout/stories.tsx
@@ -1,4 +1,5 @@
 import clsx from 'clsx';
+import { format } from 'date-fns';
 import { getBlog } from 'lib/shopify';
 import Image from 'next/image';
 import Link from 'next/link';
@@ -24,19 +25,14 @@ export default async function Stories({
   if (!blog) 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">
+    <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',
-            'grid grid-cols-1 gap-y-24 md:grid-cols-3 md:gap-x-4'
-          )}
-        >
+        <div className={clsx('font-multilingual font-extralight', 'flex flex-col space-y-px')}>
           {blog?.articles?.map((article) => (
             <Link href={`/stories/${article.handle}`}>
-              <div className="flex flex-col space-y-4 md:col-span-1">
-                <div className="relative aspect-square overflow-hidden md:max-w-sm">
+              <div className="flex flex-row space-x-2 bg-white text-black md:col-span-1">
+                <div className="relative aspect-[4/3] min-w-[480px] overflow-hidden">
                   {!!article?.image?.url && (
                     <Image
                       src={article?.image?.url}
@@ -50,8 +46,13 @@ export default async function Stories({
                     />
                   )}
                 </div>
-                <div className="max-w-sm text-lg">{article?.title}</div>
-                <div className="max-w-sm">{article?.excerpt}</div>
+                <div className="flex grow flex-col space-y-4 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>
           ))}