muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-26 05:16:41 +07:00
Code Packages Activity Actions

whatsnew

Browse source
This commit is contained in:
Fedor Katurov 2020-04-18 14:37:14 +07:00
parent 81c9a5d7b3
commit 41a35f1490
9 changed files with 87 additions and 151 deletions
Download patch file Download diff file Expand all files Collapse all files

92
src/components/flow/FlowRecent/index.tsx
View file

@ -1,4 +1,4 @@
import React, { FC } from 'react';
import React, { FC, useState, useCallback, FormEvent } from 'react';
import * as styles from './styles.scss';
import { IFlowState } from '~/redux/flow/reducer';
import { getURL, getPrettyDate } from '~/utils/dom';
@ -13,45 +13,57 @@ interface IProps {
updated: IFlowState['updated'];
}
const FlowRecent: FC<IProps> = ({ recent, updated }) => (
<div>
<div className={styles.search}>
<InputText title="Поиск" />
const FlowRecent: FC<IProps> = ({ recent, updated }) => {
const [search, setSearch] = useState('');
const onSearchSubmit = useCallback((event: FormEvent) => {
event.preventDefault();
}, []);
return (
<div>
<form className={styles.search} onSubmit={onSearchSubmit}>
<InputText title="Поиск" value={search} handler={setSearch} />
</form>
<div className={styles.grid}>
<div className={styles.grid_label}>
<span>Что нового?</span>
</div>
{updated &&
updated.slice(0, 20).map(node => (
<Link key={node.id} className={styles.item} to={URLS.NODE_URL(node.id)}>
<div
className={classNames(styles.thumb, styles.new)}
style={{
backgroundImage: `url("${getURL({ url: node.thumbnail }, PRESETS.avatar)}")`,
}}
/>
<div className={styles.info}>
<div className={styles.title}>{node.title}</div>
<div className={styles.comment}>{getPrettyDate(node.created_at)}</div>
</div>
</Link>
))}
{recent &&
recent.slice(0, 20).map(node => (
<Link key={node.id} className={styles.item} to={URLS.NODE_URL(node.id)}>
<div className={styles.thumb}>
<NodeRelatedItem item={node} />
</div>
<div className={styles.info}>
<div className={styles.title}>{node.title}</div>
<div className={styles.comment}>{getPrettyDate(node.created_at)}</div>
</div>
</Link>
))}
</div>
</div>
<div className={styles.grid}>
{updated &&
updated.slice(0, 20).map(node => (
<Link key={node.id} className={styles.item} to={URLS.NODE_URL(node.id)}>
<div
className={classNames(styles.thumb, styles.new)}
style={{
backgroundImage: `url("${getURL({ url: node.thumbnail }, PRESETS.avatar)}")`,
}}
/>
<div className={styles.info}>
<div className={styles.title}>{node.title}</div>
<div className={styles.comment}>{getPrettyDate(node.created_at)}</div>
</div>
</Link>
))}
{recent &&
recent.slice(0, 20).map(node => (
<Link key={node.id} className={styles.item} to={URLS.NODE_URL(node.id)}>
<div className={styles.thumb}>
<NodeRelatedItem item={node} />
</div>
<div className={styles.info}>
<div className={styles.title}>{node.title}</div>
<div className={styles.comment}>{getPrettyDate(node.created_at)}</div>
</div>
</Link>
))}
</div>
</div>
);
);
};
export { FlowRecent };

9
src/components/flow/FlowRecent/styles.scss
View file

@ -5,12 +5,19 @@
flex: 1;
background: $content_bg;
padding: $gap;
border-radius: 0 0 $radius $radius;
@include outer_shadow();
}
.grid_label {
margin-bottom: $gap;
@include title_with_line();
color: transparentize(white, $amount: 0.8);
}
.search {
background: lighten($content_bg, 3%);
background: lighten($content_bg, 4%);
border-radius: $radius $radius 0 0;
padding: $gap;