All files / src/components/pages/group/group-pending-members/pending-member-card index.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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client';

import Link from 'next/link';

import { Button, ImageWithFallback } from '@/components/ui';
import { GetPendingMembersResponse } from '@/types/service/group';

type PendingMember = GetPendingMembersResponse['pendingMembers'][number];

interface Props {
  member: PendingMember;
  onReject: () => void;
  onApprove: () => void;
}

export const PendingMemberCard = ({ member, onReject, onApprove }: Props) => {
  const profileUrl = `/profile/${member.userId}`;

  return (
    <div className='bg-mono-white rounded-3xl px-5 py-[26px] shadow-sm'>
      <Link href={profileUrl} className='flex gap-3'>
        <ImageWithFallback
          width={40}
          className='object-fit h-10 w-10 shrink-0 rounded-full'
          alt={`${member.nickName} 프로필`}
          draggable={false}
          height={40}
          src={member.profileImage ?? ''}
        />

        <div className='min-w-0 flex-1'>
          <h4 className='text-text-md-semibold h-6 text-gray-800'>{member.nickName}</h4>
          {member.profileMessage && (
            <p className='text-text-xs-regular h-[18px] text-gray-600'>{member.profileMessage}</p>
          )}
        </div>
      </Link>

      {member.requestMessage && (
        <p className='text-text-md-medium mt-4 line-clamp-2 max-h-12 min-h-6 text-gray-600'>
          {member.requestMessage}
        </p>
      )}

      <div className='mt-4 flex gap-2'>
        <Button className='flex-1' size='sm' variant='tertiary' onClick={onReject}>
          거절하기
        </Button>
        <Button
          className='bg-mint-500 text-text-sm-bold text-mono-white hover:bg-mint-600 active:bg-mint-700 flex-1'
          size='sm'
          variant='primary'
          onClick={onApprove}
        >
          수락하기
        </Button>
      </div>
    </div>
  );
};