Athou_commafeed/commafeed-client/src/pages/WelcomePage.tsx

import { Trans } from "@lingui/macro"
import { Anchor, Box, Center, Container, Divider, Group, Image, Space, Title, useMantineColorScheme } from "@mantine/core"
import { client } from "app/client"
import { redirectToApiDocumentation, redirectToLogin, redirectToRegistration, redirectToRootCategory } from "app/redirect/thunks"
import { useAppDispatch, useAppSelector } from "app/store"
import welcomePageDark from "assets/welcome_page_dark.png"
import welcomePageLight from "assets/welcome_page_light.png"
import { ActionButton } from "components/ActionButton"
import { useBrowserExtension } from "hooks/useBrowserExtension"
import { useMobile } from "hooks/useMobile"
import { useAsyncCallback } from "react-async-hook"
import { SiGithub, SiTwitter } from "react-icons/si"
import { TbClock, TbKey, TbMoon, TbSettings, TbSun, TbUserPlus } from "react-icons/tb"
import { PageTitle } from "./PageTitle"

const iconSize = 18

export function WelcomePage() {
    const serverInfos = useAppSelector(state => state.server.serverInfos)
    const { colorScheme } = useMantineColorScheme()
    const dispatch = useAppDispatch()
    const image = colorScheme === "light" ? welcomePageLight : welcomePageDark

    const login = useAsyncCallback(client.user.login, {
        onSuccess: () => {
            dispatch(redirectToRootCategory())
        },
    })

    return (
        <Container>
            <Header />

            <Center my="lg">
                <Title order={3}>Bloat-free feed reader</Title>
            </Center>

            {serverInfos?.demoAccountEnabled && (
                <Center>
                    <ActionButton
                        label={<Trans>Try the demo!</Trans>}
                        icon={<TbClock size={iconSize} />}
                        variant="outline"
                        onClick={async () => await login.execute({ name: "demo", password: "demo" })}
                        showLabelOnMobile
                    />
                </Center>
            )}

            <Divider my="lg" />

            <Image src={image} />

            <Divider my="lg" />

            <Footer />

            <Space h="lg" />
        </Container>
    )
}

function Header() {
    const mobile = useMobile()

    if (mobile) {
        return (
            <>
                <PageTitle />
                <Center>
                    <Buttons />
                </Center>
            </>
        )
    }

    return (
        <Group justify="space-between">
            <Box>
                <PageTitle />
            </Box>
            <Box>
                <Buttons />
            </Box>
        </Group>
    )
}

function Buttons() {
    const serverInfos = useAppSelector(state => state.server.serverInfos)
    const { colorScheme, toggleColorScheme } = useMantineColorScheme()
    const { isBrowserExtensionPopup, openSettingsPage } = useBrowserExtension()
    const dispatch = useAppDispatch()
    const dark = colorScheme === "dark"

    return (
        <Group gap={14}>
            <ActionButton
                label={<Trans>Log in</Trans>}
                icon={<TbKey size={iconSize} />}
                variant="outline"
                onClick={async () => await dispatch(redirectToLogin())}
                showLabelOnMobile
            />
            {serverInfos?.allowRegistrations && (
                <ActionButton
                    label={<Trans>Sign up</Trans>}
                    icon={<TbUserPlus size={iconSize} />}
                    variant="filled"
                    onClick={async () => await dispatch(redirectToRegistration())}
                    showLabelOnMobile
                />
            )}

            <ActionButton
                label={dark ? <Trans>Switch to light theme</Trans> : <Trans>Switch to dark theme</Trans>}
                icon={colorScheme === "dark" ? <TbSun size={18} /> : <TbMoon size={iconSize} />}
                onClick={() => toggleColorScheme()}
                hideLabelOnDesktop
            />

            {isBrowserExtensionPopup && (
                <ActionButton
                    label={<Trans>Extension options</Trans>}
                    icon={<TbSettings size={iconSize} />}
                    onClick={() => openSettingsPage()}
                    hideLabelOnDesktop
                />
            )}
        </Group>
    )
}

function Footer() {
    const dispatch = useAppDispatch()
    return (
        <Group justify="space-between">
            <Group>
                <span>© CommaFeed</span>
                <Anchor variant="text" href="https://github.com/Athou/commafeed/" target="_blank" rel="noreferrer">
                    <SiGithub />
                </Anchor>
                <Anchor variant="text" href="https://twitter.com/CommaFeed" target="_blank" rel="noreferrer">
                    <SiTwitter />
                </Anchor>
            </Group>
            <Box>
                <Anchor variant="text" onClick={async () => await dispatch(redirectToApiDocumentation())}>
                    API documentation
                </Anchor>
            </Box>
        </Group>
    )
}