johannes-hernehult
4145cec102
* Extract inline guide frames into a reusable Frame component * Update step elements to use proper ordered lists (<ol> and <li>) * Move related image and list styling to Frame.css
39 lines
1 KiB
TypeScript
39 lines
1 KiB
TypeScript
import "./Guide.css";
|
|
import { useParams, Link } from "react-router";
|
|
import { useGuides } from "../../../lib/contexts/guide.context";
|
|
import useGuide from "../hooks/useGuide";
|
|
import Frame from "../../../components/frame/Frame";
|
|
|
|
export default function Guide() {
|
|
const { id } = useParams();
|
|
const { guides } = useGuides();
|
|
const { deleteGuide, exportGuide } = useGuide();
|
|
const guide = guides.find((g) => g.id === id);
|
|
|
|
if (!guide) return null;
|
|
|
|
return (
|
|
<div className="guide">
|
|
<h1>{guide.title}</h1>
|
|
<p>{guide.description}</p>
|
|
|
|
<hr />
|
|
|
|
<div className="guide__frames">
|
|
{guide.frames.map((frame, index) => (
|
|
<Frame key={index} frame={frame} />
|
|
))}
|
|
</div>
|
|
|
|
<button className="delete-button" onClick={() => deleteGuide(guide.id)}>
|
|
Delete
|
|
</button>
|
|
<Link className="edit-button" to={`/edit-guide/${guide.id}`}>
|
|
Edit
|
|
</Link>
|
|
<button className="export-button" onClick={exportGuide}>
|
|
Export PDF
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|