Feed List

1import React from 'react';
2import { PostCard, PostCardProps } from './post-card';
3import { cn } from '@/lib/utils/deso';
4 
5export interface FeedListProps {
6  posts: PostCardProps[];
7  variant?: 'cards' | 'seamless';
8  className?: string;
9  gap?: number;
10}
11 
12export const FeedList: React.FC<FeedListProps> = ({
13  posts,
14  variant = 'cards',
15  className,
16  gap = 16,
17}) => {
18  if (variant === 'seamless') {
19    return (
20      <div
21        className={cn(
22          'w-full mx-auto border border-border',
23          className
24        )}
25      >
26        {posts.map((post, index) => (
27          <PostCard
28            key={`${post.publicKey}-${post.timestamp?.toString()}-${index}`}
29            {...post}
30            className={cn(
31              'border-x-0 border-t-0 shadow-none rounded-none',
32              index < posts.length - 1 ? 'border-b border-border' : 'border-b-0',
33            )}
34          />
35        ))}
36      </div>
37    );
38  }
39 
40  // Default to 'cards' variant
41  return (
42    <div className={cn('flex flex-col', className)} style={{ gap: `${gap}px` }}>
43      {posts.map((post, index) => (
44        <PostCard
45          key={`${post.publicKey}-${post.timestamp?.toString()}-${index}`}
46          {...post}
47        />
48      ))}
49    </div>
50  );
51};