add scrollToBottom button

packages/logos-docusaurus-theme/src/client/components/Button/ScrollToBottom/ScrollToBottom.tsx

@@ -0,0 +1,33 @@
+import { ArrowDownIcon, IconButton } from '@acid-info/lsd-react'
+import clsx from 'clsx'
+import React, { HTMLProps } from 'react'
+import styles from './styles.module.scss'
+
+type TProps = {
+  bottom: number
+}
+
+export const ScrollToBottom = (
+  props: TProps & HTMLProps<HTMLButtonElement>,
+): JSX.Element => {
+  const { children, className, bottom, ...rest } = props
+
+  const handleScrollToBottom = () => {
+    window.scrollTo({
+      top: document.body.scrollHeight,
+      behavior: 'smooth',
+    })
+  }
+
+  return (
+    <IconButton
+      onClick={handleScrollToBottom}
+      size="small"
+      className={clsx(styles.scrollToBottom, className)}
+      style={{ bottom: -(bottom - 16) }}
+      {...(rest as any)}
+    >
+      <ArrowDownIcon color="primary" />
+    </IconButton>
+  )
+}

packages/logos-docusaurus-theme/src/client/components/Button/ScrollToBottom/index.ts

@@ -0,0 +1 @@
+export * from './ScrollToBottom'

packages/logos-docusaurus-theme/src/client/components/Button/ScrollToBottom/styles.module.scss

@@ -0,0 +1,7 @@
+@use '../../../css/utils';
+
+.scrollToBottom {
+  z-index: 100;
+  position: absolute;
+  background: rgb(var(--lsd-surface-primary)) !important;
+}

packages/logos-docusaurus-theme/src/client/components/mdx/HeroInfo/HeroInfo.tsx

@@ -4,6 +4,7 @@ import { useHero } from '../Hero/Hero.context'
 import './HeroInfo.scss'
 import { useScrollY } from '../../../lib/useScrollY'
 import { calcScrollThreshold, mapFloat } from '../../../lib/ui.utils'
+import { ScrollToBottom } from '@logos-theme/components/Button/ScrollToBottom'
 
 export type HeroInfoProps = PropsWithChildren<
   React.HTMLAttributes<HTMLDivElement>
@@ -47,15 +48,18 @@ export const HeroInfo: React.FC<HeroInfoProps> = ({
   }, [])
 
   return (
-    <div
-      className={clsx(className, 'mdx-hero-info', `mdx-hero-info--${size}`)}
-      style={{
-        ...(initialMarginBottom ? { marginBottom: getMarginBottom() } : {}),
-      }}
-      ref={ref}
-      {...(props as any)}
-    >
-      {children}
-    </div>
+    <>
+      <div
+        className={clsx(className, 'mdx-hero-info', `mdx-hero-info--${size}`)}
+        style={{
+          ...(initialMarginBottom ? { marginBottom: getMarginBottom() } : {}),
+        }}
+        ref={ref}
+        {...(props as any)}
+      >
+        {children}
+      </div>
+      <ScrollToBottom bottom={getMarginBottom()} />
+    </>
   )
 }