Overlapping Avatars

'use client';

import './AvatarGroupStack.css';

/** AvatarGroupStack — ported from astro-component-kit. */
export interface AvatarGroupStackProps {
}

export function AvatarGroupStack({}: AvatarGroupStackProps) {
  return (
    <>
      <div className="av-group" data-rk-99496b="">
        <div className="av" style={{ background: "#6366f1" }} data-rk-99496b="">AJ</div>
        <div className="av" style={{ background: "#8b5cf6" }} data-rk-99496b="">MK</div>
        <div className="av" style={{ background: "#ec4899" }} data-rk-99496b="">SL</div>
        <div className="av more" data-rk-99496b="">+4</div>
      </div>
    </>
  );
}

export default AvatarGroupStack;

/* AvatarGroupStack — ported from astro-component-kit (data/AvatarGroupStack.astro) */

.av-group:where([data-rk-99496b]) { display: flex; align-items: center; }
.av:where([data-rk-99496b]) { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #080b14; margin-left: -10px; display: grid; place-items: center; font-size: 0.65rem; font-weight: 800; color: #fff; position: relative; transition: 0.2s; cursor: pointer; }
.av:first-child:where([data-rk-99496b]) { margin-left: 0; }
.av:hover:where([data-rk-99496b]) { transform: translateY(-4px); z-index: 10; }
.more:where([data-rk-99496b]) { background: #1e293b; color: #94a3b8; border-style: dashed; }