BrowserMockup(
  style: [BorderUtil.border, BorderUtil.base300, Size.wFull],
  addressBar: text('https://deepyr.dev'),
  content: Container(
    [text('Hello!')],
    style: [Layout.grid, Alignment.placeContentCenter, Size.h80, BgUtil.base200],
  ),
)

BrowserMockup(
  style: [BgUtil.base100, BorderUtil.border, BorderUtil.base300, Size.wFull],
  addressBar: text('https://deepyr.dev'),
  content: Container(
    [text('Hello!')],
    style: [Layout.grid, Alignment.placeContentCenter, Size.h80, BgUtil.base200],
  ),
)

BrowserMockup(
  // The address bar can contain standard layout components
  addressBar: div(classes: 'flex items-center gap-2 opacity-60 w-full', [
    Icon('lock', style: [Size.w4, Size.h4]),
    text('https://deepyr.dev'),
    const Spacer(width: Unit.percent(100)),
    Icon('star', style: [Size.w4, Size.h4]),
  ]),
  content: /* ... */,
  style: [BgUtil.base100, Effects.shadowXl, Size.wFull],
)