umami/components/common/FilterLink.js
Brian Cao e1f99a7d01
Rewrite admin. (#1713)
* Rewrite admin.

* Clean up password forms.

* Fix naming issues.

* CSS Naming.
2022-12-26 16:57:59 -08:00

37 lines
1.1 KiB
JavaScript

import React from 'react';
import classNames from 'classnames';
import Link from 'next/link';
import { safeDecodeURI } from 'next-basics';
import usePageQuery from 'hooks/usePageQuery';
import External from 'assets/arrow-up-right-from-square.svg';
import { Icon } from 'react-basics';
import styles from './FilterLink.module.css';
export default function FilterLink({ id, value, label, externalUrl }) {
const { resolve, query } = usePageQuery();
const active = query[id] !== undefined;
const selected = query[id] === value;
return (
<div className={styles.row}>
<Link href={resolve({ [id]: value })} replace>
<a
className={classNames(styles.label, {
[styles.inactive]: active && !selected,
[styles.active]: active && selected,
})}
>
{safeDecodeURI(label || value)}
</a>
</Link>
{externalUrl && (
<a className={styles.link} href={externalUrl} target="_blank" rel="noreferrer noopener">
<Icon className={styles.icon}>
<External />
</Icon>
</a>
)}
</div>
);
}