johannes-hernehult
ab2029384b
- Add programmatic navigation to the guide view after successful form submission. - Add class names and layout styling for header, navigation sidebar, and action buttons. - Update Guide view print layout.
42 lines
979 B
TypeScript
42 lines
979 B
TypeScript
import "./styles/reset.css";
|
|
import "./styles/App.css";
|
|
import { Outlet } from "react-router";
|
|
import { Link } from "react-router";
|
|
import { useGuides } from "./lib/contexts/guide.context";
|
|
|
|
function App() {
|
|
const { guides } = useGuides();
|
|
|
|
return (
|
|
<>
|
|
<header>
|
|
<h1 className="main-title">
|
|
<Link to="/">SnapSteps</Link>
|
|
</h1>
|
|
<nav>
|
|
<Link className="create-new-guide-btn" to="/new-guide">
|
|
Create New Guide
|
|
</Link>
|
|
|
|
<h2>Guides</h2>
|
|
<ul className="guide-list">
|
|
{guides.map((guide) => (
|
|
<li key={guide.id}>
|
|
<Link to={`/guide/${guide.id}`}>{guide.title}</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<Link to="/settings">Settings</Link>
|
|
</nav>
|
|
</header>
|
|
|
|
<main>
|
|
<Outlet />
|
|
</main>
|
|
|
|
<footer>SnapSteps © {new Date().getFullYear()}</footer>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default App;
|