stacker.news/components/footer.js

192 lines
6.2 KiB
JavaScript
Raw Normal View History

2021-06-02 23:15:28 +00:00
import { useQuery } from '@apollo/client'
import gql from 'graphql-tag'
2021-09-02 23:27:11 +00:00
import { Container, OverlayTrigger, Popover } from 'react-bootstrap'
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'
import Twitter from '../svgs/twitter-fill.svg'
2021-07-15 23:06:21 +00:00
import Link from 'next/link'
2021-11-09 17:38:58 +00:00
import useDarkMode from 'use-dark-mode'
import Sun from '../svgs/sun-fill.svg'
import Moon from '../svgs/moon-fill.svg'
2021-11-09 23:04:15 +00:00
import { useEffect, useState } from 'react'
2021-11-04 18:22:03 +00:00
2021-11-16 20:55:40 +00:00
// XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
// if you update this you need to update /public/darkmode
// XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
const COLORS = {
light: {
body: '#f5f5f5',
color: '#212529',
navbarVariant: 'light',
navLink: 'rgba(0, 0, 0, 0.55)',
2021-11-16 20:55:40 +00:00
navLinkFocus: 'rgba(0, 0, 0, 0.7)',
navLinkActive: 'rgba(0, 0, 0, 0.9)',
borderColor: '#ced4da',
inputBg: '#ffffff',
inputDisabledBg: '#e9ecef',
dropdownItemColor: 'rgba(0, 0, 0, 0.7)',
dropdownItemColorHover: 'rgba(0, 0, 0, 0.9)',
commentBg: 'rgba(0, 0, 0, 0.03)',
2022-04-15 16:56:01 +00:00
clickToContextColor: 'rgba(0, 0, 0, 0.07)',
brandColor: 'rgba(0, 0, 0, 0.9)',
grey: '#707070',
link: '#007cbe',
linkHover: '#004a72',
linkVisited: '#7acaf5'
2021-11-16 20:55:40 +00:00
},
dark: {
body: '#000000',
inputBg: '#000000',
inputDisabledBg: '#000000',
navLink: 'rgba(255, 255, 255, 0.55)',
2021-11-16 20:55:40 +00:00
navLinkFocus: 'rgba(255, 255, 255, 0.75)',
navLinkActive: 'rgba(255, 255, 255, 0.9)',
borderColor: 'rgba(255, 255, 255, 0.5)',
dropdownItemColor: 'rgba(255, 255, 255, 0.7)',
dropdownItemColorHover: 'rgba(255, 255, 255, 0.9)',
commentBg: 'rgba(255, 255, 255, 0.04)',
2022-04-15 16:56:01 +00:00
clickToContextColor: 'rgba(255, 255, 255, 0.2)',
2021-11-16 20:55:40 +00:00
color: '#f8f9fa',
brandColor: 'var(--primary)',
grey: '#969696',
link: '#2e99d1',
linkHover: '#007cbe',
linkVisited: '#066ba3'
2021-11-16 20:55:40 +00:00
}
}
const handleThemeChange = (dark) => {
const root = window.document.documentElement
const colors = COLORS[dark ? 'dark' : 'light']
Object.entries(colors).forEach(([varName, value]) => {
const cssVarName = `--theme-${varName}`
root.style.setProperty(cssVarName, value)
})
}
2021-09-02 23:27:11 +00:00
const ChatPopover = (
<Popover>
<Popover.Content style={{ fontWeight: 500, fontSize: '.9rem' }}>
2021-09-02 23:27:11 +00:00
<a
href='https://tribes.sphinx.chat/t/stackerzchat' className='text-dark d-inline-flex'
2021-09-02 23:27:11 +00:00
target='_blank' rel='noreferrer'
>
sphinx
</a>
<span className='mx-2 text-dark'> \ </span>
2021-09-02 23:27:11 +00:00
<a
href='https://t.me/stackernews' className='text-dark d-inline-flex'
2021-09-02 23:27:11 +00:00
target='_blank' rel='noreferrer'
>
telegram
</a>
</Popover.Content>
</Popover>
)
2022-06-10 19:20:33 +00:00
const AnalyticsPopover = (
<Popover>
<Popover.Content style={{ fontWeight: 500, fontSize: '.9rem' }}>
<a
href='https://plausible.io/stacker.news' className='text-dark d-inline-flex'
target='_blank' rel='noreferrer'
>
visitors
</a>
<span className='mx-2 text-dark'> \ </span>
2022-06-24 15:38:00 +00:00
<Link href='/users/forever' passHref>
2022-06-10 19:20:33 +00:00
<a className='text-dark d-inline-flex'>
2022-06-24 15:38:00 +00:00
users
2022-06-10 19:20:33 +00:00
</a>
</Link>
</Popover.Content>
</Popover>
)
2021-08-26 21:22:37 +00:00
export default function Footer ({ noLinks }) {
2021-06-02 23:15:28 +00:00
const query = gql`
{
connectAddress
}
`
2021-10-28 17:03:26 +00:00
const { data } = useQuery(query, { fetchPolicy: 'cache-first' })
2021-06-02 23:15:28 +00:00
2021-11-09 17:38:58 +00:00
const darkMode = useDarkMode(false, {
// set this so it doesn't try to use classes
2021-11-09 22:43:56 +00:00
onChange: handleThemeChange
2021-11-09 17:38:58 +00:00
})
2021-11-09 23:04:15 +00:00
const [mounted, setMounted] = useState()
useEffect(() => {
setMounted(true)
})
2021-06-02 23:15:28 +00:00
return (
<footer>
2021-08-26 21:22:37 +00:00
<Container className='mb-3 mt-4'>
{!noLinks &&
<div className='mb-2' style={{ fontWeight: 500 }}>
2021-11-09 23:04:15 +00:00
{mounted &&
<div className='mb-2'>
{darkMode.value
? <Sun onClick={() => darkMode.toggle()} className='fill-grey theme' />
: <Moon onClick={() => darkMode.toggle()} className='fill-grey theme' />}
2021-11-09 23:04:15 +00:00
</div>}
2021-08-26 21:22:37 +00:00
<Link href='/faq' passHref>
<a className='nav-link p-0 d-inline-flex'>
2021-08-26 21:22:37 +00:00
faq
</a>
</Link>
<span className='mx-2 text-muted'> \ </span>
2021-09-02 17:49:17 +00:00
<Link href='/story' passHref>
<a className='nav-link p-0 d-inline-flex'>
2021-09-02 17:49:17 +00:00
story
</a>
</Link>
<span className='mx-2 text-muted'> \ </span>
2022-06-10 19:20:33 +00:00
<OverlayTrigger trigger='click' placement='top' overlay={AnalyticsPopover} rootClose>
<div className='nav-link p-0 d-inline-flex' style={{ cursor: 'pointer' }}>
analytics
</div>
</OverlayTrigger>
<span className='mx-2 text-muted'> \ </span>
2021-09-02 23:27:11 +00:00
<OverlayTrigger trigger='click' placement='top' overlay={ChatPopover} rootClose>
<div className='nav-link p-0 d-inline-flex' style={{ cursor: 'pointer' }}>
2021-09-02 23:27:11 +00:00
chat
</div>
</OverlayTrigger>
<span className='mx-2 text-muted'> \ </span>
<a href='/rss' className='nav-link p-0 d-inline-flex' target='_blank'>
2021-09-02 17:49:17 +00:00
rss
</a>
2021-08-26 21:22:37 +00:00
</div>}
2021-06-30 23:01:28 +00:00
{data &&
2021-06-02 23:31:07 +00:00
<div
2021-11-12 22:39:52 +00:00
className={`text-small mx-auto mb-1 ${styles.connect}`}
2021-06-02 23:31:07 +00:00
>
2021-06-02 23:15:28 +00:00
<span className='nav-item text-muted mr-2'>connect:</span>
<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
placeholder={data.connectAddress}
/>
2021-06-30 23:01:28 +00:00
</div>}
<small>
2022-04-15 16:07:21 +00:00
<a className={`d-inline-block ${styles.contrastLink}`} href='https://github.com/stackernews/stacker.news' target='_blank' rel='noreferrer'>
2021-09-23 17:42:00 +00:00
This is free open source software<Github width={20} height={20} className='mx-1' />
2021-11-09 22:43:56 +00:00
</a>
2021-09-23 17:42:00 +00:00
<span className='d-inline-block text-muted'>
made with sound love in Austin<Texas className='mx-1' width={20} height={20} />
2022-04-15 16:07:21 +00:00
by<a href='https://twitter.com/k00bideh' target='_blank' rel='noreferrer' className='text-twitter d-inline-block'><Twitter width={20} height={20} className='ml-1' />@k00bideh</a>
2021-06-30 23:01:28 +00:00
</span>
</small>
</Container>
2021-06-02 23:15:28 +00:00
</footer>
)
}