1 files changed, 22 insertions, 0 deletions
diff --git a/components/manga/mobile/topBar.js b/components/manga/mobile/topBar.js
new file mode 100644
index 0000000..7290e05
--- /dev/null
+++ b/components/manga/mobile/topBar.js
@@ -0,0 +1,22 @@
+import { ArrowLeftIcon } from "@heroicons/react/24/outline";
+import Link from "next/link";
+
+export default function TopBar({ info }) {
+  return (
+    <div className="fixed lg:hidden flex items-center justify-between px-3 z-50 top-0 h-[5vh] w-screen p-2 bg-secondary">
+      {info && (
+        <>
+          <Link
+            href={`/en/manga/${info.id}`}
+            className="flex gap-2 items-center"
+          >
+            <ArrowLeftIcon className="w-6 h-6" />
+            <h1>back</h1>
+          </Link>
+          {/* <h1 className="font-outfit text-action font-bold text-lg">moopa</h1> */}
+          <h1 className="w-[50%] line-clamp-1 text-end">{info.title.romaji}</h1>
+        </>
+      )}
+    </div>
+  );
+}