Comparison Table

'use client';

import './PriceCompareTable.css';

/** PriceCompareTable — ported from astro-component-kit. */
export interface PriceCompareTableProps {
}

export function PriceCompareTable({}: PriceCompareTableProps) {
  return (
    <>
      <div className="c-wrap" data-rk-7759ac="">
        <table data-rk-7759ac="">
          <thead data-rk-7759ac="">
            <tr data-rk-7759ac=""><th data-rk-7759ac="">Features</th><th data-rk-7759ac="">Free</th><th data-rk-7759ac="">Pro</th></tr>
          </thead>
          <tbody data-rk-7759ac="">
            <tr data-rk-7759ac=""><td data-rk-7759ac="">Feature A</td><td data-rk-7759ac="">✅</td><td data-rk-7759ac="">✅</td></tr>
            <tr data-rk-7759ac=""><td data-rk-7759ac="">Feature B</td><td data-rk-7759ac="">❌</td><td data-rk-7759ac="">✅</td></tr>
            <tr data-rk-7759ac=""><td data-rk-7759ac="">Storage</td><td data-rk-7759ac="">10GB</td><td data-rk-7759ac="">100GB</td></tr>
          </tbody>
        </table>
      </div>
    </>
  );
}

export default PriceCompareTable;

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

.c-wrap:where([data-rk-7759ac]) { background: #0f172a; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); overflow: hidden; }
table:where([data-rk-7759ac]) { width: 100%; font-size: 0.85rem; color: #e2e8f0; border-collapse: collapse; }
th:where([data-rk-7759ac]) { padding: 1rem; background: rgba(255, 255, 255, 0.05); color: #fff; text-align: center; font-weight: 800; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
th:first-child:where([data-rk-7759ac]) { text-align: left; }
td:where([data-rk-7759ac]) { padding: 1rem; border: 1px solid rgba(255, 255, 255, 0.05); text-align: center; }
td:first-child:where([data-rk-7759ac]) { text-align: left; background: rgba(255,255,255,0.02); width: 40%; font-weight: 600; }