32 lines
1.0 KiB
JavaScript
32 lines
1.0 KiB
JavaScript
// components/partials/avatar/Avatar01.tsx
|
|
import React from 'react';
|
|
import Image from 'next/image';
|
|
|
|
const Avatar01 = () => {
|
|
const sizes = [
|
|
{ container: 'h-6 w-6', max: 'max-w-6' },
|
|
{ container: 'h-8 w-8', max: 'max-w-8' },
|
|
{ container: 'h-10 w-10', max: 'max-w-10' },
|
|
{ container: 'h-12 w-12', max: 'max-w-12' },
|
|
{ container: 'h-14 w-14', max: 'max-w-14' },
|
|
{ container: 'h-16 w-16', max: 'max-w-16' },
|
|
];
|
|
|
|
return (
|
|
<div className="flex flex-col items-center justify-center gap-5 sm:flex-row">
|
|
{sizes.map((size, index) => (
|
|
<div key={index} className={`relative ${size.container} ${size.max} rounded-full`}>
|
|
<Image
|
|
src="/images/user/user-01.jpg"
|
|
alt="user"
|
|
width={parseInt(size.container.split('-')[1]) * 4} // Convert to pixels
|
|
height={parseInt(size.container.split('-')[1]) * 4}
|
|
className="overflow-hidden rounded-full"
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Avatar01; |