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 IFolder = {
|
|
name: string;
|
|
id: string;
|
|
selected: boolean;
|
|
};
|
|
|
|
type IProps = {
|
|
list: IFolder[];
|
|
onSelectedFolder: (block: IFolder) => void;
|
|
};
|
|
export default function FolderList({ list, onSelectedFolder }: IProps) {
|
|
const selectFolder = useCallback(
|
|
(e: React.MouseEvent<HTMLDivElement>) => {
|
|
onSelectedFolder && onSelectedFolder(list.find((folder) => folder.id === e.currentTarget.id)!);
|
|
},
|
|
[list, onSelectedFolder],
|
|
);
|
|
return (
|
|
<div>
|
|
{list.map((folder) => {
|
|
return (
|
|
<div onClick={selectFolder} 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>
|
|
);
|
|
}
|