stacker.news/components/footer.js

296 lines
11 KiB
JavaScript
Raw Normal View History

2023-07-24 18:35:05 +00:00
import Container from 'react-bootstrap/Container'
import OverlayTrigger from 'react-bootstrap/OverlayTrigger'
import Popover from 'react-bootstrap/Popover'
2021-06-02 23:15:28 +00:00
import { CopyInput } from './form'
2021-06-04 01:55:23 +00:00
import styles from './footer.module.css'
2021-06-30 23:01:28 +00:00
import Texas from '../svgs/texas.svg'
import Github from '../svgs/github-fill.svg'
2021-07-15 23:06:21 +00:00
import Link from 'next/link'
2021-11-09 17:38:58 +00:00
import Sun from '../svgs/sun-fill.svg'
import Moon from '../svgs/moon-fill.svg'
import No from '../svgs/no.svg'
import Bolt from '../svgs/bolt.svg'
2023-05-05 21:22:22 +00:00
import Amboss from '../svgs/amboss.svg'
2024-01-02 22:35:01 +00:00
import Mempool from '../svgs/bimi.svg'
2021-11-09 23:04:15 +00:00
import { useEffect, useState } from 'react'
2023-07-06 17:43:51 +00:00
import Rewards from './footer-rewards'
import useDarkMode from './dark-mode'
import ActionTooltip from './action-tooltip'
2021-11-16 20:55:40 +00:00
2023-05-04 18:17:02 +00:00
const RssPopover = (
<Popover>
2023-07-24 18:35:05 +00:00
<Popover.Body style={{ fontWeight: 500, fontSize: '.9rem' }}>
2023-06-12 19:48:35 +00:00
<div className='d-flex justify-content-center'>
<a href='/rss' className='nav-link p-0 d-inline-flex'>
home
</a>
<span className='mx-2 text-muted'> \ </span>
<a href='/~bitcoin/rss' className='nav-link p-0 d-inline-flex'>
bitcoin
</a>
<span className='mx-2 text-muted'> \ </span>
2023-06-12 19:48:35 +00:00
<a href='/~nostr/rss' className='nav-link p-0 d-inline-flex'>
nostr
</a>
</div>
<div className='d-flex justify-content-center'>
2023-06-12 19:48:35 +00:00
<a href='/~tech/rss' className='nav-link p-0 d-inline-flex'>
tech
</a>
<span className='mx-2 text-muted'> \ </span>
<a href='/~meta/rss' className='nav-link p-0 d-inline-flex'>
meta
</a>
<span className='mx-2 text-muted'> \ </span>
2023-06-12 19:48:35 +00:00
<a href='/~jobs/rss' className='nav-link p-0 d-inline-flex'>
jobs
</a>
</div>
2023-07-24 18:35:05 +00:00
</Popover.Body>
2023-05-04 18:17:02 +00:00
</Popover>
)
2023-05-04 23:15:08 +00:00
const SocialsPopover = (
<Popover>
2023-07-24 18:35:05 +00:00
<Popover.Body style={{ fontWeight: 500, fontSize: '.9rem' }}>
2023-05-04 23:15:08 +00:00
<a
href='https://snort.social/p/npub1jfujw6llhq7wuvu5detycdsq5v5yqf56sgrdq8wlgrryx2a2p09svwm0gx' className='nav-link p-0 d-inline-flex'
target='_blank' rel='noreferrer'
>
nostr
</a>
<span className='mx-2 text-muted'> \ </span>
<a
href='https://twitter.com/stacker_news' className='nav-link p-0 d-inline-flex'
target='_blank' rel='noreferrer'
>
twitter
</a>
<span className='mx-2 text-muted'> \ </span>
<a
href='https://www.youtube.com/@stackernews' className='nav-link p-0 d-inline-flex'
target='_blank' rel='noreferrer'
>
2023-05-05 16:54:28 +00:00
youtube
</a>
<span className='mx-2 text-muted'> \ </span>
<a
href='https://www.fountain.fm/show/Mg1AWuvkeZSFhsJZ3BW2' className='nav-link p-0 d-inline-flex'
target='_blank' rel='noreferrer'
>
pod
2023-05-04 23:15:08 +00:00
</a>
2023-07-24 18:35:05 +00:00
</Popover.Body>
2023-05-04 23:15:08 +00:00
</Popover>
)
2021-09-02 23:27:11 +00:00
const ChatPopover = (
<Popover>
2023-07-24 18:35:05 +00:00
<Popover.Body style={{ fontWeight: 500, fontSize: '.9rem' }}>
2021-09-02 23:27:11 +00:00
<a
href='https://tribes.sphinx.chat/t/stackerzchat' className='nav-link p-0 d-inline-flex'
2021-09-02 23:27:11 +00:00
target='_blank' rel='noreferrer'
>
sphinx
</a>
<span className='mx-2 text-muted'> \ </span>
2021-09-02 23:27:11 +00:00
<a
href='https://t.me/stackernews' className='nav-link p-0 d-inline-flex'
2021-09-02 23:27:11 +00:00
target='_blank' rel='noreferrer'
>
telegram
</a>
<span className='mx-2 text-muted'> \ </span>
<a
href='https://simplex.chat/contact#/?v=1-2&smp=smp%3A%2F%2F6iIcWT_dF2zN_w5xzZEY7HI2Prbh3ldP07YTyDexPjE%3D%40smp10.simplex.im%2FebLYaEFGjsD3uK4fpE326c5QI1RZSxau%23%2F%3Fv%3D1-2%26dh%3DMCowBQYDK2VuAyEAV086Oj5yCsavWzIbRMCVuF6jq793Tt__rWvCec__viI%253D%26srv%3Drb2pbttocvnbrngnwziclp2f4ckjq65kebafws6g4hy22cdaiv5dwjqd.onion&data=%7B%22type%22%3A%22group%22%2C%22groupLinkId%22%3A%22cZwSGoQhyOUulzp7rwCdWQ%3D%3D%22%7D' className='nav-link p-0 d-inline-flex'
target='_blank' rel='noreferrer'
>
simplex
</a>
2023-07-24 18:35:05 +00:00
</Popover.Body>
2021-09-02 23:27:11 +00:00
</Popover>
)
2022-06-10 19:20:33 +00:00
const AnalyticsPopover = (
<Popover>
2023-07-24 18:35:05 +00:00
<Popover.Body style={{ fontWeight: 500, fontSize: '.9rem' }}>
2022-06-10 19:20:33 +00:00
<a
href='https://plausible.io/stacker.news' className='nav-link p-0 d-inline-flex'
2022-06-10 19:20:33 +00:00
target='_blank' rel='noreferrer'
>
visitors
</a>
<span className='mx-2 text-muted'> \ </span>
<Link href='/stackers/day' className='nav-link p-0 d-inline-flex'>
stackers
2022-06-10 19:20:33 +00:00
</Link>
2023-07-24 18:35:05 +00:00
</Popover.Body>
2022-06-10 19:20:33 +00:00
</Popover>
)
2023-12-04 19:42:39 +00:00
const LegalPopover = (
<Popover>
<Popover.Body style={{ fontWeight: 500, fontSize: '.9rem' }}>
2023-12-04 22:56:13 +00:00
<div className='d-flex justify-content-center'>
<Link href='/tos' className='nav-link p-0 d-inline-flex'>
terms of service
</Link>
<span className='mx-2 text-muted'> \ </span>
<Link href='/privacy' className='nav-link p-0 d-inline-flex'>
privacy policy
</Link>
</div>
<div className='d-flex justify-content-center'>
<Link href='/copyright' className='nav-link p-0 d-inline-flex'>
copyright policy
</Link>
</div>
2023-12-04 19:42:39 +00:00
</Popover.Body>
</Popover>
)
export default function Footer ({ links = true }) {
const [darkMode, darkModeToggle] = useDarkMode()
2021-11-09 17:38:58 +00:00
const [lightning, setLightning] = useState(undefined)
2021-11-09 23:04:15 +00:00
useEffect(() => {
2023-07-25 14:14:45 +00:00
setLightning(window.localStorage.getItem('lnAnimate') || 'yes')
}, [])
2021-11-09 23:04:15 +00:00
const toggleLightning = () => {
if (lightning === 'yes') {
2023-07-25 14:14:45 +00:00
window.localStorage.setItem('lnAnimate', 'no')
setLightning('no')
} else {
2023-07-25 14:14:45 +00:00
window.localStorage.setItem('lnAnimate', 'yes')
setLightning('yes')
}
}
const DarkModeIcon = darkMode ? Sun : Moon
const LnIcon = lightning === 'yes' ? No : Bolt
const version = process.env.NEXT_PUBLIC_COMMIT_HASH
2021-06-02 23:15:28 +00:00
return (
<footer>
2021-08-26 21:22:37 +00:00
<Container className='mb-3 mt-4'>
{links &&
2022-10-04 17:19:15 +00:00
<>
<div className='mb-1'>
<ActionTooltip notForm overlayText={`${darkMode ? 'disable' : 'enable'} dark mode`}>
<DarkModeIcon onClick={darkModeToggle} width={20} height={20} className='fill-grey theme' suppressHydrationWarning />
</ActionTooltip>
<ActionTooltip notForm overlayText={`${lightning === 'yes' ? 'disable' : 'enable'} lightning animations`}>
<LnIcon onClick={toggleLightning} width={20} height={20} className='ms-2 fill-grey theme' suppressHydrationWarning />
</ActionTooltip>
</div>
2022-12-08 00:04:02 +00:00
<div className='mb-0' style={{ fontWeight: 500 }}>
2023-07-06 17:43:51 +00:00
<Rewards />
2022-12-08 00:04:02 +00:00
</div>
<div className='mb-0' style={{ fontWeight: 500 }}>
2022-10-04 17:19:15 +00:00
<OverlayTrigger trigger='click' placement='top' overlay={AnalyticsPopover} rootClose>
<div className='nav-link p-0 p-0 d-inline-flex' style={{ cursor: 'pointer' }}>
2022-10-04 17:19:15 +00:00
analytics
</div>
</OverlayTrigger>
<span className='mx-2 text-muted'> \ </span>
<OverlayTrigger trigger='click' placement='top' overlay={ChatPopover} rootClose>
<div className='nav-link p-0 p-0 d-inline-flex' style={{ cursor: 'pointer' }}>
2022-10-04 17:19:15 +00:00
chat
</div>
</OverlayTrigger>
2022-10-10 21:58:50 +00:00
<span className='mx-2 text-muted'> \ </span>
2023-05-04 23:15:08 +00:00
<OverlayTrigger trigger='click' placement='top' overlay={SocialsPopover} rootClose>
<div className='nav-link p-0 p-0 d-inline-flex' style={{ cursor: 'pointer' }}>
socials
</div>
</OverlayTrigger>
<span className='mx-2 text-muted'> \ </span>
2023-05-04 18:17:02 +00:00
<OverlayTrigger trigger='click' placement='top' overlay={RssPopover} rootClose>
<div className='nav-link p-0 p-0 d-inline-flex' style={{ cursor: 'pointer' }}>
2023-05-04 18:17:02 +00:00
rss
</div>
</OverlayTrigger>
2022-10-04 17:19:15 +00:00
</div>
<div className='mb-2' style={{ fontWeight: 500 }}>
<Link href='/faq' className='nav-link p-0 p-0 d-inline-flex'>
faq
2022-10-04 17:19:15 +00:00
</Link>
<span className='mx-2 text-muted'> \ </span>
<Link href='/guide' className='nav-link p-0 p-0 d-inline-flex'>
guide
2022-10-23 15:43:39 +00:00
</Link>
<span className='mx-2 text-muted'> \ </span>
<Link href='/story' className='nav-link p-0 p-0 d-inline-flex'>
story
2022-10-04 17:19:15 +00:00
</Link>
<span className='mx-2 text-muted'> \ </span>
<Link href='/changes' className='nav-link p-0 p-0 d-inline-flex'>
changes
2022-10-10 21:58:50 +00:00
</Link>
2022-10-04 17:19:15 +00:00
<span className='mx-2 text-muted'> \ </span>
2023-12-04 19:42:39 +00:00
<OverlayTrigger trigger='click' placement='top' overlay={LegalPopover} rootClose>
<div className='nav-link p-0 p-0 d-inline-flex' style={{ cursor: 'pointer' }}>
legal
</div>
</OverlayTrigger>
2022-10-04 17:19:15 +00:00
</div>
</>}
{process.env.NEXT_PUBLIC_LND_CONNECT_ADDRESS &&
2021-06-02 23:31:07 +00:00
<div
2023-05-09 22:52:24 +00:00
className={`text-small mx-auto mb-2 ${styles.connect}`}
2021-06-02 23:31:07 +00:00
>
2024-01-02 22:35:01 +00:00
<small className='nav-item text-muted me-2'>connect:</small>
2021-06-02 23:15:28 +00:00
<CopyInput
size='sm'
2021-06-02 23:31:07 +00:00
groupClassName='mb-0 w-100'
2021-06-02 23:15:28 +00:00
readOnly
2022-08-18 18:15:24 +00:00
noForm
placeholder={process.env.NEXT_PUBLIC_LND_CONNECT_ADDRESS}
2021-06-02 23:15:28 +00:00
/>
2023-05-05 21:22:22 +00:00
<a
href='https://amboss.space/node/03cc1d0932bb99b0697f5b5e5961b83ab7fd66f1efc4c9f5c7bad66c1bcbe78f02'
target='_blank' rel='noreferrer'
>
2023-07-24 18:35:05 +00:00
<Amboss className='ms-2 theme' width={20} height={20} />
2023-05-05 21:22:22 +00:00
</a>
2024-01-02 22:35:01 +00:00
<a
href='https://mempool.space/lightning/node/03cc1d0932bb99b0697f5b5e5961b83ab7fd66f1efc4c9f5c7bad66c1bcbe78f02'
target='_blank' rel='noreferrer'
>
<Mempool className='ms-2' width={20} height={20} />
</a>
2021-06-30 23:01:28 +00:00
</div>}
2023-05-09 22:52:24 +00:00
<small className='d-flex justify-content-center align-items-center text-muted flex-wrap'>
<a className={`${styles.contrastLink} d-flex align-items-center`} href='https://github.com/stackernews/stacker.news' target='_blank' rel='noreferrer'>
FOSS <Github width={20} height={20} className='mx-1' />
2021-11-09 22:43:56 +00:00
</a>
2023-07-24 18:35:05 +00:00
made in Austin<Texas className='ms-1' width={20} height={20} />
<span className='ms-1'>by</span>
2023-05-09 22:52:24 +00:00
<span>
2023-07-24 18:35:05 +00:00
<Link href='/k00b' className='ms-1'>
@k00b
2023-05-09 22:52:24 +00:00
</Link>
2023-07-24 18:35:05 +00:00
<Link href='/kr' className='ms-1'>
@kr
2023-05-09 22:52:24 +00:00
</Link>
2023-07-24 18:35:05 +00:00
<Link href='/ekzyis' className='ms-1'>
@ekzyis
2023-05-09 22:52:24 +00:00
</Link>
2023-08-28 14:46:56 +00:00
<span className='ms-1'>&</span>
<Link href='https://github.com/stackernews/stacker.news/graphs/contributors' className='ms-1' target='_blank' rel='noreferrer'>
more
</Link>
2021-06-30 23:01:28 +00:00
</span>
</small>
{version &&
<div className={styles.version}>
running <a className='text-reset' href={`https://github.com/stackernews/stacker.news/commit/${version}`} target='_blank' rel='noreferrer'>{version}</a>
</div>}
2021-06-30 23:01:28 +00:00
</Container>
2021-06-02 23:15:28 +00:00
</footer>
)
}