Use SiteAlert component from uswds

app/scripts/components/common/announcement/index.scss

@@ -0,0 +1 @@
+@use "usa-alert";

app/scripts/components/common/announcement/index.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { SiteAlert } from "@trussworks/react-uswds";
+import './index.scss';
+
+export default function Announcement() {
+  return <SiteAlert slim variant='emergency'>Alert</SiteAlert>;
+}
+
+// return (<div className='usa-alert usa-alert--info usa-alert--no-icon'>
+//   <div className='usa-alert__body'>
+//     <p className='usa-alert__text'>
+//       Lorem ipsum dolor sit amet,
+//       <a className='usa-link' >consectetur adipiscing</a>
+//       elit, sed do eiusmod.
+//     </p>
+//   </div>
+//         </div>);

app/scripts/components/common/layout-root.tsx

@@ -10,8 +10,8 @@ import React, {
 import { useDeepCompareEffect } from 'use-deep-compare';
 import styled from 'styled-components';
 import { Outlet } from 'react-router';
-
 import { reveal } from '@devseed-ui/animation';
+import Announcement from './announcement';
 
 import MetaTags from './meta-tags';
 import PageFooter from './page-footer';
@@ -57,6 +57,7 @@ function LayoutRoot(props: { children?: ReactNode }) {
         description={description || appDescription}
         thumbnail={thumbnail}
       />
+      <Announcement />
       <NavWrapper />
       <PageBody id={PAGE_BODY_ID} tabIndex={-1}>
         <Outlet />