From 6c600bda8d1e82e61b6d1fdcf2f1cc19d16fa2e2 Mon Sep 17 00:00:00 2001
From: Hanbyul Jo <hanbyul@nyu.edu>
Date: Tue, 2 Jul 2024 17:11:56 -0400
Subject: [PATCH] Use SiteAlert component from uswds

---
 .../components/common/announcement/index.scss   |  1 +
 .../components/common/announcement/index.tsx    | 17 +++++++++++++++++
 app/scripts/components/common/layout-root.tsx   |  3 ++-
 3 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 app/scripts/components/common/announcement/index.scss
 create mode 100644 app/scripts/components/common/announcement/index.tsx

diff --git a/app/scripts/components/common/announcement/index.scss b/app/scripts/components/common/announcement/index.scss
new file mode 100644
index 000000000..6e124c5cc
--- /dev/null
+++ b/app/scripts/components/common/announcement/index.scss
@@ -0,0 +1 @@
+@use "usa-alert";
\ No newline at end of file
diff --git a/app/scripts/components/common/announcement/index.tsx b/app/scripts/components/common/announcement/index.tsx
new file mode 100644
index 000000000..01b3ce07d
--- /dev/null
+++ b/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>);
\ No newline at end of file
diff --git a/app/scripts/components/common/layout-root.tsx b/app/scripts/components/common/layout-root.tsx
index efcb4593e..87237eaa4 100644
--- a/app/scripts/components/common/layout-root.tsx
+++ b/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 />