Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

adds back to top button [Fixes #12194] #12906

Closed
wants to merge 1 commit into from
Closed

adds back to top button [Fixes #12194] #12906

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
76 changes: 50 additions & 26 deletions src/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ import Translation from "@/components/Translation"

import { getLocaleTimestamp } from "@/lib/utils/time"

import { GoToTopButton } from "./GoToTopButton"

const socialLinks = [
{
icon: FaGithub,
Expand Down Expand Up @@ -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}
Expand Down
23 changes: 23 additions & 0 deletions src/components/GoToTopButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { memo } from "react"
import { IoChevronUpSharp } from "react-icons/io5"

import { Button } from "./Buttons"

const scrollToTop = () => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@alex1092 Note that we have a scrollIntoView.ts inside src/lib/utls which we can use here instead of making a new "scrollToTop" component. Just pass __next as the toId... that will target the root Next.js div and scroll the user to the top.

ie:

import { scrollIntoView } from "@/lib/utils/scrollIntoView"

// ...

scrollIntoView("__next")

window.scrollTo({ top: 0, behavior: "smooth" })
}

export const GoToTopButton = memo(() => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@alex1092 memo is not needed for this component

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep no worries, there had been design changes so I need to refactor this again

return (
<Button
leftIcon={<IoChevronUpSharp />}
variant="outline"
isSecondary
onClick={scrollToTop}
>
Go to top
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'll want to set this up for translation as well. I'm happy to do this before this gets merged when ready.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh brilliant

</Button>
)
})

GoToTopButton.displayName = "GoToTopButton"
Copy link
Member

@nhsz nhsz May 7, 2024 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

displayName is not required as its set automatically in this case