45 lines
1.1 KiB
Text
45 lines
1.1 KiB
Text
import React, { useEffect, useState } from "react";
|
|
|
|
function AppGrid() {
|
|
const [apps, setApps] = useState([]);
|
|
|
|
useEffect(() => {
|
|
fetch("/apps")
|
|
.then(res => res.json())
|
|
.then(data => setApps(data));
|
|
}, []);
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
display: "grid",
|
|
gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))",
|
|
gap: "10px",
|
|
padding: "10px"
|
|
}}
|
|
>
|
|
{apps.map(app => (
|
|
<div
|
|
key={app.name}
|
|
style={{
|
|
textAlign: "center",
|
|
cursor: "pointer",
|
|
padding: "10px" // niente border
|
|
}}
|
|
onClick={() => window.open(`http://${app.host}:${app.port}`, "_blank")}
|
|
>
|
|
{/* Icona grande il doppio */}
|
|
<img
|
|
src={app.icon}
|
|
alt={app.name}
|
|
style={{ width: "80px", height: "80px", objectFit: "contain" }}
|
|
/>
|
|
{/* Nome sotto l'icona */}
|
|
<div style={{ fontWeight: "bold", marginTop: "8px" }}>{app.name}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default AppGrid;
|