supabase/apps/studio/components/interfaces/App/AppBannerWrapper.tsx

import { PropsWithChildren } from 'react'

import { useIncidentStatusQuery } from '@/data/platform/incident-status-query'
import { useFlag } from 'common'
import { ClockSkewBanner } from 'components/layouts/AppLayout/ClockSkewBanner'
import { IncidentBanner } from 'components/layouts/AppLayout/IncidentBanner'
import { NoticeBanner } from 'components/layouts/AppLayout/NoticeBanner'
import { OrganizationResourceBanner } from '../Organization/HeaderBanner'

export const AppBannerWrapper = ({ children }: PropsWithChildren<{}>) => {
  const { data: incidents } = useIncidentStatusQuery()

  const ongoingIncident =
    useFlag('ongoingIncident') ||
    process.env.NEXT_PUBLIC_ONGOING_INCIDENT === 'true' ||
    (incidents?.length ?? 0) > 0
  const showNoticeBanner = useFlag('showNoticeBanner')
  const clockSkewBanner = useFlag('clockSkewBanner')

  return (
    <div className="flex flex-col">
      <div className="flex-shrink-0">
        {ongoingIncident && <IncidentBanner />}
        {showNoticeBanner && <NoticeBanner />}
        <OrganizationResourceBanner />
        {clockSkewBanner && <ClockSkewBanner />}
      </div>
      {children}
    </div>
  )
}