Layout updates.

This commit is contained in:
Mike Cao 2023-10-03 09:45:02 -07:00
parent e4c5f42189
commit 476dd52875
23 changed files with 97 additions and 86 deletions

View file

@ -2,13 +2,13 @@ import { Icon, Icons } from 'react-basics';
import classNames from 'classnames';
import Link from 'next/link';
import { safeDecodeURI } from 'next-basics';
import usePageQuery from 'components/hooks/usePageQuery';
import useNavigation from 'components/hooks/useNavigation';
import useMessages from 'components/hooks/useMessages';
import styles from './FilterLink.module.css';
export function FilterLink({ id, value, label, externalUrl, children, className }) {
const { formatMessage, labels } = useMessages();
const { resolveUrl, query } = usePageQuery();
const { makeUrl, query } = useNavigation();
const active = query[id] !== undefined;
const selected = query[id] === value;
@ -22,7 +22,7 @@ export function FilterLink({ id, value, label, externalUrl, children, className
{children}
{!value && `(${label || formatMessage(labels.unknown)})`}
{value && (
<Link href={resolveUrl({ [id]: value })} className={styles.label} replace>
<Link href={makeUrl({ [id]: value })} className={styles.label} replace>
{safeDecodeURI(label || value)}
</Link>
)}

View file

@ -1,11 +1,15 @@
import classNames from 'classnames';
import Link from 'next/link';
import { Icon, Icons, Text } from 'react-basics';
import styles from './LinkButton.module.css';
import { useLocale } from 'components/hooks';
export function LinkButton({ href, icon, className, children }) {
const { dir } = useLocale();
export function LinkButton({ href, icon, children }) {
return (
<Link className={styles.button} href={href}>
<Icon>{icon || <Icons.ArrowRight />}</Icon>
<Link className={classNames(styles.button, className)} href={href}>
<Icon rotate={dir === 'rtl' ? 0 : 180}>{icon || <Icons.ArrowRight />}</Icon>
<Text>{children}</Text>
</Link>
);