71 lines
1.8 KiB
TypeScript
71 lines
1.8 KiB
TypeScript
import { useState } from 'react';
|
||
import type { GridMap } from '../types';
|
||
import './MapList.css';
|
||
|
||
interface Props {
|
||
maps: GridMap[];
|
||
selectedMapId: string | null;
|
||
onSelect: (id: string) => void;
|
||
onCreate: (name: string) => void;
|
||
onDelete: (id: string) => void;
|
||
}
|
||
|
||
export default function MapList({ maps, selectedMapId, onSelect, onCreate, onDelete }: Props) {
|
||
const [newName, setNewName] = useState('');
|
||
|
||
function handleCreate(e: React.FormEvent) {
|
||
e.preventDefault();
|
||
const name = newName.trim();
|
||
if (!name) return;
|
||
onCreate(name);
|
||
setNewName('');
|
||
}
|
||
|
||
function handleDeleteClick(e: React.MouseEvent, id: string) {
|
||
e.stopPropagation();
|
||
if (confirm('Delete this map? This cannot be undone.')) {
|
||
onDelete(id);
|
||
}
|
||
}
|
||
|
||
return (
|
||
<aside className="map-list">
|
||
<div className="map-list-header">
|
||
<h2>Maps</h2>
|
||
</div>
|
||
|
||
<form className="map-create-form" onSubmit={handleCreate}>
|
||
<input
|
||
type="text"
|
||
placeholder="New map name…"
|
||
value={newName}
|
||
onChange={e => setNewName(e.target.value)}
|
||
/>
|
||
<button type="submit" disabled={!newName.trim()}>+</button>
|
||
</form>
|
||
|
||
<ul className="map-entries">
|
||
{maps.length === 0 && (
|
||
<li className="map-empty">No maps yet</li>
|
||
)}
|
||
{maps.map(map => (
|
||
<li
|
||
key={map.id}
|
||
className={`map-entry ${map.id === selectedMapId ? 'selected' : ''}`}
|
||
onClick={() => onSelect(map.id)}
|
||
>
|
||
<span className="map-name">{map.name}</span>
|
||
<button
|
||
className="map-delete"
|
||
onClick={e => handleDeleteClick(e, map.id)}
|
||
title="Delete map"
|
||
>
|
||
Delete️
|
||
</button>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</aside>
|
||
);
|
||
}
|