src/app/(main)/(home)/_components/posts.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

import { Icons } from '@/components/icons/icons';
import { PostCard } from '@/components/posts/post-card';
import { Section } from '@/components/section';
import { buttonVariants } from '@/components/ui/button';
import type { BlogPost } from '@/lib/payload-posts';
import Link from 'next/link';

interface PostsProps {
  posts: BlogPost[];
}

export default function Posts({ posts }: PostsProps) {
  return (
    <Section>
      <div className='grid divide-y divide-dashed divide-border/70 text-left dark:divide-border'>
        {posts.map((post) => (
          <PostCard
            title={post.title}
            description={post.description}
            image={post.image}
            url={post.url}
            date={post.date.toDateString()}
            key={post.id}
            author={post.author}
            tags={post.tags}
          />
        ))}
        <Link
          href='/posts'
          className={buttonVariants({
            variant: 'default',
            className: 'group rounded-none py-4 sm:py-8',
          })}
        >
          View More
          <Icons.arrowUpRight className='group-hover:-rotate-12 ml-2 size-5 transition-transform' />
        </Link>
      </div>
    </Section>
  );
}