{# @description An operating-system window frame, for showing an app or screenshot. #}
{# @prop class:text | description:"Extra classes added to the window frame." #}
{# @slot <div class="p-4 flex flex-col gap-2"><c-chat><c-slot name="image"><c-avatar src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" alt="" /></c-slot><c-slot name="header">Ada <time>12:45</time></c-slot>Hey, are we still on for lunch?</c-chat><c-chat placement="end" variant="primary"><c-slot name="image"><c-avatar src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a.webp" alt="" /></c-slot><c-slot name="header">You <time>12:46</time></c-slot><c-slot name="footer">Delivered</c-slot>Yes! See you at noon.</c-chat><c-chat><c-slot name="image"><c-avatar src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" alt="" /></c-slot><c-slot name="header">Ada <time>12:47</time></c-slot>Perfect, see you then!</c-chat><c-chat placement="end" variant="primary"><c-slot name="image"><c-avatar src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a.webp" alt="" /></c-slot><c-slot name="header">You <time>12:48</time></c-slot><c-slot name="footer">Seen</c-slot>🎉</c-chat></div> — A two-sided conversation: four chat bubbles on both placements, each with a c-avatar in image, a name and a time in header, and Delivered/Seen delivery statuses in footer. #}
<c-vars class />
<div class="mockup-window border border-base-300 bg-base-100 {{ class }}" {{ attrs }}>
  <div>{{ slot }}</div>
</div>