122 lines
4.0 KiB
TypeScript
122 lines
4.0 KiB
TypeScript
import { useCallback, useState } from 'react'
|
|
import { SettingsLayout } from '../templates/SettingsLayout'
|
|
import {
|
|
Box,
|
|
VStack,
|
|
HStack,
|
|
} from './LayoutPrimitives'
|
|
import { StyledText } from './StyledText'
|
|
import { Button } from './Button'
|
|
import Router from 'next/router'
|
|
import {
|
|
Dropdown,
|
|
DropdownOption,
|
|
} from './DropdownElements'
|
|
import { ChromeIcon } from './images/ChromeIcon'
|
|
import { SafariIcon } from './images/SafariIcon'
|
|
import { FirefoxIcon } from './images/FirefoxIcon'
|
|
import { EdgeIcon } from './images/EdgeIcon'
|
|
import { AngleDownIcon } from '../tokens/icons/AngleDownIcon'
|
|
import { theme } from '../tokens/stitches.config'
|
|
|
|
export default function ExtensionInstallHelp(): JSX.Element {
|
|
return (
|
|
<Box
|
|
css={{
|
|
bg: '$grayBase',
|
|
px: '$1',
|
|
py: '$3',
|
|
height: '100vh',
|
|
}}
|
|
>
|
|
<ExtensionSelector />
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
const extensionDownloadLinks = {
|
|
chrome: 'https://omnivore.app/install/chrome',
|
|
safari: 'https://omnivore.app/install/mac',
|
|
edge: 'https://omnivore.app/install/edge',
|
|
firefox: 'https://omnivore.app/install/firefox',
|
|
}
|
|
|
|
export type Browser = 'chrome' | 'safari' | 'firefox' | 'edge'
|
|
|
|
const browserInfo = (browser: Browser): { title: string, icon: JSX.Element } => {
|
|
const fillColor = theme.colors.grayText.toString()
|
|
switch (browser) {
|
|
case 'chrome':
|
|
return { title: 'Chrome', icon: <ChromeIcon fillColor={fillColor} /> }
|
|
case 'safari':
|
|
return { title: 'Safari', icon: <SafariIcon fillColor={fillColor} /> }
|
|
case 'firefox':
|
|
return { title: 'FireFox', icon: <FirefoxIcon fillColor={fillColor} /> }
|
|
case 'edge':
|
|
return { title: 'Edge', icon: <EdgeIcon fillColor={fillColor} /> }
|
|
}
|
|
}
|
|
|
|
function ExtensionSelector(): JSX.Element {
|
|
const [browser, setBrowser] = useState<Browser>('chrome')
|
|
|
|
const selectBrowser = useCallback(() => {
|
|
window.location.href = extensionDownloadLinks[browser]
|
|
}, [browser])
|
|
|
|
return (
|
|
<VStack
|
|
css={{
|
|
bg: '$grayBase',
|
|
px: '$1',
|
|
py: '$3',
|
|
maxWidth: '30em',
|
|
}}
|
|
>
|
|
<StyledText style="boldHeadline">Install Browser Extensions</StyledText>
|
|
<StyledText style="body" css={{ width: '100%' }}>
|
|
Installing the Omnivore browser extension is the best way to save pages to
|
|
Omnivore from your computer. Learn more about the browser extensions <a href="https://omnivore.app/help/saving-links#savingfromyourcomputer">here</a>.
|
|
</StyledText>
|
|
<HStack distribution="center" css={{ width: '100%', mb: '32px', pl: '24px' }}>
|
|
<img src="/static/media/about/save-article.png" alt="Save articles" width="300"></img>
|
|
</HStack>
|
|
<VStack alignment="center" css={{ mb: '32px', width: '100%' }}>
|
|
<Button onClick={selectBrowser} style="ctaDarkYellow" css={{ p: '18px', px: '42px', fontSize: '18px' }}>Download for {browserInfo(browser).title}</Button>
|
|
<Box >
|
|
<Dropdown triggerElement={<StyledText style='captionLink' css={{ fontSize: '12px' }}>Download for a different browser</StyledText>}>
|
|
<DropdownOption onSelect={() => setBrowser('chrome')}>
|
|
<BrowserOption browser="chrome" />
|
|
</DropdownOption>
|
|
<DropdownOption onSelect={() => setBrowser('safari')}>
|
|
<BrowserOption browser="safari" />
|
|
</DropdownOption>
|
|
<DropdownOption onSelect={() => setBrowser('firefox')}>
|
|
<BrowserOption browser="firefox" />
|
|
</DropdownOption>
|
|
<DropdownOption onSelect={() => setBrowser('edge')} hideSeparator>
|
|
<BrowserOption browser="edge" />
|
|
</DropdownOption>
|
|
</Dropdown>
|
|
</Box>
|
|
</VStack>
|
|
</VStack>
|
|
)
|
|
}
|
|
|
|
type BrowserOptionProps = {
|
|
browser: Browser
|
|
}
|
|
|
|
function BrowserOption(props: BrowserOptionProps): JSX.Element {
|
|
const info = browserInfo(props.browser)
|
|
return (
|
|
<HStack alignment="center" distribution="start">
|
|
<Box css={{ m: '$2' }}>{info.icon}</Box>
|
|
<StyledText css={{ m: '$2' }}>
|
|
{info.title}
|
|
</StyledText>
|
|
</HStack>
|
|
)
|
|
}
|