crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-19 16:07:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update stories.tsx

Browse Source
This commit is contained in:
Sol Irvine 2023-08-21 08:38:34 +09:00
parent 150146e6f5
commit 9435addd45
1 changed files with 13 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
components/layout/stories.tsx
View File

@ -1,4 +1,5 @@
import clsx from 'clsx'; import clsx from 'clsx';
import { format } from 'date-fns';
import { getBlog } from 'lib/shopify'; import { getBlog } from 'lib/shopify';
import Image from 'next/image'; import Image from 'next/image';
import Link from 'next/link'; import Link from 'next/link';
@ -24,19 +25,14 @@ export default async function Stories({
if (!blog) return null; if (!blog) return null;
return ( return (
<div className="bg-white px-6 py-24 text-black"> <div className="px-6 py-24">
<div className="mx-auto flex max-w-screen-xl flex-col space-y-6"> <div className="mx-auto flex max-w-screen-lg flex-col space-y-6">
<h3 className="font-serif text-5xl">stories</h3> <h3 className="font-serif text-5xl">stories</h3>
<div <div className={clsx('font-multilingual font-extralight', 'flex flex-col space-y-px')}>
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) => ( {blog?.articles?.map((article) => (
<Link href={`/stories/${article.handle}`}> <Link href={`/stories/${article.handle}`}>
<div className="flex flex-col space-y-4 md:col-span-1"> <div className="flex flex-row space-x-2 bg-white text-black md:col-span-1">
<div className="relative aspect-square overflow-hidden md:max-w-sm"> <div className="relative aspect-[4/3] min-w-[480px] overflow-hidden">
{!!article?.image?.url && ( {!!article?.image?.url && (
<Image <Image
src={article?.image?.url} src={article?.image?.url}
@ -50,8 +46,13 @@ export default async function Stories({
/> />
)} )}
</div> </div>
<div className="max-w-sm text-lg">{article?.title}</div> <div className="flex grow flex-col space-y-4 p-12">
<div className="max-w-sm">{article?.excerpt}</div> <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> </div>
</Link> </Link>
))} ))}