35 lines
1.2 KiB
JavaScript
35 lines
1.2 KiB
JavaScript
// components/partials/avatar/Avatar04.tsx
|
|
import React from 'react';
|
|
import Image from 'next/image';
|
|
|
|
const Avatar04 = () => {
|
|
const sizes = [
|
|
{ container: 'h-6 w-6', indicator: 'h-1.5 w-1.5' },
|
|
{ container: 'h-8 w-8', indicator: 'h-2 w-2' },
|
|
{ container: 'h-10 w-10', indicator: 'h-2.5 w-2.5' },
|
|
{ container: 'h-12 w-12', indicator: 'h-3 w-3' },
|
|
{ container: 'h-14 w-14', indicator: 'h-3.5 w-3.5' },
|
|
{ container: 'h-16 w-16', indicator: 'h-4 w-4' },
|
|
];
|
|
|
|
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} rounded-full`}>
|
|
<Image
|
|
src="/images/user/user-01.jpg"
|
|
alt="user"
|
|
width={parseInt(size.container.split('-')[1]) * 4}
|
|
height={parseInt(size.container.split('-')[1]) * 4}
|
|
className="overflow-hidden rounded-full"
|
|
/>
|
|
<span
|
|
className={`absolute bottom-0 right-0 ${size.indicator} rounded-full border-[1.5px] border-white bg-[#f79009] dark:border-gray-900`}
|
|
></span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Avatar04; |