Directory Card

'use client';

import './UserDirectoryItem.css';

/** UserDirectoryItem — ported from astro-component-kit. */
export interface UserDirectoryItemProps {
}

export function UserDirectoryItem({}: UserDirectoryItemProps) {
  return (
    <>
      <div className="u-item" data-rk-2f9e54="">
        <div className="u-pic" data-rk-2f9e54="">JS</div>
        <div className="u-info" data-rk-2f9e54=""><h5 data-rk-2f9e54="">John Doe</h5><p data-rk-2f9e54="">Software Engineer</p></div>
        <div className="u-stat" data-rk-2f9e54="">Online</div>
      </div>
    </>
  );
}

export default UserDirectoryItem;

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

.u-item:where([data-rk-2f9e54]) { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(255, 255, 255, 0.03); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08); transition: 0.2s; }
.u-item:hover:where([data-rk-2f9e54]) { border-color: rgba(99, 102, 241, 0.4); background: rgba(99, 102, 241, 0.05); }
.u-pic:where([data-rk-2f9e54]) { width: 42px; height: 42px; background: linear-gradient(135deg, #6366f1, #c084fc); border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 0.8rem; }
.u-info:where([data-rk-2f9e54]) h5:where([data-rk-2f9e54]) { margin: 0; color: #fff; font-size: 1rem; }
.u-info:where([data-rk-2f9e54]) p:where([data-rk-2f9e54]) { margin: 2px 0 0; font-size: 0.75rem; color: #64748b; }
.u-stat:where([data-rk-2f9e54]) { margin-left: auto; font-size: 0.65rem; color: #34d399; font-weight: 800; text-transform: uppercase; background: rgba(52, 211, 153, 0.1); padding: 2px 8px; border-radius: 4px; }