Тимур Городецкий
40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import * as React from 'react';
|
||
import styles from './RequestGrid.module.scss';
|
||
import { Icon } from '../../shared/ui/Icon/Icon';
|
||
import { IRequestType } from '../../models/types';
|
||
|
||
interface IRequestGridProps {
|
||
requests: IRequestType[];
|
||
onSelect: (request: IRequestType) => void;
|
||
}
|
||
|
||
export const RequestGrid: React.FC<IRequestGridProps> = ({ requests, onSelect }) => {
|
||
if (requests.length === 0) {
|
||
return <p className={styles.empty}>В этой категории пока нет заявок.</p>;
|
||
}
|
||
|
||
return (
|
||
<div className={styles.grid}>
|
||
{requests.map((request) => (
|
||
<button
|
||
key={request.id}
|
||
type="button"
|
||
className={styles.tile}
|
||
onClick={() => onSelect(request)}
|
||
>
|
||
<span className={styles.tileIcon}>
|
||
<Icon name={request.icon} />
|
||
</span>
|
||
<span className={styles.tileBody}>
|
||
<span className={styles.tileTitle}>{request.title}</span>
|
||
{request.description && <span className={styles.tileDesc}>{request.description}</span>}
|
||
</span>
|
||
<span className={styles.tileArrow}>
|
||
<Icon name="chevron-right" size="sm" />
|
||
</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
);
|
||
};
|