Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 20x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x | import { Fragment } from 'react/jsx-runtime';
import { User } from '@/types/service/user';
interface Props {
user: User;
}
export const ProfileFollowsBadge = ({ user }: Props) => {
const listMap = [
{
label: '팔로워',
value: user.followersCnt.toLocaleString(),
},
{
label: '팔로잉',
value: user.followeesCnt.toLocaleString(),
},
];
const listLength = listMap.length;
return (
<div className='flex-center bg-mono-white shadow-card mb-4 rounded-3xl py-4'>
{listMap.map((item, index) => (
<Fragment key={item.label}>
<div className='flex-col-center w-full gap-0.75 py-0.75'>
<span className='text-text-xl-bold text-gray-800'>{item.value}</span>
<span className='text-text-xs-medium text-gray-500'>{item.label}</span>
</div>
{index < listLength - 1 && <div className='h-10 w-1 border-r-1 border-gray-200' />}
</Fragment>
))}
</div>
);
};
|