umami/components/common/FilterLink.js

40 lines
1.2 KiB
JavaScript
Raw Normal View History

2023-03-31 14:55:28 +02:00
import { Icon, Icons } from 'react-basics';
2022-04-10 12:51:43 +02:00
import classNames from 'classnames';
2022-08-29 05:20:54 +02:00
import Link from 'next/link';
import { safeDecodeURI } from 'next-basics';
2022-04-10 12:51:43 +02:00
import usePageQuery from 'hooks/usePageQuery';
2023-03-31 14:55:28 +02:00
import useMessages from 'hooks/useMessages';
2022-04-10 12:51:43 +02:00
import styles from './FilterLink.module.css';
export default function FilterLink({ id, value, label, externalUrl }) {
2023-03-31 14:55:28 +02:00
const { formatMessage, labels } = useMessages();
const { resolveUrl, query } = usePageQuery();
2022-04-10 12:51:43 +02:00
const active = query[id] !== undefined;
const selected = query[id] === value;
return (
<div className={styles.row}>
2023-04-02 00:44:30 +02:00
{!value && `(${label || formatMessage(labels.unknown)})`}
2023-03-31 14:55:28 +02:00
{value && (
<Link
href={resolveUrl({ [id]: value })}
className={classNames(styles.label, {
[styles.inactive]: active && !selected,
[styles.active]: active && selected,
})}
replace
>
{safeDecodeURI(label || value)}
</Link>
)}
2022-04-10 12:51:43 +02:00
{externalUrl && (
2022-08-29 05:20:54 +02:00
<a className={styles.link} href={externalUrl} target="_blank" rel="noreferrer noopener">
<Icon className={styles.icon}>
2023-01-31 06:44:07 +01:00
<Icons.External />
</Icon>
2022-04-10 12:51:43 +02:00
</a>
)}
</div>
);
}