From 58438c18f6a7225da7d67a235c1ade24ad913493 Mon Sep 17 00:00:00 2001
From: mildrrnt <woranita888@gmail.com>
Date: Fri, 12 Jan 2024 03:45:28 +0700
Subject: [PATCH] feat: tap to continue

---
 src/components/story/Tap.tsx | 24 ++++++++++++++++++++++++
 src/pages/story/3.astro      |  4 +++-
 src/pages/story/4.astro      |  7 +++++++
 3 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 src/components/story/Tap.tsx
 create mode 100644 src/pages/story/4.astro

diff --git a/src/components/story/Tap.tsx b/src/components/story/Tap.tsx
new file mode 100644
index 0000000..f5d3cc8
--- /dev/null
+++ b/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;
diff --git a/src/pages/story/3.astro b/src/pages/story/3.astro
index 388192b..1565cb1 100644
--- a/src/pages/story/3.astro
+++ b/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>
diff --git a/src/pages/story/4.astro b/src/pages/story/4.astro
new file mode 100644
index 0000000..1c70771
--- /dev/null
+++ b/src/pages/story/4.astro
@@ -0,0 +1,7 @@
+---
+import BaseLayout from "../../layouts/BaseLayout.astro";
+---
+
+<BaseLayout>
+  <h1 class="text-3xl">Well done!</h1>
+</BaseLayout>