41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import axios from "axios";
|
|
import { Link } from "react-router-dom";
|
|
|
|
function Practicals() {
|
|
const [tps, setTps] = useState([]);
|
|
|
|
useEffect(() => {
|
|
axios.get("/api/tps").then((res) => {
|
|
setTps(res.data);
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<div className="container mx-auto py-10">
|
|
<h1 className="text-3xl font-bold mb-6 text-center">Your TPs</h1>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{tps.map((practical) => (
|
|
<div
|
|
key={practical.id}
|
|
className="card card-compact bg-base-200 shadow-lg p-4"
|
|
>
|
|
<div className="card-body">
|
|
<h2 className="card-title">{practical.name}</h2>
|
|
<p>{practical.description}</p>
|
|
<p className="text-sm text-gray-500">Respo: {practical.respo}</p>
|
|
<div className="card-actions justify-end">
|
|
<Link to={`/tps/${practical.id}`} className="btn btn-primary">
|
|
Learn More
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Practicals;
|