38 lines
1,017 B
JavaScript
38 lines
1,017 B
JavaScript
|
import Image from "next/image";
|
||
|
|
import styles from "../styles/Components.module.css";
|
||
|
|
|
||
|
|
export default function BorderImage(props) {
|
||
|
|
const { key, border, selected, size, onSelect, customImage } = props;
|
||
|
|
|
||
|
|
const imageSize = size || 128;
|
||
|
|
|
||
|
|
const classNames = [
|
||
|
|
styles.borderKeeper,
|
||
|
|
selected == border.id ? styles.selected : undefined,
|
||
|
|
].join(" ");
|
||
|
|
return (
|
||
|
|
<div className={classNames} key={key}>
|
||
|
|
<Image
|
||
|
|
className={styles.userImage}
|
||
|
|
src={customImage || "/user.png"}
|
||
|
|
alt="user image"
|
||
|
|
width={imageSize}
|
||
|
|
height={imageSize}
|
||
|
|
onClick={(ev) => {
|
||
|
|
onSelect && onSelect(border.id);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<Image
|
||
|
|
className={styles.borderImage}
|
||
|
|
src={`/images/${border.imageName}`}
|
||
|
|
alt={`border with id ${border.id}`}
|
||
|
|
width={Math.floor(imageSize * 1.03125)}
|
||
|
|
height={Math.floor(imageSize * 1.03125)}
|
||
|
|
onClick={(ev) => {
|
||
|
|
onSelect && onSelect(border.id);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|