mirror of https://github.com/mkrhere/pw2
Compare commits
6 Commits
a50e46f137
...
01a4bea711
| Author | SHA1 | Date |
|---|---|---|
 Muthu Kumar
|
01a4bea711 | 5 months ago |
|
Muthu Kumar
|
c11f785409 | 5 months ago |
|
Muthu Kumar
|
761ab66d98 | 5 months ago |
|
Muthu Kumar
|
55e03e845b | 5 months ago |
|
Muthu Kumar
|
be2c320183 | 5 months ago |
|
Muthu Kumar
|
5aa0ac4e6e | 5 months ago |
15 changed files with 2898 additions and 1913 deletions
File diff suppressed because it is too large
|
After Width: | Height: | Size: 252 B |
@ -0,0 +1,124 @@ |
|||||
|
import React from "react"; |
||||
|
import { css, cx } from "@emotion/css"; |
||||
|
import { HookSet } from "../../util/useSearchParams"; |
||||
|
import { ReactComponent as Cross } from "../../assets/cross.svg"; |
||||
|
|
||||
|
type Tags = HookSet<string>; |
||||
|
|
||||
|
const tag = css` |
||||
|
cursor: pointer; |
||||
|
border-radius: 0.5rem; |
||||
|
padding: 0.5rem 0.9rem 0.5rem 0.6rem; |
||||
|
font-size: 0.85rem; |
||||
|
background-color: transparent; |
||||
|
border: 1px solid var(--card-bg); |
||||
|
color: var(--text-colour); |
||||
|
transition: background-color 150ms; |
||||
|
|
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 0.5rem; |
||||
|
|
||||
|
&:hover { |
||||
|
background-color: var(--card-tags-hover); |
||||
|
} |
||||
|
|
||||
|
&.active { |
||||
|
background-color: var(--card-tags); |
||||
|
} |
||||
|
`;
|
||||
|
|
||||
|
export const Tag = (props: { tag: string; selected: Tags }) => { |
||||
|
const { selected } = props; |
||||
|
|
||||
|
const active = selected.has(props.tag); |
||||
|
const select = () => { |
||||
|
if (selected.has(props.tag)) selected.remove(props.tag); |
||||
|
else selected.add(props.tag); |
||||
|
}; |
||||
|
|
||||
|
return ( |
||||
|
<button className={cx(tag, { active })} onClick={select}> |
||||
|
<span |
||||
|
className={cx( |
||||
|
css` |
||||
|
transition: transform 100ms ease-in-out; |
||||
|
overflow: hidden; |
||||
|
transform: rotate(45deg); |
||||
|
width: 0.85rem; |
||||
|
|
||||
|
&.active { |
||||
|
transform: rotate(0deg); |
||||
|
} |
||||
|
`,
|
||||
|
{ active }, |
||||
|
)}> |
||||
|
<Cross |
||||
|
className={css` |
||||
|
display: block; |
||||
|
height: 0.85rem; |
||||
|
width: 0.85rem; |
||||
|
fill: var(--text-colour); |
||||
|
`}
|
||||
|
/> |
||||
|
</span> |
||||
|
{props.tag} |
||||
|
</button> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
const clear = css` |
||||
|
border: none; |
||||
|
color: var(--primary-colour); |
||||
|
opacity: 1; |
||||
|
transition: opacity 200ms; |
||||
|
|
||||
|
&.hide { |
||||
|
opacity: 0; |
||||
|
user-select: none; |
||||
|
cursor: unset; |
||||
|
height: 0; |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
`;
|
||||
|
|
||||
|
export const Clear = (props: { selected: Tags }) => { |
||||
|
const { selected } = props; |
||||
|
|
||||
|
return ( |
||||
|
<button |
||||
|
className={cx(tag, clear, { hide: !selected.size })} |
||||
|
onClick={selected.clear}> |
||||
|
<Cross |
||||
|
className={css` |
||||
|
display: block; |
||||
|
height: 0.85rem; |
||||
|
width: 0.85rem; |
||||
|
fill: var(--text-colour); |
||||
|
`}
|
||||
|
/> |
||||
|
Clear filters |
||||
|
</button> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export const Tags = (props: { tags: string[]; selected: Tags }) => { |
||||
|
const { tags, selected } = props; |
||||
|
|
||||
|
return ( |
||||
|
<div |
||||
|
className={css` |
||||
|
display: flex; |
||||
|
gap: 0.5rem; |
||||
|
flex-wrap: wrap; |
||||
|
`}>
|
||||
|
{tags.map(tag => ( |
||||
|
<Tag key={tag} tag={tag} selected={selected} /> |
||||
|
))} |
||||
|
<Clear selected={selected} /> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
@ -0,0 +1 @@ |
|||||
|
export const offscreenWidth = "82rem"; |
||||
@ -0,0 +1,57 @@ |
|||||
|
import { useState } from "react"; |
||||
|
import useLocation from "wouter/use-location"; |
||||
|
|
||||
|
export type HookSet<T> = { |
||||
|
set: Set<T>; |
||||
|
size: number; |
||||
|
add: (value: T) => void; |
||||
|
remove: (value: T) => void; |
||||
|
clear: () => void; |
||||
|
has: (value: T) => boolean; |
||||
|
}; |
||||
|
|
||||
|
const flatten = (set: Set<string>, key: string) => |
||||
|
Array.from(set) |
||||
|
.map(param => `${key}=${encodeURIComponent(param)}`) |
||||
|
.join("&"); |
||||
|
|
||||
|
export function useSearchParams(key: string): HookSet<string> { |
||||
|
const [, navigate] = useLocation(); |
||||
|
const [params, setParams] = useState( |
||||
|
() => new Set(new URLSearchParams(window.location.search).getAll(key)), |
||||
|
); |
||||
|
|
||||
|
const add = (value: string) => { |
||||
|
setParams(prevSet => { |
||||
|
const newSet = new Set(prevSet); |
||||
|
newSet.add(value); |
||||
|
navigate("?" + flatten(newSet, key), { replace: true }); |
||||
|
return newSet; |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
const remove = (value: string) => { |
||||
|
setParams(prevSet => { |
||||
|
const newSet = new Set(prevSet); |
||||
|
newSet.delete(value); |
||||
|
navigate("?" + flatten(newSet, key), { replace: true }); |
||||
|
return newSet; |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
const clear = () => { |
||||
|
setParams(new Set()); |
||||
|
navigate("?", { replace: true }); |
||||
|
}; |
||||
|
|
||||
|
return { |
||||
|
set: params, |
||||
|
size: params.size, |
||||
|
add, |
||||
|
remove, |
||||
|
clear, |
||||
|
has: (value: string) => params.has(value), |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
export default useSearchParams; |
||||
Loading…
Reference in new issue