feat: tap to continue

src/components/story/Tap.tsx

@@ -0,0 +1,24 @@
+interface Props {
+  redirect: string;
+}
+
+const Tap = ({ redirect }: Props) => {
+  const handleEvents = () => {
+    location.href = redirect;
+  };
+
+  return (
+    <div
+      className="absolute my-auto h-full w-full opacity-50 hover:cursor-pointer"
+      onTouchEnd={handleEvents}
+    >
+      <p className="absolute bottom-72 right-8 text-center font-medium">
+        Tap to
+        <br />
+        continue
+      </p>
+    </div>
+  );
+};
+
+export default Tap;

src/pages/story/3.astro

@@ -1,7 +1,9 @@
 ---
 import BaseLayout from "../../layouts/BaseLayout.astro";
+import Tap from "../../components/story/Tap";
 ---
 
 <BaseLayout>
-  <h1 class="text-3xl">Well done!</h1>
+  นี่คือหน้าเปล่าที่แตะแล้วไปต่อได้
+  <Tap client:load redirect="./4" />
 </BaseLayout>

src/pages/story/4.astro

@@ -0,0 +1,7 @@
+---
+import BaseLayout from "../../layouts/BaseLayout.astro";
+---
+
+<BaseLayout>
+  <h1 class="text-3xl">Well done!</h1>
+</BaseLayout>