diff --git a/src/features/guides/hooks/useGuide.ts b/src/features/guides/hooks/useGuide.ts new file mode 100644 index 0000000..325760a --- /dev/null +++ b/src/features/guides/hooks/useGuide.ts @@ -0,0 +1,22 @@ +import { useIDB } from "../../../lib/contexts/dbinit.context"; +import { useGuides } from "../../../lib/contexts/guide.context"; + +export default function useGuide() { + const { setGuides } = useGuides(); + const { db } = useIDB(); + + const deleteGuide = (id: string) => { + if (!db) return; + db.delete("guides", id); + setGuides((guides) => guides.filter((guide) => guide.id !== id)); + }; + + const exportGuide = () => { + window.print(); + }; + + return { + deleteGuide, + exportGuide, + }; +} diff --git a/src/features/guides/routes/Guide.css b/src/features/guides/routes/Guide.css new file mode 100644 index 0000000..e9905fd --- /dev/null +++ b/src/features/guides/routes/Guide.css @@ -0,0 +1,4 @@ +@media print { + .guide { + } +} diff --git a/src/features/guides/routes/Guide.tsx b/src/features/guides/routes/Guide.tsx index 3c8e6af..b92c7f0 100644 --- a/src/features/guides/routes/Guide.tsx +++ b/src/features/guides/routes/Guide.tsx @@ -1,10 +1,38 @@ import { useParams } from "react-router"; +import { useGuides } from "../../../lib/contexts/guide.context"; +import useGuide from "../hooks/useGuide"; 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 ( -
-

Guide {id}

+
+

{guide.title}

+

{guide.description}

+ +
+ {guide.frames.map((frame, index) => ( +
+

{frame.title}

+ {frame.title} + +
    + {frame.steps.map((step, stepIndex) => ( +
  1. {step.text}
  2. + ))} +
+
+ ))} +
+ + + +
); } diff --git a/src/styles/App.css b/src/styles/App.css index 8715e74..ab718b6 100644 --- a/src/styles/App.css +++ b/src/styles/App.css @@ -85,3 +85,11 @@ textarea { :focus-visible { border-color: #ff7700 !important; } + +@media print { + header, + footer, + button { + display: none; + } +}