2022-01-19 06:06:19 +00:00
|
|
|
import React from "react";
|
2022-01-24 05:59:36 +00:00
|
|
|
import { useRouter } from "next/router";
|
2022-01-16 07:26:17 +00:00
|
|
|
|
2022-01-19 06:06:19 +00:00
|
|
|
import CellData from "./CellData";
|
2022-01-16 07:26:17 +00:00
|
|
|
import styles from "../styles/Sidebar.module.css";
|
|
|
|
|
2022-01-19 06:06:19 +00:00
|
|
|
interface Cell {
|
|
|
|
x: number;
|
|
|
|
y: number;
|
|
|
|
form_id: number;
|
|
|
|
}
|
|
|
|
|
2022-01-16 07:26:17 +00:00
|
|
|
type Props = {
|
2022-01-24 05:59:36 +00:00
|
|
|
selectedCell: { x: number; y: number } | null;
|
|
|
|
clearSelectedCell: () => void;
|
2022-01-16 07:26:17 +00:00
|
|
|
map: React.MutableRefObject<mapboxgl.Map | null>;
|
|
|
|
};
|
|
|
|
|
2022-01-24 05:59:36 +00:00
|
|
|
const Sidebar: React.FC<Props> = ({ selectedCell, clearSelectedCell, map }) => {
|
|
|
|
const router = useRouter();
|
|
|
|
|
2022-01-16 07:26:17 +00:00
|
|
|
const onClose = () => {
|
2022-01-24 05:59:36 +00:00
|
|
|
clearSelectedCell();
|
2022-01-19 06:06:19 +00:00
|
|
|
};
|
2022-01-16 07:26:17 +00:00
|
|
|
|
2022-01-24 05:59:36 +00:00
|
|
|
if (selectedCell) {
|
|
|
|
return (
|
2022-01-19 06:06:19 +00:00
|
|
|
<div className={styles.sidebar}>
|
|
|
|
<button className={styles.close} onClick={onClose}>
|
|
|
|
✖
|
|
|
|
</button>
|
|
|
|
<h1>
|
2022-01-24 05:59:36 +00:00
|
|
|
Cell {selectedCell.x}, {selectedCell.y}
|
2022-01-19 06:06:19 +00:00
|
|
|
</h1>
|
|
|
|
{selectedCell && <CellData selectedCell={selectedCell} />}
|
|
|
|
</div>
|
2022-01-24 05:59:36 +00:00
|
|
|
);
|
|
|
|
} else if (router.query.mod) {
|
|
|
|
return (
|
|
|
|
<div className={styles.sidebar}>
|
|
|
|
<button className={styles.close} onClick={onClose}>
|
|
|
|
✖
|
|
|
|
</button>
|
|
|
|
<h1>Mod {router.query.mod}</h1>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
return null;
|
|
|
|
}
|
2022-01-16 07:26:17 +00:00
|
|
|
};
|
|
|
|
|
2022-01-19 06:06:19 +00:00
|
|
|
export default Sidebar;
|