-
Notifications
You must be signed in to change notification settings - Fork 10.3k
/
sidebar.js
68 lines (62 loc) · 1.59 KB
/
sidebar.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import React from "react"
import MdFilterList from "react-icons/lib/md/filter-list"
import styles from "../shared/styles"
export const SidebarContainer = ({ children, className }) => (
<div className={className} css={[styles.sidebarContainer, styles.sticky]}>
{children}
</div>
)
export const SidebarBody = ({ children }) => (
<div css={styles.sidebarBody}>{children}</div>
)
export const SidebarHeader = () => (
<h3 css={styles.sidebarHeader}>
Filter & Refine
{` `}
<span css={{ marginLeft: `auto`, opacity: 0.5 }}>
<MdFilterList />
</span>
</h3>
)
export const ContentContainer = ({ children }) => (
<div css={{ width: `100%` }}>{children}</div>
)
export const ContentHeader = ({ children }) => (
<div css={{ ...styles.contentHeader, ...styles.sticky }}>{children}</div>
)
export const ContentTitle = ({
search,
items,
filters,
edges,
label,
// todo smooth that out ("Starters" uses "size")
what = `length`,
}) => (
<h2 css={styles.contentTitle}>
{search.length === 0 ? (
filters[what] === 0 ? (
// no search or filters
<span>
{label}s <small css={styles.resultCount}>({edges.length})</small>
</span>
) : (
<span>
{items.length}
{` `}
{filters[what] === 1 && filters.values()[0]}
{` `}
{label}
{items.length > 1 && `s`}
{` `}
<small css={styles.resultCount}>(filtered)</small>
</span>
)
) : (
<span>
{items.length} search result
{items.length !== 1 && `s`}
</span>
)}
</h2>
)