50 lines
1.1 KiB
TypeScript
50 lines
1.1 KiB
TypeScript
|
|
|
|
import { Box } from './Box';
|
|
import { Image } from './Image';
|
|
import { Surface } from './Surface';
|
|
import { Text } from './Text';
|
|
|
|
interface FriendItemProps {
|
|
name: string;
|
|
avatarUrl: string;
|
|
country: string;
|
|
}
|
|
|
|
export function FriendItem({ name, avatarUrl, country }: FriendItemProps) {
|
|
return (
|
|
<Surface
|
|
variant="muted"
|
|
padding={2}
|
|
rounded="lg"
|
|
style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}
|
|
>
|
|
<Box
|
|
w="9"
|
|
h="9"
|
|
rounded="full"
|
|
overflow="hidden"
|
|
style={{
|
|
background: 'linear-gradient(to bottom right, #3b82f6, #9333ea)',
|
|
}}
|
|
>
|
|
<Image
|
|
src={avatarUrl}
|
|
alt={name}
|
|
width={36}
|
|
height={36}
|
|
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
|
/>
|
|
</Box>
|
|
<Box style={{ flex: 1, minWidth: 0 }}>
|
|
<Text size="sm" color="text-white" weight="medium" truncate block>
|
|
{name}
|
|
</Text>
|
|
<Text size="xs" color="text-gray-500" block>
|
|
{country}
|
|
</Text>
|
|
</Box>
|
|
</Surface>
|
|
);
|
|
}
|