From c4eb96709c79cd3a99e8468a0aff216faf80b15c Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Fri, 2 Jun 2023 17:20:56 +0900
Subject: [PATCH] add scrollToBottom button

---
 .../Button/ScrollToBottom/ScrollToBottom.tsx  | 33 +++++++++++++++++++
 .../components/Button/ScrollToBottom/index.ts |  1 +
 .../Button/ScrollToBottom/styles.module.scss  |  7 ++++
 .../components/mdx/HeroInfo/HeroInfo.tsx      | 24 ++++++++------
 4 files changed, 55 insertions(+), 10 deletions(-)
 create mode 100644 packages/logos-docusaurus-theme/src/client/components/Button/ScrollToBottom/ScrollToBottom.tsx
 create mode 100644 packages/logos-docusaurus-theme/src/client/components/Button/ScrollToBottom/index.ts
 create mode 100644 packages/logos-docusaurus-theme/src/client/components/Button/ScrollToBottom/styles.module.scss

diff --git a/packages/logos-docusaurus-theme/src/client/components/Button/ScrollToBottom/ScrollToBottom.tsx b/packages/logos-docusaurus-theme/src/client/components/Button/ScrollToBottom/ScrollToBottom.tsx
new file mode 100644
index 0000000..e40a855
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/packages/logos-docusaurus-theme/src/client/components/Button/ScrollToBottom/index.ts b/packages/logos-docusaurus-theme/src/client/components/Button/ScrollToBottom/index.ts
new file mode 100644
index 0000000..d50c418
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/components/Button/ScrollToBottom/index.ts
@@ -0,0 +1 @@
+export * from './ScrollToBottom'
diff --git a/packages/logos-docusaurus-theme/src/client/components/Button/ScrollToBottom/styles.module.scss b/packages/logos-docusaurus-theme/src/client/components/Button/ScrollToBottom/styles.module.scss
new file mode 100644
index 0000000..69731c1
--- /dev/null
+++ b/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;
+}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroInfo/HeroInfo.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroInfo/HeroInfo.tsx
index ad77f2d..07ac44a 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroInfo/HeroInfo.tsx
+++ b/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()} />
+    </>
   )
 }