Bento Grid (3 Column)

'use client';

import type { ReactNode } from 'react';
import './BentoGrid3.css';

/**
 * BentoGrid3 — Modern dashboard grid inspired by Bento-box layouts.
 */
export interface BentoGrid3Props {
  className?: string;
  slot1?: ReactNode;
  slot2?: ReactNode;
  slot3?: ReactNode;
  slot4?: ReactNode;
}

export function BentoGrid3({ className = '',
  slot1,
  slot2,
  slot3,
  slot4
}: BentoGrid3Props) {
  return (
    <>
      <div className="cq-bento-grid3-cq" data-rk-356029="">
      <div className={`bento ${className}`} data-rk-356029="">
        <div className="item wide" data-rk-356029="">
          {slot1 ?? (<>
            <h4 data-rk-356029="">Main Highlight</h4>
            <p data-rk-356029="">Wide key feature metric or banner</p>
          </>)}
        </div>
        <div className="item" data-rk-356029="">
          {slot2 ?? (<>
            <h4 data-rk-356029="">Stat Widget</h4>
            <p data-rk-356029="">Quick KPI</p>
          </>)}
        </div>
        <div className="item" data-rk-356029="">
          {slot3 ?? (<>
            <h4 data-rk-356029="">Live Feed</h4>
            <p data-rk-356029="">Real-time status</p>
          </>)}
        </div>
        <div className="item tall" data-rk-356029="">
          {slot4 ?? (<>
            <h4 data-rk-356029="">Analytics</h4>
            <p data-rk-356029="">Vertical trend tracker</p>
          </>)}
        </div>
      </div>
      </div>
    </>
  );
}

export default BentoGrid3;

/* BentoGrid3 — ported from astro-component-kit (layout/BentoGrid3.astro) */

.cq-bento-grid3-cq:where([data-rk-356029]) { container-type: inline-size; }
.bento:where([data-rk-356029]) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 150px;
  gap: 1rem;
  width: 100%;
}
.item:where([data-rk-356029]) {
  background: rgb(var(--ink-rgb, 255 255 255) / 0.03);
  border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
  border-radius: 16px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.item:where([data-rk-356029]) h4:where([data-rk-356029]) {
  color: #fff;
  font-size: 1.1rem;
  margin: 0 0 0.25rem 0;
}
.item:where([data-rk-356029]) p:where([data-rk-356029]) {
  color: #94a3b8;
  font-size: 0.85rem;
  margin: 0;
}
.wide:where([data-rk-356029]) {
  grid-column: span 2;
}
.tall:where([data-rk-356029]) {
  grid-row: span 2;
}
@container (max-width: 768px) {
  .bento:where([data-rk-356029]) {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .wide:where([data-rk-356029]) {
    grid-column: span 1;
  }
  .tall:where([data-rk-356029]) {
    grid-row: span 1;
  }
}