feat: implement sticky on ticker page

src/app/(input)/error.tsx

@@ -0,0 +1,26 @@
+"use client";
+import Image from "next/image";
+import { Button } from "@/components/common/button/button";
+import { useRouter } from "next/navigation";
+import ErrorImage from "@/app/(main)/_assets/error.png";
+
+export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  const router = useRouter();
+
+  const handleButtonClick = () => {
+    router.replace("/");
+  };
+
+  return (
+    <div className="flex size-full flex-col items-center justify-center gap-6">
+      <Image src={ErrorImage} alt="Error Occurred" width={160} height={160} />
+      <div className="flex flex-col items-center">
+        <h2 className=" text-h5 text-grey-900">Something went wrong!</h2>
+        <h2 className=" text-h5 text-grey-900">Please Try Again</h2>
+      </div>
+      <Button className="rounded-lg" variant={"primary"} size={"fit"} onClick={handleButtonClick}>
+        Go To Home
+      </Button>
+    </div>
+  );
+}

src/app/(input)/layout.tsx

@@ -0,0 +1,23 @@
+import { Viewport } from "next";
+import Link from "next/link";
+import React from "react";
+import Logo from "@/components/common/logo/logo";
+
+export const viewport: Viewport = {
+  themeColor: "var(--color-white)",
+};
+
+const InputLayout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div className="flex size-full flex-col">
+      <div className="sticky top-0 z-10 flex h-11 w-full shrink-0 items-center justify-start bg-white px-5">
+        <Link href="/">
+          <Logo />
+        </Link>
+      </div>
+      <div className="h-[calc(100%-50px)] w-full">{children}</div>
+    </div>
+  );
+};
+
+export default InputLayout;

src/app/(main)/ticker/_components/intro.tsx → src/app/(input)/ticker/_components/intro.tsx

@@ -10,11 +10,11 @@ const Intro = () => {
   const hasStock = stocks.length > 0;
 
   return (
-    <div className={`${hasStock && "border-b border-b-grey-100"} sticky top-0 w-full bg-white px-4`}>
-      <h2 className="pt-4 text-h2">
+    <>
+      <h2 className="px-4 pt-4 text-h2">
         You added <span className="text-main-700">{stocks.length}</span> {`${stocks.length > 1 ? "stocks" : "stock"}`}.
       </h2>
-      <div className="flex flex-col justify-start pb-4 pt-10 text-lg">
+      <div className="sticky top-4 flex flex-col justify-start bg-white px-4 pb-4 pt-10 text-lg">
         <Button
           onClick={() => {
             isDrawerOpenChange(true);
@@ -27,7 +27,8 @@ const Intro = () => {
           <p className="text-h5 text-grey-700">Add Stock</p>
         </Button>
       </div>
-    </div>
+      <div className={`${hasStock && "h-px border-b border-b-grey-100"}`} />
+    </>
   );
 };
 

src/app/(main)/ticker/_components/ticker-content.tsx → src/app/(input)/ticker/_components/ticker-content.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import Intro from "@/app/(main)/ticker/_components/intro";
-import { TickerDrawer } from "@/app/(main)/ticker/_components/ticker-drawer";
+import Intro from "@/app/(input)/ticker/_components/intro";
+import { TickerDrawer } from "@/app/(input)/ticker/_components/ticker-drawer";
 import { Dialog } from "@/components/common/dialog/dialog";
 import Toast from "@/components/common/toast/toast";
 import { Stock, useStocksStore } from "@/state/stores/stocks-store";

src/app/(main)/ticker/_components/ticker-list.tsx → src/app/(input)/ticker/_components/ticker-list.tsx

@@ -38,7 +38,7 @@ const TickerList = React.memo(({ data, tickerName, hasShares, onClick }: TickerP
   );
 
   return (
-    <div className="flex h-full w-full flex-1 flex-col items-start overflow-scroll" style={{}}>
+    <div className={`flex h-full w-full flex-1 flex-col items-start ${!hasShares && "overflow-scroll"} `} style={{}}>
       <div className={`flex w-full flex-1 flex-col items-start ${hasShares ? "gap-6 pt-6" : "gap-5 pt-8"} px-4 pb-1`}>
         {data.map((item, index) => (
           <div key={index} className="flex w-full justify-between" onClick={() => onClick(item)}>