From 006bf87710e24e7386ebcb28e1cbd7f5c22ef4c9 Mon Sep 17 00:00:00 2001
From: Marten Mrfc <101009922+Marten-Mrfc@users.noreply.github.com>
Date: Sat, 10 Aug 2024 19:28:16 +0200
Subject: [PATCH] [Docs] Added 0.5.0 announcement bar

---
 documentation/docusaurus.config.js            |  6 ++++
 .../AnnouncementBar/CloseButton/index.tsx     | 24 ++++++++++++++
 .../CloseButton/styles.module.css             |  0
 .../theme/AnnouncementBar/Content/index.tsx   | 19 +++++++++++
 .../AnnouncementBar/Content/styles.module.css | 15 +++++++++
 .../src/theme/AnnouncementBar/index.tsx       | 33 +++++++++++++++++++
 6 files changed, 97 insertions(+)
 create mode 100644 documentation/src/theme/AnnouncementBar/CloseButton/index.tsx
 create mode 100644 documentation/src/theme/AnnouncementBar/CloseButton/styles.module.css
 create mode 100644 documentation/src/theme/AnnouncementBar/Content/index.tsx
 create mode 100644 documentation/src/theme/AnnouncementBar/Content/styles.module.css
 create mode 100644 documentation/src/theme/AnnouncementBar/index.tsx

diff --git a/documentation/docusaurus.config.js b/documentation/docusaurus.config.js
index 56ebc41232..2b2c5507d4 100644
--- a/documentation/docusaurus.config.js
+++ b/documentation/docusaurus.config.js
@@ -72,6 +72,12 @@ const config = {
     themeConfig:
         /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
         ({
+            announcementBar: {
+                id: 'support_us',
+                content:
+                  'TypeWriter 0.5.0 is out!',
+                isCloseable: true,
+              },
             mermaid: {
                 theme: { light: 'base', dark: 'base' },
                 options: {
diff --git a/documentation/src/theme/AnnouncementBar/CloseButton/index.tsx b/documentation/src/theme/AnnouncementBar/CloseButton/index.tsx
new file mode 100644
index 0000000000..9e54b54b13
--- /dev/null
+++ b/documentation/src/theme/AnnouncementBar/CloseButton/index.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import clsx from 'clsx';
+import {translate} from '@docusaurus/Translate';
+import IconClose from '@theme/Icon/Close';
+import type {Props} from '@theme/AnnouncementBar/CloseButton';
+import styles from './styles.module.css';
+
+export default function AnnouncementBarCloseButton(
+  props: Props,
+): JSX.Element | null {
+  return (
+    <button
+      type="button"
+      aria-label={translate({
+        id: 'theme.AnnouncementBar.closeButtonAriaLabel',
+        message: 'Close',
+        description: 'The ARIA label for close button of announcement bar',
+      })}
+      {...props}
+      className={clsx('clean-btn close text-white opacity-100 hover:scale-110 transition-transform duration-200 ease-in-out hover:opacity-90', props.className)}>
+      <IconClose width={14} height={14} strokeWidth={3.1} />
+    </button>
+  );
+}
diff --git a/documentation/src/theme/AnnouncementBar/CloseButton/styles.module.css b/documentation/src/theme/AnnouncementBar/CloseButton/styles.module.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/documentation/src/theme/AnnouncementBar/Content/index.tsx b/documentation/src/theme/AnnouncementBar/Content/index.tsx
new file mode 100644
index 0000000000..8020d4293d
--- /dev/null
+++ b/documentation/src/theme/AnnouncementBar/Content/index.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import clsx from 'clsx';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import type {Props} from '@theme/AnnouncementBar/Content';
+
+export default function AnnouncementBarContent(
+  props: Props,
+): JSX.Element | null {
+  const {announcementBar} = useThemeConfig();
+  const {content} = announcementBar!;
+
+  return (
+    <div
+      {...props}
+      className={clsx('flex items-center justify-center text-center text-xl font-bold', props.className)}
+      dangerouslySetInnerHTML={{__html: content}}
+    />
+  );
+}
diff --git a/documentation/src/theme/AnnouncementBar/Content/styles.module.css b/documentation/src/theme/AnnouncementBar/Content/styles.module.css
new file mode 100644
index 0000000000..adf869c9a5
--- /dev/null
+++ b/documentation/src/theme/AnnouncementBar/Content/styles.module.css
@@ -0,0 +1,15 @@
+.content {
+  font-size: 85%;
+  text-align: center;
+  padding: 5px 0;
+}
+
+.content a {
+  color: var(--ifm-color-primary);
+  text-decoration: underline;
+}
+
+.content a:hover {
+  color: var(--ifm-color-primary-dark);
+  text-decoration: none;
+}
diff --git a/documentation/src/theme/AnnouncementBar/index.tsx b/documentation/src/theme/AnnouncementBar/index.tsx
new file mode 100644
index 0000000000..353d434600
--- /dev/null
+++ b/documentation/src/theme/AnnouncementBar/index.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import {useAnnouncementBar} from '@docusaurus/theme-common/internal';
+import AnnouncementBarCloseButton from '@theme/AnnouncementBar/CloseButton';
+import AnnouncementBarContent from '@theme/AnnouncementBar/Content';
+
+export default function AnnouncementBar(): JSX.Element | null {
+  const {announcementBar} = useThemeConfig();
+  const {isActive, close} = useAnnouncementBar();
+
+  if (!isActive) {
+    return null;
+  }
+
+  const {isCloseable} = announcementBar!;
+
+  return (
+    <div
+      className={`flex items-center justify-between p-0 bg-[#227c9d] text-white shadow-lg transition-all duration-300 ease-in-out ${
+        isCloseable ? 'relative' : 'border-b'
+      }`}
+      role="banner">
+      {isCloseable && <div className="flex-none w-12" />}
+      <AnnouncementBarContent className="flex-1 text-center text-2xl" />
+      {isCloseable && (
+        <AnnouncementBarCloseButton
+          onClick={close}
+          className="flex-none mr-2 w-12 h-full cursor-pointer"
+        />
+      )}
+    </div>
+  );
+}