@docusaurus/theme-classic 2.0.0-beta.20 → 2.0.0-beta.21

package/lib/theme/DocSidebar/Desktop/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import type { Props } from '@theme/DocSidebar/Desktop';
+declare function DocSidebarDesktop({ path, sidebar, onCollapse, isHidden }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof DocSidebarDesktop>;
+export default _default;

package/{lib-next → lib}/theme/DocSidebar/Desktop/index.js

@@ -11,7 +11,6 @@ import Logo from '@theme/Logo';
 import CollapseButton from '@theme/DocSidebar/Desktop/CollapseButton';
 import Content from '@theme/DocSidebar/Desktop/Content';
 import styles from './styles.module.css';
-
 function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
   const {
     navbar: {hideOnScroll},
@@ -32,5 +31,4 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
     </div>
   );
 }
-
 export default React.memo(DocSidebarDesktop);

package/lib/theme/DocSidebar/Mobile/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import type { Props } from '@theme/DocSidebar/Mobile';
+declare function DocSidebarMobile(props: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof DocSidebarMobile>;
+export default _default;

package/{lib-next → lib}/theme/DocSidebar/Mobile/index.js

@@ -12,7 +12,6 @@ import {
   useNavbarMobileSidebar,
 } from '@docusaurus/theme-common';
 import DocSidebarItems from '@theme/DocSidebarItems';
-
 // eslint-disable-next-line react/function-component-definition
 const DocSidebarMobileSecondaryMenu = ({sidebar, path}) => {
   const mobileSidebar = useNavbarMobileSidebar();
@@ -26,7 +25,6 @@ const DocSidebarMobileSecondaryMenu = ({sidebar, path}) => {
           if (item.type === 'category' && item.href) {
             mobileSidebar.toggle();
           }
-
           if (item.type === 'link') {
             mobileSidebar.toggle();
           }
@@ -36,7 +34,6 @@ const DocSidebarMobileSecondaryMenu = ({sidebar, path}) => {
     </ul>
   );
 };
-
 function DocSidebarMobile(props) {
   return (
     <NavbarSecondaryMenuFiller
@@ -45,5 +42,4 @@ function DocSidebarMobile(props) {
     />
   );
 }
-
 export default React.memo(DocSidebarMobile);

package/lib/theme/DocSidebar/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/DocSidebar';
+export default function DocSidebar(props: Props): JSX.Element;

package/{lib-next → lib}/theme/DocSidebar/index.js

@@ -9,11 +9,11 @@ import {useWindowSize} from '@docusaurus/theme-common';
 import DocSidebarDesktop from '@theme/DocSidebar/Desktop';
 import DocSidebarMobile from '@theme/DocSidebar/Mobile';
 export default function DocSidebar(props) {
-  const windowSize = useWindowSize(); // Desktop sidebar visible on hydration: need SSR rendering
-
+  const windowSize = useWindowSize();
+  // Desktop sidebar visible on hydration: need SSR rendering
   const shouldRenderSidebarDesktop =
-    windowSize === 'desktop' || windowSize === 'ssr'; // Mobile sidebar not visible on hydration: can avoid SSR rendering
-
+    windowSize === 'desktop' || windowSize === 'ssr';
+  // Mobile sidebar not visible on hydration: can avoid SSR rendering
   const shouldRenderSidebarMobile = windowSize === 'mobile';
   return (
     <>

package/lib/theme/DocSidebarItem/Category/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/DocSidebarItem/Category';
+export default function DocSidebarItemCategory({ item, onItemClick, activePath, level, index, ...props }: Props): JSX.Element;

package/{lib-next/theme/DocSidebarItem/Category.js → lib/theme/DocSidebarItem/Category/index.js}

@@ -19,19 +19,18 @@ import {
 } from '@docusaurus/theme-common';
 import Link from '@docusaurus/Link';
 import {translate} from '@docusaurus/Translate';
+import useIsBrowser from '@docusaurus/useIsBrowser';
 import DocSidebarItems from '@theme/DocSidebarItems';
-import useIsBrowser from '@docusaurus/useIsBrowser'; // If we navigate to a category and it becomes active, it should automatically
+// If we navigate to a category and it becomes active, it should automatically
 // expand itself
-
-function useAutoExpandActiveCategory({isActive, collapsed, setCollapsed}) {
+function useAutoExpandActiveCategory({isActive, collapsed, updateCollapsed}) {
   const wasActive = usePrevious(isActive);
   useEffect(() => {
     const justBecameActive = isActive && !wasActive;
-
     if (justBecameActive && collapsed) {
-      setCollapsed(false);
+      updateCollapsed(false);
     }
-  }, [isActive, wasActive, collapsed, setCollapsed]);
+  }, [isActive, wasActive, collapsed, updateCollapsed]);
 }
 /**
  * When a collapsible category has no link, we still link it to its first child
@@ -41,23 +40,20 @@ function useAutoExpandActiveCategory({isActive, collapsed, setCollapsed}) {
  * see https://github.com/facebookincubator/infima/issues/36#issuecomment-772543188
  * see https://github.com/facebook/docusaurus/issues/3030
  */
-
 function useCategoryHrefWithSSRFallback(item) {
   const isBrowser = useIsBrowser();
   return useMemo(() => {
     if (item.href) {
       return item.href;
-    } // In these cases, it's not necessary to render a fallback
+    }
+    // In these cases, it's not necessary to render a fallback
     // We skip the "findFirstCategoryLink" computation
-
     if (isBrowser || !item.collapsible) {
       return undefined;
     }
-
     return findFirstCategoryLink(item);
   }, [item, isBrowser]);
 }
-
 function CollapseButton({categoryLabel, onClick}) {
   return (
     <button
@@ -68,9 +64,7 @@ function CollapseButton({categoryLabel, onClick}) {
           description:
             'The ARIA label to toggle the collapsible sidebar category',
         },
-        {
-          label: categoryLabel,
-        },
+        {label: categoryLabel},
       )}
       type="button"
       className="clean-btn menu__caret"
@@ -78,7 +72,6 @@ function CollapseButton({categoryLabel, onClick}) {
     />
   );
 }
-
 export default function DocSidebarItemCategory({
   item,
   onItemClick,
@@ -88,6 +81,11 @@ export default function DocSidebarItemCategory({
   ...props
 }) {
   const {items, label, collapsible, className, href} = item;
+  const {
+    docs: {
+      sidebar: {autoCollapseCategories},
+    },
+  } = useThemeConfig();
   const hrefWithSSRFallback = useCategoryHrefWithSSRFallback(item);
   const isActive = isActiveSidebarItem(item, activePath);
   const isCurrentPage = isSamePath(href, activePath);
@@ -98,27 +96,16 @@ export default function DocSidebarItemCategory({
       if (!collapsible) {
         return false;
       }
-
       return isActive ? false : item.collapsed;
     },
   });
-  useAutoExpandActiveCategory({
-    isActive,
-    collapsed,
-    setCollapsed,
-  });
   const {expandedItem, setExpandedItem} = useDocSidebarItemsExpandedState();
-
-  function updateCollapsed(toCollapsed = !collapsed) {
+  // Use this instead of `setCollapsed`, because it is also reactive
+  const updateCollapsed = (toCollapsed = !collapsed) => {
     setExpandedItem(toCollapsed ? null : index);
     setCollapsed(toCollapsed);
-  }
-
-  const {
-    docs: {
-      sidebar: {autoCollapseCategories},
-    },
-  } = useThemeConfig();
+  };
+  useAutoExpandActiveCategory({isActive, collapsed, updateCollapsed});
   useEffect(() => {
     if (
       collapsible &&
@@ -154,7 +141,6 @@ export default function DocSidebarItemCategory({
             collapsible
               ? (e) => {
                   onItemClick?.(item);
-
                   if (href) {
                     updateCollapsed(false);
                   } else {

package/lib/theme/DocSidebarItem/Html/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/DocSidebarItem/Html';
+export default function DocSidebarItemHtml({ item, level, index, }: Props): JSX.Element;

package/{lib-next/theme/DocSidebarItem/Html.js → lib/theme/DocSidebarItem/Html/index.js}

@@ -7,7 +7,7 @@
 import React from 'react';
 import clsx from 'clsx';
 import {ThemeClassNames} from '@docusaurus/theme-common';
-import styles from './Html.module.css';
+import styles from './styles.module.css';
 export default function DocSidebarItemHtml({item, level, index}) {
   const {value, defaultStyle, className} = item;
   return (
@@ -15,13 +15,12 @@ export default function DocSidebarItemHtml({item, level, index}) {
       className={clsx(
         ThemeClassNames.docs.docSidebarItemLink,
         ThemeClassNames.docs.docSidebarItemLinkLevel(level),
-        defaultStyle && `${styles.menuHtmlItem} menu__list-item`,
+        defaultStyle && [styles.menuHtmlItem, 'menu__list-item'],
         className,
       )}
-      key={index} // eslint-disable-next-line react/no-danger
-      dangerouslySetInnerHTML={{
-        __html: value,
-      }}
+      key={index}
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{__html: value}}
     />
   );
 }

package/lib/theme/DocSidebarItem/Link/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/DocSidebarItem/Link';
+export default function DocSidebarItemLink({ item, onItemClick, activePath, level, index, ...props }: Props): JSX.Element;

package/{lib-next/theme/DocSidebarItem/Link.js → lib/theme/DocSidebarItem/Link/index.js}

@@ -10,7 +10,7 @@ import {isActiveSidebarItem, ThemeClassNames} from '@docusaurus/theme-common';
 import Link from '@docusaurus/Link';
 import isInternalUrl from '@docusaurus/isInternalUrl';
 import IconExternalLink from '@theme/IconExternalLink';
-import styles from './Link.module.css';
+import styles from './styles.module.css';
 export default function DocSidebarItemLink({
   item,
   onItemClick,

package/lib/theme/DocSidebarItem/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/DocSidebarItem';
+export default function DocSidebarItem({ item, ...props }: Props): JSX.Element | null;

package/{lib-next → lib}/theme/DocSidebarItem/index.js

@@ -12,10 +12,8 @@ export default function DocSidebarItem({item, ...props}) {
   switch (item.type) {
     case 'category':
       return <DocSidebarItemCategory item={item} {...props} />;
-
     case 'html':
       return <DocSidebarItemHtml item={item} {...props} />;
-
     case 'link':
     default:
       return <DocSidebarItemLink item={item} {...props} />;

package/lib/theme/DocSidebarItems/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import type { Props } from '@theme/DocSidebarItems';
+declare function DocSidebarItems({ items, ...props }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof DocSidebarItems>;
+export default _default;

package/{lib-next → lib}/theme/DocSidebarItems/index.js

@@ -5,9 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, {memo} from 'react';
-import DocSidebarItem from '@theme/DocSidebarItem';
 import {DocSidebarItemsExpandedStateProvider} from '@docusaurus/theme-common';
-
+import DocSidebarItem from '@theme/DocSidebarItem';
 // TODO this item should probably not receive the "activePath" props
 // TODO this triggers whole sidebar re-renders on navigation
 function DocSidebarItems({items, ...props}) {
@@ -18,6 +17,6 @@ function DocSidebarItems({items, ...props}) {
       ))}
     </DocSidebarItemsExpandedStateProvider>
   );
-} // Optimize sidebar at each "level"
-
+}
+// Optimize sidebar at each "level"
 export default memo(DocSidebarItems);

package/lib/theme/DocTagDocListPage/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference types="@docusaurus/plugin-content-docs" />
+/// <reference types="react" />
+import type { Props } from '@theme/DocTagDocListPage';
+export default function DocTagDocListPage({ tag }: Props): JSX.Element;

package/{lib-next → lib}/theme/DocTagDocListPage/index.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import Layout from '@theme/Layout';
+import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import {
   PageMetadata,
@@ -14,9 +14,9 @@ import {
   usePluralForm,
 } from '@docusaurus/theme-common';
 import Translate, {translate} from '@docusaurus/Translate';
+import Layout from '@theme/Layout';
 import SearchMetadata from '@theme/SearchMetadata';
-import clsx from 'clsx'; // Very simple pluralization: probably good enough for now
-
+// Very simple pluralization: probably good enough for now
 function useNDocsTaggedPlural() {
   const {selectMessage} = usePluralForm();
   return (count) =>
@@ -29,13 +29,10 @@ function useNDocsTaggedPlural() {
             'Pluralized label for "{count} docs tagged". Use as much plural forms (separated by "|") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)',
           message: 'One doc tagged|{count} docs tagged',
         },
-        {
-          count,
-        },
+        {count},
       ),
     );
 }
-
 function DocItem({doc}) {
   return (
     <article className="margin-vert--lg">
@@ -46,7 +43,6 @@ function DocItem({doc}) {
     </article>
   );
 }
-
 export default function DocTagDocListPage({tag}) {
   const nDocsTaggedPlural = useNDocsTaggedPlural();
   const title = translate(
@@ -55,10 +51,7 @@ export default function DocTagDocListPage({tag}) {
       description: 'The title of the page for a docs tag',
       message: '{nDocsTagged} with "{tagName}"',
     },
-    {
-      nDocsTagged: nDocsTaggedPlural(tag.count),
-      tagName: tag.label,
-    },
+    {nDocsTagged: nDocsTaggedPlural(tag.count), tagName: tag.label},
   );
   return (
     <HtmlClassNameProvider

package/lib/theme/DocTagsListPage/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference types="@docusaurus/plugin-content-docs" />
+/// <reference types="react" />
+import type { Props } from '@theme/DocTagsListPage';
+export default function DocTagsListPage({ tags }: Props): JSX.Element;

package/{lib-next → lib}/theme/DocTagsListPage/index.js

@@ -5,16 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import Layout from '@theme/Layout';
+import clsx from 'clsx';
 import {
   PageMetadata,
   HtmlClassNameProvider,
   ThemeClassNames,
   translateTagsPageTitle,
 } from '@docusaurus/theme-common';
+import Layout from '@theme/Layout';
 import TagsListByLetter from '@theme/TagsListByLetter';
 import SearchMetadata from '@theme/SearchMetadata';
-import clsx from 'clsx';
 export default function DocTagsListPage({tags}) {
   const title = translateTagsPageTitle();
   return (

package/lib/theme/DocVersionBadge/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/DocVersionBadge';
+export default function DocVersionBadge({ className, }: Props): JSX.Element | null;

package/{lib-next → lib}/theme/DocVersionBadge/index.js

@@ -5,12 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
+import clsx from 'clsx';
 import Translate from '@docusaurus/Translate';
 import {ThemeClassNames, useDocsVersion} from '@docusaurus/theme-common';
-import clsx from 'clsx';
 export default function DocVersionBadge({className}) {
   const versionMetadata = useDocsVersion();
-
   if (versionMetadata.badge) {
     return (
       <span
@@ -21,14 +20,11 @@ export default function DocVersionBadge({className}) {
         )}>
         <Translate
           id="theme.docs.versionBadge.label"
-          values={{
-            versionLabel: versionMetadata.label,
-          }}>
+          values={{versionLabel: versionMetadata.label}}>
           {'Version: {versionLabel}'}
         </Translate>
       </span>
     );
   }
-
   return null;
 }

package/lib/theme/DocVersionBanner/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/DocVersionBanner';
+export default function DocVersionBanner({ className, }: Props): JSX.Element | null;

package/{lib-next → lib}/theme/DocVersionBanner/index.js

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
+import clsx from 'clsx';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Link from '@docusaurus/Link';
 import Translate from '@docusaurus/Translate';
@@ -17,8 +18,6 @@ import {
   useDocsPreferredVersion,
   useDocsVersion,
 } from '@docusaurus/theme-common';
-import clsx from 'clsx';
-
 function UnreleasedVersionLabel({siteTitle, versionMetadata}) {
   return (
     <Translate
@@ -34,7 +33,6 @@ function UnreleasedVersionLabel({siteTitle, versionMetadata}) {
     </Translate>
   );
 }
-
 function UnmaintainedVersionLabel({siteTitle, versionMetadata}) {
   return (
     <Translate
@@ -50,18 +48,15 @@ function UnmaintainedVersionLabel({siteTitle, versionMetadata}) {
     </Translate>
   );
 }
-
 const BannerLabelComponents = {
   unreleased: UnreleasedVersionLabel,
   unmaintained: UnmaintainedVersionLabel,
 };
-
 function BannerLabel(props) {
   const BannerLabelComponent =
     BannerLabelComponents[props.versionMetadata.banner];
   return <BannerLabelComponent {...props} />;
 }
-
 function LatestVersionSuggestionLabel({versionLabel, to, onClick}) {
   return (
     <Translate
@@ -87,23 +82,18 @@ function LatestVersionSuggestionLabel({versionLabel, to, onClick}) {
     </Translate>
   );
 }
-
 function DocVersionBannerEnabled({className, versionMetadata}) {
   const {
     siteConfig: {title: siteTitle},
   } = useDocusaurusContext();
-  const {pluginId} = useActivePlugin({
-    failfast: true,
-  });
-
+  const {pluginId} = useActivePlugin({failfast: true});
   const getVersionMainDoc = (version) =>
     version.docs.find((doc) => doc.id === version.mainDocId);
-
   const {savePreferredVersionName} = useDocsPreferredVersion(pluginId);
   const {latestDocSuggestion, latestVersionSuggestion} =
-    useDocVersionSuggestions(pluginId); // Try to link to same doc in latest version (not always possible), falling
+    useDocVersionSuggestions(pluginId);
+  // Try to link to same doc in latest version (not always possible), falling
   // back to main doc of latest version
-
   const latestVersionSuggestedDoc =
     latestDocSuggestion ?? getVersionMainDoc(latestVersionSuggestion);
   return (
@@ -127,10 +117,8 @@ function DocVersionBannerEnabled({className, versionMetadata}) {
     </div>
   );
 }
-
 export default function DocVersionBanner({className}) {
   const versionMetadata = useDocsVersion();
-
   if (versionMetadata.banner) {
     return (
       <DocVersionBannerEnabled
@@ -139,6 +127,5 @@ export default function DocVersionBanner({className}) {
       />
     );
   }
-
   return null;
 }

package/lib/theme/EditThisPage/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/EditThisPage';
+export default function EditThisPage({ editUrl }: Props): JSX.Element;

package/{lib-next → lib}/theme/EditThisPage/index.js

@@ -6,8 +6,8 @@
  */
 import React from 'react';
 import Translate from '@docusaurus/Translate';
-import IconEdit from '@theme/IconEdit';
 import {ThemeClassNames} from '@docusaurus/theme-common';
+import IconEdit from '@theme/IconEdit';
 export default function EditThisPage({editUrl}) {
   return (
     <a

package/lib/theme/ErrorPageContent.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference types="@docusaurus/module-type-aliases" />
+/// <reference types="react" />
+import type { Props } from '@theme/Error';
+export default function ErrorPageContent({ error, tryAgain, }: Props): JSX.Element;

package/lib/theme/Footer/Copyright/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/Footer/Copyright';
+export default function FooterCopyright({ copyright }: Props): JSX.Element;

package/{lib-next → lib}/theme/Footer/Copyright/index.js

@@ -8,11 +8,10 @@ import React from 'react';
 export default function FooterCopyright({copyright}) {
   return (
     <div
-      className="footer__copyright" // Developer provided the HTML, so assume it's safe.
+      className="footer__copyright"
+      // Developer provided the HTML, so assume it's safe.
       // eslint-disable-next-line react/no-danger
-      dangerouslySetInnerHTML={{
-        __html: copyright,
-      }}
+      dangerouslySetInnerHTML={{__html: copyright}}
     />
   );
 }