mirror of
https://github.com/explosion/spaCy.git
synced 2026-01-04 16:03:12 +03:00
49237f05a6
* Rename CSS class to make use more clear * Rename component prop to improve code readability * Fix `aria-hidden` directly on a link element This link wouldn't have been clickable by screenreaders * Refactor component This removes a unnessary `div` and a duplicate link Co-authored-by: Ines Montani <ines@ines.io>
113 lines
3.4 KiB
JavaScript
113 lines
3.4 KiB
JavaScript
import React from 'react'
|
||
|
||
import Grid from '../components/grid'
|
||
import { Label } from '../components/typography'
|
||
import Link from '../components/link'
|
||
import SVG from 'react-inlinesvg'
|
||
|
||
import logoSpacy from '../images/logo.svg'
|
||
import patternBlue from '../images/pattern_blue.png'
|
||
import patternGreen from '../images/pattern_green.png'
|
||
import patternPurple from '../images/pattern_purple.png'
|
||
|
||
const colors = {
|
||
dark: 'var(--color-front)',
|
||
medium: 'var(--color-dark)',
|
||
light: 'var(--color-subtle)',
|
||
faint: 'var(--color-subtle-light)',
|
||
blue: 'var(--color-theme-blue)',
|
||
'dark blue': 'var(--color-theme-blue-dark)',
|
||
green: 'var(--color-theme-green)',
|
||
'dark green': 'var(--color-theme-green-dark)',
|
||
purple: 'var(--color-theme-purple)',
|
||
'dark purple': 'var(--color-theme-purple-dark)',
|
||
red: 'var(--color-red-medium)',
|
||
'light red': 'var(--color-red-light)',
|
||
yellow: 'var(--color-yellow-medium)',
|
||
'light yellow': 'var(--color-yellow-light)',
|
||
}
|
||
|
||
const patterns = {
|
||
'blue pattern': patternBlue,
|
||
'green pattern': patternGreen,
|
||
'purple pattern': patternPurple,
|
||
}
|
||
|
||
const Card = ({ style = {}, children }) => (
|
||
<div
|
||
style={{
|
||
borderRadius: 'var(--border-radius)',
|
||
boxShadow: 'var(--box-shadow)',
|
||
marginBottom: 'var(--spacing-sm)',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
borderTopLeftRadius: 'var(--border-radius)',
|
||
borderTopRightRadius: 'var(--border-radius)',
|
||
...style,
|
||
}}
|
||
/>
|
||
<div style={{ textAlign: 'center', padding: '1.5rem 0' }}>{children}</div>
|
||
</div>
|
||
)
|
||
|
||
export const Colors = () => (
|
||
<Grid cols={4} narrow>
|
||
{Object.keys(colors).map((name) => (
|
||
<Card key={name} style={{ height: 80, background: colors[name] }}>
|
||
<Label>{name}</Label>
|
||
</Card>
|
||
))}
|
||
</Grid>
|
||
)
|
||
|
||
export const Patterns = () => {
|
||
const imgStyle = (name) => ({
|
||
height: 125,
|
||
background: `url(${patterns[name].src}) center/150% repeat`,
|
||
})
|
||
const textStyle = { fontSize: 'var(--font-size-xs)', color: 'var(--color-subtle-dark)' }
|
||
const linkStyle = { color: 'var(--color-dark)' }
|
||
return (
|
||
<Grid cols={3} narrow>
|
||
{Object.keys(patterns).map((name) => (
|
||
<Card key={name} style={imgStyle(name)}>
|
||
<Label>{name}</Label>
|
||
<span style={textStyle}>
|
||
by
|
||
<Link to="https://dribbble.com/kemal" noLinkLayout style={linkStyle} ws>
|
||
Kemal Şanlı
|
||
</Link>
|
||
</span>
|
||
</Card>
|
||
))}
|
||
</Grid>
|
||
)
|
||
}
|
||
|
||
export const Logos = () => {
|
||
const style = {
|
||
padding: '0 3rem',
|
||
border: '1px solid var(--color-subtle)',
|
||
borderRadius: 'var(--border-radius)',
|
||
boxShadow: 'var(--box-shadow)',
|
||
}
|
||
return (
|
||
<Grid cols={2} narrow>
|
||
<div style={style}>
|
||
<SVG src={logoSpacy.src} />
|
||
</div>
|
||
<div
|
||
style={{
|
||
...style,
|
||
background: 'var(--color-theme-blue)',
|
||
borderColor: 'var(--color-theme-blue)',
|
||
}}
|
||
>
|
||
<SVG src={logoSpacy.src} style={{ color: 'var(--color-back)' }} />
|
||
</div>
|
||
</Grid>
|
||
)
|
||
}
|