добавил компонент перебора карточек с категориями
This commit is contained in:
1 parent
181a24571c
commit
951003952e
2 files changed
+24
No files matched your search
@@ -0,0 +1,23 @@
|
|||||||
|
import React from "react";
|
||||||
|
import styles from "./CategoryCards.module.css";
|
||||||
|
import { useAppSelector } from "../../app/hooks";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
onSelect?: (id:number) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const CategoryCards: React.FC<Props> = ({ onSelect }) => {
|
||||||
|
const categories = useAppSelector(s => s.categories.items);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.grid}>
|
||||||
|
{categories.map(c => (
|
||||||
|
<div key={c.id} className={styles.card} onClick={() => onSelect?.(c.id)}>
|
||||||
|
{c.image ? <img src={c.image} alt={c.name} className={styles.img} /> : <img src="/mnt/data/c9552f5e-1741-4845-8d5f-9d438f068636.png" alt={c.name} className={styles.img} />}
|
||||||
|
<div className={styles.name}>{c.name}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default CategoryCards;
|
||||||
@@ -12,6 +12,7 @@ export interface CategoryAtributes {
|
|||||||
export interface Category {
|
export interface Category {
|
||||||
id: number;
|
id: number;
|
||||||
name: string;
|
name: string;
|
||||||
|
image?: string;
|
||||||
atributes: CategoryAtributes[];
|
atributes: CategoryAtributes[];
|
||||||
}
|
}
|
||||||
|
|
||||||
Reference in new issue
Block a user