Merge pull request #9 from itk-dev/feature/about-box

SALG-1278: Add about box on front

Author: jeppekroghitk

src/components/points-of-interest/PointOfInterest.jsx

@@ -85,7 +85,6 @@ function PointOfInterest({
     if (isExperienceIdInLocalstorage()) {
       setUnlocked(true);
     }
-
   }, []);
 
   return (
@@ -146,18 +145,6 @@ function PointOfInterest({
           {!unlocked && <div>Lås op ved at gå tættere på</div>}
         </div>
       </div>
-      {unlocked && (
-        <button type="button" onClick={() => setSource(podcast)}>
-          Play
-        </button>
-      )}
-      {unlocked && (
-        <button type="button" onClick={() => setViewSubtitles(!viewSubtitles)}>
-          Se tekst
-        </button>
-      )}
-      {!unlocked && <div>kan ikke tilgås</div>}
-      {viewSubtitles && <div>{subtitles}</div>}
       {unlocked && IFrameUrl && <PodcastWrapper IFrameUrl={IFrameUrl} />}
     </div>
   );

src/components/tags/Tag.jsx

@@ -5,11 +5,11 @@ function Tag({ name, numberOfRoutes, id }) {
   if (numberOfRoutes === 0) return null;
   return (
     <Link
-      className="block bg-emerald-500 mb-3 rounded-md p-3"
+      className="block bg-emerald-400 dark:bg-emerald-800 mb-3 rounded-md p-3"
       to={`/tag/${id}`}
     >
       <span className="block text-lg font-bold">{name}</span>
-      <span className="text-s text-zinc-600">{numberOfRoutes} historier</span>
+      <span className="text-s text-zinc-600 dark:text-zinc-300">{numberOfRoutes} historier</span>
     </Link>
   );
 }

src/components/tags/TagsList.jsx

@@ -1,10 +1,12 @@
 import { React, useEffect, useState } from "react";
 import useFetch from "../../util/useFetch";
 import Tag from "./Tag";
+import { ReactComponent as Xmark } from "../../icons/xmark-solid.svg";
 
 function TagsList() {
   const [tags, setTags] = useState(null);
   const { data } = useFetch(`tags`);
+  const [viewAbout, setViewAbout] = useState(false);
 
   useEffect(() => {
     if (data) {
@@ -16,10 +18,47 @@ function TagsList() {
 
   return (
     <div>
-      <h1 className="mb-3">Kategorier</h1>
+      <h1 className="mb-3 text-lg font-bold">Kategorier</h1>
       {tags.map(({ name, routes, id }) => (
         <Tag key={name} numberOfRoutes={routes.length} name={name} id={id} />
       ))}
+
+      <div className="fixed left-3 bottom-3 right-3 bg-sky-400 dark:bg-sky-900 flex flex-col gap-3 rounded-lg p-3">
+        {!viewAbout && (
+          <div>
+            <h2 className="mb-2 font-bold">Hvordan fungere podwalk?</h2>
+            <button
+              className="py-1 px-4 rounded text-zinc-800 bg-zinc-100 flex-auto"
+              type="button"
+              onClick={() => setViewAbout(!viewAbout)}
+            >
+              Se vejledning
+            </button>
+          </div>
+        )}
+        {viewAbout && (
+          <div id="description">
+            <button
+              className="p-1 rounded text-zinc-800 bg-zinc-100 float-right ml-1 mb-1"
+              type="button"
+              onClick={() => setViewAbout(!viewAbout)}
+            >
+              <Xmark className="h-6 w-6 text-zinc-800" />
+            </button>
+            <div className="flex flex-col gap-2">
+              <p>Vælg først en kategori på listen herover.</p>
+              <p>Vælg derefter den ønskede rute.</p>
+              <p>Gå hen til første del af ruten og der kan du starte afspilningen.</p>
+              <p>
+                Lyt til vejledningen eller brug navigations pilen i bunden af
+                rute visningen til at komme til næste punkt.
+                Husk at være opmærksom på dine opgivelser.
+              </p>
+              <p>God fornøjelse med din podwalk.</p>
+            </div>
+          </div>
+        )}
+      </div>
     </div>
   );
 }