Data Key-Value List

'use client';

import './DescriptionListHoriz.css';

/** DescriptionListHoriz — ported from astro-component-kit. */
export interface DescriptionListHorizProps {
}

export function DescriptionListHoriz({}: DescriptionListHorizProps) {
  return (
    <>
      <dl className="desc-list" data-rk-9f0e85="">
        <div className="row" data-rk-9f0e85=""><dt data-rk-9f0e85="">Module Name</dt><dd data-rk-9f0e85="">AuthEngine</dd></div>
        <div className="row" data-rk-9f0e85=""><dt data-rk-9f0e85="">Version</dt><dd data-rk-9f0e85="">1.4.2</dd></div>
        <div className="row" data-rk-9f0e85=""><dt data-rk-9f0e85="">Status</dt><dd data-rk-9f0e85="">Deployment Ready</dd></div>
      </dl>
    </>
  );
}

export default DescriptionListHoriz;

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

.desc-list:where([data-rk-9f0e85]) { display: flex; flex-direction: column; width: 100%; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; overflow: hidden; background: rgba(0,0,0,0.1); }
.row:where([data-rk-9f0e85]) { display: grid; grid-template-columns: 140px 1fr; padding: 0.75rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.85rem; }
.row:last-child:where([data-rk-9f0e85]) { border-bottom: none; }
dt:where([data-rk-9f0e85]) { color: #64748b; font-weight: 600; }
dd:where([data-rk-9f0e85]) { color: #fff; margin: 0; }