Bottom Sheet

'use client';

import './BottomSheetMobile.css';

/** BottomSheetMobile — ported from astro-component-kit. */
export interface BottomSheetMobileProps {
}

export function BottomSheetMobile({}: BottomSheetMobileProps) {
  return (
    <>
      <div className="sheet-overlay" data-rk-61863a="">
        <div className="sheet-content" data-rk-61863a="">
          <div className="drag-handle" data-rk-61863a=""></div>
          <h3 data-rk-61863a="">Select Option</h3>
          <div className="options" data-rk-61863a=""><div data-rk-61863a="">Archive</div><div data-rk-61863a="">Delete</div><div data-rk-61863a="">Share</div></div>
        </div>
      </div>
    </>
  );
}

export default BottomSheetMobile;

/* BottomSheetMobile — ported from astro-component-kit (overlays/BottomSheetMobile.astro) */

.sheet-overlay:where([data-rk-61863a]) { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: flex-end; z-index: 2000; }
.sheet-content:where([data-rk-61863a]) { width: 100%; background: #0f172a; border-radius: 20px 20px 0 0; padding: 1.5rem; transform: translateY(0); }
.drag-handle:where([data-rk-61863a]) { width: 40px; height: 4px; background: #334155; border-radius: 2px; margin: 0 auto 1.5rem; }
h3:where([data-rk-61863a]) { color: #fff; text-align: center; margin-bottom: 1.5rem; }
.options:where([data-rk-61863a]) div:where([data-rk-61863a]) { padding: 1rem; color: #e2e8f0; border-bottom: 1px solid #1e293b; text-align: center; cursor: pointer; }