Profile List

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