mirror of
https://github.com/apotdevin/thunderhub.git
synced 2025-02-22 14:22:33 +01:00
feat: footer component
This commit is contained in:
parent
7eca5fc8c6
commit
59c127e49f
3 changed files with 140 additions and 10 deletions
17
src/components/emoji/Emoji.tsx
Normal file
17
src/components/emoji/Emoji.tsx
Normal file
|
@ -0,0 +1,17 @@
|
|||
import React from 'react';
|
||||
|
||||
interface EmojiProps {
|
||||
symbol: string;
|
||||
label?: string;
|
||||
}
|
||||
|
||||
export const Emoji = ({ label, symbol }: EmojiProps) => (
|
||||
<span
|
||||
className="emoji"
|
||||
role="img"
|
||||
aria-label={label ? label : ''}
|
||||
aria-hidden={label ? 'false' : 'true'}
|
||||
>
|
||||
{symbol}
|
||||
</span>
|
||||
);
|
|
@ -1,23 +1,136 @@
|
|||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { headerColor, headerTextColor } from 'styles/Themes';
|
||||
import { headerColor, headerTextColor, fontColors } from 'styles/Themes';
|
||||
import { Section } from 'components/section/Section';
|
||||
import { Link } from 'components/link/Link';
|
||||
import { Emoji } from 'components/emoji/Emoji';
|
||||
import { useAccount } from 'context/AccountContext';
|
||||
import { Link as RouterLink } from 'react-router-dom';
|
||||
import { HomeButton } from 'views/entry/homepage/HomePage.styled';
|
||||
import { Zap } from 'components/generic/Icons';
|
||||
|
||||
const FooterStyle = styled.div`
|
||||
padding: 40px 0;
|
||||
height: 300px;
|
||||
min-height: 300px;
|
||||
color: ${headerTextColor};
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (max-width: 578px) {
|
||||
flex-direction: column;
|
||||
padding: 0 0 40px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
`;
|
||||
|
||||
const SideFooter = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
@media (max-width: 578px) {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
`;
|
||||
|
||||
const RightFooter = styled(SideFooter)`
|
||||
justify-content: flex-start;
|
||||
align-items: flex-end;
|
||||
width: 80%;
|
||||
|
||||
@media (max-width: 578px) {
|
||||
margin-top: 32px;
|
||||
}
|
||||
`;
|
||||
|
||||
const Title = styled.div`
|
||||
font-weight: 900;
|
||||
color: ${headerTextColor};
|
||||
`;
|
||||
|
||||
const SideText = styled.p`
|
||||
font-size: 14px;
|
||||
color: ${fontColors.grey7};
|
||||
|
||||
@media (max-width: 578px) {
|
||||
padding-right: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const CopyrightText = styled(SideText)`
|
||||
font-size: 12px;
|
||||
color: ${fontColors.blue};
|
||||
`;
|
||||
|
||||
const StyledRouter = styled(RouterLink)`
|
||||
margin-top: 12px;
|
||||
|
||||
${HomeButton} {
|
||||
font-size: 14px;
|
||||
}
|
||||
`;
|
||||
|
||||
export const Footer = () => {
|
||||
const { loggedIn } = useAccount();
|
||||
return (
|
||||
<Section withColor={true} color={headerColor}>
|
||||
<FooterStyle>
|
||||
ThunderHub
|
||||
<Link to={'/faq'}>FAQ</Link>
|
||||
<Link to={'/terms'}>Terms of Use</Link>
|
||||
<Link to={'/privacy'}>Privacy Policy</Link>
|
||||
<SideFooter>
|
||||
<RouterLink to="/" style={{ textDecoration: 'none' }}>
|
||||
<Title>ThunderHub</Title>
|
||||
</RouterLink>
|
||||
<SideText>
|
||||
Open-source lightning node manager to control and
|
||||
monitor your LND node.
|
||||
</SideText>
|
||||
<SideText>
|
||||
Made in Munich with{' '}
|
||||
<Emoji symbol={'🧡'} label={'heart'} /> and{' '}
|
||||
<Emoji symbol={'⚡'} label={'lightning'} />.
|
||||
</SideText>
|
||||
<CopyrightText>
|
||||
Copyright © 2020. All rights reserved. ThunderHub
|
||||
</CopyrightText>
|
||||
</SideFooter>
|
||||
<RightFooter>
|
||||
<Link to={'/faq'} color={fontColors.blue}>
|
||||
FAQ
|
||||
</Link>
|
||||
<Link
|
||||
href={'https://github.com/apotdevin/thunderhub'}
|
||||
color={fontColors.blue}
|
||||
>
|
||||
Github
|
||||
</Link>
|
||||
<Link
|
||||
href={'https://twitter.com/thunderhubio'}
|
||||
color={fontColors.blue}
|
||||
>
|
||||
Twitter
|
||||
</Link>
|
||||
<Link to={'/terms'} color={fontColors.blue}>
|
||||
Terms of Use
|
||||
</Link>
|
||||
<Link to={'/privacy'} color={fontColors.blue}>
|
||||
Privacy Policy
|
||||
</Link>
|
||||
{!loggedIn && (
|
||||
<StyledRouter
|
||||
to="/login"
|
||||
style={{ textDecoration: 'none' }}
|
||||
>
|
||||
<HomeButton>
|
||||
<Zap fillcolor={'white'} color={'white'} />
|
||||
LOGIN
|
||||
</HomeButton>
|
||||
</StyledRouter>
|
||||
)}
|
||||
</RightFooter>
|
||||
</FooterStyle>
|
||||
</Section>
|
||||
);
|
||||
|
|
|
@ -26,7 +26,7 @@ export const FaqView = () => {
|
|||
<Section color={themeColors.grey} padding={'19px 0 16px'}>
|
||||
<Question>How much does it cost?</Question>
|
||||
<Text>
|
||||
<b>No cost</b>, ThunderHub is open source so no need to
|
||||
<b>No cost</b>, ThunderHub is open-source so no need to
|
||||
spend any precious sats here.
|
||||
</Text>
|
||||
</Section>
|
||||
|
@ -36,7 +36,7 @@ export const FaqView = () => {
|
|||
ThunderHub brings a <b>full LND lightning node manager </b>
|
||||
directly to your device without the need of installing
|
||||
plugins, extensions or apps, having specific browsers or
|
||||
operating systems and is completely <b>open source.</b>
|
||||
operating systems and is completely <b>open-source.</b>
|
||||
</Text>
|
||||
<Text>
|
||||
ThunderHub provides a <b>simple and easy to use </b>manager
|
||||
|
@ -55,7 +55,7 @@ export const FaqView = () => {
|
|||
<Section color={themeColors.grey} padding={'19px 0 16px'}>
|
||||
<Question>Is ThunderHub safe to use?</Question>
|
||||
<Text>
|
||||
ThunderHub is open source and available for anyone to audit.
|
||||
ThunderHub is open-source and available for anyone to audit.
|
||||
<b>
|
||||
This still doesn't mean it's completely bullet proof
|
||||
against attackers.
|
||||
|
|
Loading…
Add table
Reference in a new issue