feat(SW-498): added sitewide alert

components/TempDesignSystem/Alert/Sidepeek/index.tsx

@@ -0,0 +1,49 @@
+"use client"
+
+import { useState } from "react"
+
+import { ChevronRightIcon } from "@/components/Icons"
+import JsonToHtml from "@/components/JsonToHtml"
+import Button from "@/components/TempDesignSystem/Button"
+
+import SidePeek from "../../SidePeek"
+
+import styles from "./sidepeek.module.css"
+
+import type { AlertSidepeekProps } from "./sidepeek"
+
+export default function AlertSidepeek({
+  ctaText,
+  sidePeekContent,
+}: AlertSidepeekProps) {
+  const [sidePeekIsOpen, setSidePeekIsOpen] = useState(false)
+  const { heading, content } = sidePeekContent
+
+  return (
+    <div className={styles.alertSidepeek}>
+      <Button
+        onPress={() => setSidePeekIsOpen(true)}
+        theme="base"
+        variant="icon"
+        intent="text"
+        size="small"
+        wrapping
+      >
+        {ctaText}
+        <ChevronRightIcon />
+      </Button>
+      {sidePeekIsOpen ? (
+        <SidePeek
+          title={heading}
+          isOpen={sidePeekIsOpen}
+          handleClose={() => setSidePeekIsOpen(false)}
+        >
+          <JsonToHtml
+            nodes={content.json.children}
+            embeds={content.embedded_itemsConnection.edges}
+          />
+        </SidePeek>
+      ) : null}
+    </div>
+  )
+}