41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import React, { useCallback } from "react";
|
|
import classes from "./classes.module.scss";
|
|
import Typography, { ITypo } from "../Typography";
|
|
import ChevronIcon from "@Assets/Icons/chevron.svg";
|
|
import Image from "next/image";
|
|
|
|
export type IBlock = {
|
|
name: string;
|
|
id: string;
|
|
selected: boolean;
|
|
};
|
|
|
|
type IProps = {
|
|
blocks: IBlock[];
|
|
onSelectedBlock: (block: IBlock) => void;
|
|
};
|
|
export default function BlockList({ blocks, onSelectedBlock }: IProps) {
|
|
const selectBlock = useCallback(
|
|
(e: React.MouseEvent<HTMLDivElement>) => {
|
|
onSelectedBlock && onSelectedBlock(blocks.find((folder) => folder.id === e.currentTarget.id)!);
|
|
},
|
|
[blocks, onSelectedBlock],
|
|
);
|
|
return (
|
|
<div>
|
|
{blocks.map((folder) => {
|
|
return (
|
|
<div onClick={selectBlock} key={folder.id} id={folder.id}>
|
|
<div className={classes["root"]} data-selected={folder.selected.toString()}>
|
|
<div className={classes["left-side"]}>
|
|
<Typography typo={ITypo.P_16}>{folder.name}</Typography>
|
|
</div>
|
|
<Image alt="chevron" src={ChevronIcon} />
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|