Skip to content

Instantly share code, notes, and snippets.

@roelvan
Created March 28, 2022 13:09
Show Gist options
  • Save roelvan/8c6b793f55834241d3095871f8f956af to your computer and use it in GitHub Desktop.
Save roelvan/8c6b793f55834241d3095871f8f956af to your computer and use it in GitHub Desktop.
Panic nova syntax
import Image from '@components/Image';
const Avatars = ({ users = [] }) => (
<div className="flex -space-x-2 overflow-hidden">
{users.map((user) => (
<div className="flex flex-col items-center" key={user.name}>
<div className="relative inline-block h-20 w-20 rounded-full ring-4 ring-white overflow-hidden bg-gray-100">
<Image
width={160}
height={160}
imageId={user.imageId}
alt={`Profielfoto van ${user.name}`}
/>
</div>
<div className="text-xs text-gray-500 mt-0.5">{user.name}</div>
</div>
))}
</div>
);
export default Avatars;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment