adds back to top button [Fixes #12194]

ethereum · May 6, 2024 · 5150a38 · 5150a38
1 parent 0606560
commit 5150a38
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 26 deletions.
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -19,6 +19,8 @@ import Translation from "@/components/Translation"
 
 import { getLocaleTimestamp } from "@/lib/utils/time"
 
+import { GoToTopButton } from "./GoToTopButton"
+
 const socialLinks = [
   {
     icon: FaGithub,
@@ -336,34 +338,56 @@ const Footer = ({ lastDeployDate }: FooterProps) => {
         alignItems="center"
         flexWrap="wrap"
       >
+        <GoToTopButton />
+
         {lastDeployDate && (
-          <Text>
-            <Translation id="website-last-updated" />:{" "}
-            {getLocaleTimestamp(locale as Lang, lastDeployDate)}
-          </Text>
-        )}
-        <Box my={4}>
-          {socialLinks.map(({ to, ariaLabel, icon }) => (
-            <BaseLink
-              key={to}
-              href={to}
-              hideArrow
-              color="body.base"
-              aria-label={ariaLabel}
-              ms="4"
-              _focus={{ color: "primary.base" }}
+          <>
+            <Text
+              fontSize="sm"
+              fontStyle="italic"
+              color="body.medium"
+              m="auto"
+              display={{ base: "none", md: "block" }}
             >
-              <Icon
-                as={icon}
-                _hover={{
-                  transition:
-                    "color 0.2s ease-in-out, transform 0.2s ease-in-out",
-                }}
-                fontSize="4xl"
-              />
-            </BaseLink>
-          ))}
-        </Box>
+              <Translation id="website-last-updated" />:{" "}
+              {getLocaleTimestamp(locale as Lang, lastDeployDate)}
+            </Text>
+
+            <Box my={4}>
+              {socialLinks.map(({ to, ariaLabel, icon }) => (
+                <BaseLink
+                  key={to}
+                  href={to}
+                  hideArrow
+                  color="body.base"
+                  aria-label={ariaLabel}
+                  ms="4"
+                  _focus={{ color: "primary.base" }}
+                >
+                  <Icon
+                    as={icon}
+                    _hover={{
+                      transition:
+                        "color 0.2s ease-in-out, transform 0.2s ease-in-out",
+                    }}
+                    fontSize="4xl"
+                  />
+                </BaseLink>
+              ))}
+            </Box>
+
+            <Text
+              fontSize="sm"
+              fontStyle="italic"
+              color="body.medium"
+              m="auto"
+              display={{ base: "block", md: "none" }}
+            >
+              <Translation id="website-last-updated" />:
+              {getLocaleTimestamp(locale as Lang, lastDeployDate)}
+            </Text>
+          </>
+        )}
       </Flex>
       <SimpleGrid
         gap={4}

diff --git a/src/components/GoToTopButton.tsx b/src/components/GoToTopButton.tsx
@@ -0,0 +1,23 @@
+import { memo } from "react"
+import { IoChevronUpSharp } from "react-icons/io5"
+
+import { Button } from "./Buttons"
+
+const scrollToTop = () => {
+  window.scrollTo({ top: 0, behavior: "smooth" })
+}
+
+export const GoToTopButton = memo(() => {
+  return (
+    <Button
+      leftIcon={<IoChevronUpSharp />}
+      variant="outline"
+      isSecondary
+      onClick={scrollToTop}
+    >
+      Go to top
+    </Button>
+  )
+})
+
+GoToTopButton.displayName = "GoToTopButton"