56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import axios from "axios";
|
|
import { Link } from "react-router-dom";
|
|
import { Instance } from "../type/InstanceType";
|
|
|
|
function Instances() {
|
|
const [instances, setInstances] = useState([]);
|
|
|
|
useEffect(() => {
|
|
axios.get("/api/instances").then((res) => {
|
|
setInstances(res.data);
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<div className="container mx-auto py-10">
|
|
<h1 className="text-3xl font-bold mb-6 text-center">Your instances</h1>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{instances.map((instance: Instance) => (
|
|
<div
|
|
key={instance.id}
|
|
className="card card-compact bg-base-200 shadow-lg p-4"
|
|
>
|
|
<div className="card-body">
|
|
<h2 className="card-title">{instance.name}</h2>
|
|
{instance.tp && (
|
|
<p className="text-lg">Linked to: {instance.tp.name}</p>
|
|
)}
|
|
<div className="card-actions justify-end">
|
|
{false && (
|
|
<Link
|
|
to={`/instances/${instance.id}`}
|
|
className="btn btn-primary"
|
|
>
|
|
Learn More
|
|
</Link>
|
|
)}
|
|
{instance.tp && (
|
|
<Link
|
|
to={`/tps/${instance.tp.id}`}
|
|
className="btn btn-primary"
|
|
>
|
|
See TP
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Instances;
|