53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import { Box, Typography } from '@mui/material';
|
|
import { Icon } from '@rkheftan/harmony-ui';
|
|
import { Mobile } from 'iconsax-react';
|
|
import { type PhoneDisplayProps } from '@/features/profile/types/settingsType';
|
|
|
|
export default function PhoneDisplay({ phones }: PhoneDisplayProps) {
|
|
return (
|
|
<>
|
|
{phones.map((item, index) => (
|
|
<Box
|
|
key={index}
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
py: 6,
|
|
mx: 2,
|
|
gap: 1,
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
width: 40,
|
|
height: 40,
|
|
backgroundColor: 'primary.light',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
display: 'flex',
|
|
borderRadius: 0.5,
|
|
}}
|
|
>
|
|
<Icon
|
|
Component={Mobile}
|
|
size="medium"
|
|
variant="Bold"
|
|
color="primary.main"
|
|
/>
|
|
</Box>
|
|
|
|
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
|
<Typography variant="h6" color="text.primary">
|
|
{item.phone}
|
|
</Typography>
|
|
<Typography variant="caption" color="text.secondary">
|
|
{item.time}
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
))}
|
|
</>
|
|
);
|
|
}
|