[Smart Accounts Kit] Add announcement bar

docusaurus.config.js

@@ -483,6 +483,13 @@ const config = {
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
+      announcementBar: {
+        id: 'delegation-toolkit-rename-announcement-bar',
+        content: 'Delegation Toolkit is now renamed to Smart Accounts Kit.',
+        backgroundColor: '#eac2ff',
+        textColor: '#0a0a0a',
+        isCloseable: false,
+      },
       metadata: [
         {
           name: 'keywords',

src/scss/custom.scss

@@ -830,7 +830,7 @@ code:hover .code-unfocus {
 div[class^='theme-announcement-bar'] {
   font-family: var(--font-mm-euclid);
   font-size: 1.4rem;
-  padding: 1rem 2rem;
+  padding: 0.5rem 2rem;
   text-align: center;
   border-bottom: 1px solid var(--general-gray-light);
   background-color: var(--developer-purple-light);

src/theme/AnnouncementBar/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { useLocation } from '@docusaurus/router'
+
+export default function AnnouncementBar(): JSX.Element | null {
+  const location = useLocation()
+
+  // Show on smart-accounts-kit paths or main/homepage
+  const isSmartAccountsKitPath = location.pathname.includes('/smart-accounts-kit')
+  const isMainPath = location.pathname === '/'
+
+  const isValidPath = isSmartAccountsKitPath || isMainPath
+
+  if (!isValidPath) {
+    return null
+  }
+
+  return (
+    <div className="theme-announcement-bar" role="banner" data-announcement-bar="true">
+      <div style={{ textAlign: 'center' }}>
+        <strong>Delegation Toolkit is now renamed to <a href="/smart-accounts-kit">Smart Accounts Kit</a>.</strong>
+      </div>
+    </div>
+  )
+}