44 lines
1.2 KiB
JavaScript
44 lines
1.2 KiB
JavaScript
import Image from "next/image";
|
|
import styles from "../styles/Components.module.css";
|
|
|
|
export default function Select(props) {
|
|
const { data, onSelect, selected = {} } = props;
|
|
console.log("data", data, "selected", selected);
|
|
return (
|
|
<div className={styles.select}>
|
|
{data &&
|
|
data.map((border, index) => {
|
|
return (
|
|
<div
|
|
className={[
|
|
styles.borderKeeper,
|
|
selected == border.id ? styles.selected : undefined,
|
|
].join(" ")}
|
|
key={border.id}>
|
|
<Image
|
|
className={styles.userImage}
|
|
src="/user.png"
|
|
alt="user image"
|
|
width={128}
|
|
height={128}
|
|
onClick={(ev) => {
|
|
onSelect(border.id);
|
|
}}
|
|
/>
|
|
<Image
|
|
className={styles.borderImage}
|
|
src={`/images/${border.imageName}`}
|
|
alt={`border with id ${border.id}`}
|
|
width={132}
|
|
height={132}
|
|
onClick={(ev) => {
|
|
onSelect(border.id);
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|