feat(SW-650): added sitewide alert to use sticky position hook

components/SitewideAlert/Client.tsx

@@ -0,0 +1,41 @@
+"use client"
+
+import { useRef } from "react"
+
+import { StickyElementNameEnum } from "@/stores/sticky-position"
+
+import Alert from "@/components/TempDesignSystem/Alert"
+import useStickyPosition from "@/hooks/useStickyPosition"
+
+import { SitewideAlertProps } from "./sitewideAlert"
+
+import styles from "./sitewideAlert.module.css"
+
+import { AlertTypeEnum } from "@/types/enums/alert"
+
+export default function SiteWideAlertClient({ alert }: SitewideAlertProps) {
+  const alertRef = useRef(null)
+  useStickyPosition({
+    ref: alertRef,
+    name: StickyElementNameEnum.SITEWIDE_ALERT,
+  })
+  const isAlarm = alert.type === AlertTypeEnum.Alarm
+
+  return (
+    <div
+      ref={isAlarm ? alertRef : null}
+      className={`${styles.sitewideAlert} ${isAlarm ? styles.alarm : ""}`}
+    >
+      <Alert
+        variant="banner"
+        type={alert.type}
+        link={alert.link}
+        phoneContact={alert.phoneContact}
+        sidepeekCtaText={alert.sidepeekButton?.cta_text}
+        sidepeekContent={alert.sidepeekContent}
+        heading={alert.heading}
+        text={alert.text}
+      />
+    </div>
+  )
+}