Expandable Row

'use client';

import './TreeItemInteractive.css';

/** TreeItemInteractive — ported from astro-component-kit. */
export interface TreeItemInteractiveProps {
}

export function TreeItemInteractive({}: TreeItemInteractiveProps) {
  return (
    <>
      <div className="exp-row" data-rk-a57501="">
        <div className="main" data-rk-a57501=""><span data-rk-a57501="">▶</span> Users Database</div>
        <div className="child" data-rk-a57501="">
          <p data-rk-a57501="">Columns: id, name, email, avatar, status</p>
          <p data-rk-a57501="">Rows: 1,402 entries</p>
        </div>
      </div>
    </>
  );
}

export default TreeItemInteractive;

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

.exp-row:where([data-rk-a57501]) { border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding: 12px; }
.main:where([data-rk-a57501]) { color: #fff; font-size: 0.85rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: 0.2s; }
.main:where([data-rk-a57501]) span:where([data-rk-a57501]) { font-size: 0.6rem; color: #64748b; transition: 0.3s; }
.child:where([data-rk-a57501]) { margin-top: 12px; padding-left: 24px; color: #64748b; font-size: 0.8rem; display: none; line-height: 1.5; }
.exp-row:hover:where([data-rk-a57501]) .main:where([data-rk-a57501]) { color: #818cf8; }
.exp-row:hover:where([data-rk-a57501]) .main:where([data-rk-a57501]) span:where([data-rk-a57501]) { transform: rotate(90deg); color: #818cf8; }
.exp-row:hover:where([data-rk-a57501]) .child:where([data-rk-a57501]) { display: block; }