mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 04:46:40 +07:00
fixed tag button on node related
This commit is contained in:
parent
c33e417cbb
commit
bb785ea459
3 changed files with 35 additions and 6 deletions
17
src/components/common/Pressable/index.tsx
Normal file
17
src/components/common/Pressable/index.tsx
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
import React, { FC } from 'react';
|
||||||
|
|
||||||
|
import classNames from 'classnames';
|
||||||
|
|
||||||
|
import { ButtonProps } from '~/utils/types';
|
||||||
|
|
||||||
|
import styles from './styles.module.scss';
|
||||||
|
|
||||||
|
interface PressableProps extends ButtonProps {}
|
||||||
|
|
||||||
|
const Pressable: FC<PressableProps> = ({ children, ...rest }) => (
|
||||||
|
<button {...rest} className={classNames(styles.pressable, rest.className)}>
|
||||||
|
{children}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
|
||||||
|
export { Pressable };
|
10
src/components/common/Pressable/styles.module.scss
Normal file
10
src/components/common/Pressable/styles.module.scss
Normal file
|
@ -0,0 +1,10 @@
|
||||||
|
.pressable {
|
||||||
|
color: inherit;
|
||||||
|
border: none;
|
||||||
|
font: inherit;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
text-transform: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
|
@ -1,9 +1,13 @@
|
||||||
import React, { FC } from 'react';
|
import React, { FC, useCallback } from 'react';
|
||||||
|
|
||||||
import { Anchor } from '~/components/common/Anchor';
|
import { Anchor } from '~/components/common/Anchor';
|
||||||
|
import { Pressable } from '~/components/common/Pressable';
|
||||||
|
import { SubTitle } from '~/components/common/SubTitle';
|
||||||
import { NodeRelated } from '~/components/node/NodeRelated';
|
import { NodeRelated } from '~/components/node/NodeRelated';
|
||||||
import { NodeRelatedPlaceholder } from '~/components/node/NodeRelated/placeholder';
|
import { NodeRelatedPlaceholder } from '~/components/node/NodeRelated/placeholder';
|
||||||
|
import { Dialog } from '~/constants/modal';
|
||||||
import { URLS } from '~/constants/urls';
|
import { URLS } from '~/constants/urls';
|
||||||
|
import { useShowModal } from '~/hooks/modal/useShowModal';
|
||||||
import { INode } from '~/types';
|
import { INode } from '~/types';
|
||||||
import { INodeRelated } from '~/types/node';
|
import { INodeRelated } from '~/types/node';
|
||||||
|
|
||||||
|
@ -14,6 +18,8 @@ interface IProps {
|
||||||
}
|
}
|
||||||
|
|
||||||
const NodeRelatedBlock: FC<IProps> = ({ isLoading, node, related }) => {
|
const NodeRelatedBlock: FC<IProps> = ({ isLoading, node, related }) => {
|
||||||
|
const goToTag = useShowModal(Dialog.TagSidebar);
|
||||||
|
|
||||||
if (isLoading) {
|
if (isLoading) {
|
||||||
return <NodeRelatedPlaceholder />;
|
return <NodeRelatedPlaceholder />;
|
||||||
}
|
}
|
||||||
|
@ -27,11 +33,7 @@ const NodeRelatedBlock: FC<IProps> = ({ isLoading, node, related }) => {
|
||||||
.filter(album => related.albums[album].length > 0)
|
.filter(album => related.albums[album].length > 0)
|
||||||
.map(album => (
|
.map(album => (
|
||||||
<NodeRelated
|
<NodeRelated
|
||||||
title={
|
title={<Pressable onClick={() => goToTag({ tag: album })}>{album}</Pressable>}
|
||||||
<Anchor href={URLS.NODE_TAG_URL(node.id!, encodeURIComponent(album))}>
|
|
||||||
{album}
|
|
||||||
</Anchor>
|
|
||||||
}
|
|
||||||
items={related.albums[album]}
|
items={related.albums[album]}
|
||||||
key={album}
|
key={album}
|
||||||
/>
|
/>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue