Add tracking page

5 files changed, 115 insertions, 7 deletions

diff --git a/src/app/components/Header.tsx b/src/app/components/Header.tsx
new file mode 100644
index 0000000..56bf984
--- /dev/null
+++ b/src/app/components/Header.tsx
@@ -0,0 +1,17 @@
+interface HeaderProps {
+    title: string;
+    description: string;
+}
+
+const Header = ({title, description}: HeaderProps) => {
+    return (
+        <div className="bg-center bg-no-repeat bg-[url('/jumbotron.webp')] bg-gray-700 bg-blend-multiply">
+            <div className="md:px-40 px-10 max-w-screen-xl text-left py-24 lg:py-10 space-y-3">
+                <h1 className="font-medium text-4xl">{title}</h1>
+                <h2 className="font-light text-lg">{description}</h2>
+            </div>
+        </div>
+    )
+}
+
+export default Header;
\ No newline at end of file
diff --git a/src/app/components/Navbar.tsx b/src/app/components/Navbar.tsx
index ca9591e..f8a5f99 100644
--- a/src/app/components/Navbar.tsx
+++ b/src/app/components/Navbar.tsx
@@ -9,7 +9,7 @@ const Navbar = () => {
       <nav className="border-gray-200 bg-neutral-900">
           <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-3">
               <div className="flex items-center">
-                  <Image src="/alure-post.svg" className="mr-5" alt="Alure Flag" width={50} height={50}/>
+                  <Image src="/alure-post.svg" className="mr-4" alt="Alure Flag" width={50} height={50}/>
                   <span className="self-center text-2xl font-medium whitespace-nowrap dark:text-white"><p>Alure Post</p></span>
               </div>
               <button data-collapse-toggle="navbar-default" type="button"
@@ -26,8 +26,8 @@ const Navbar = () => {
                   <ul className="font-medium text-lg flex flex-col p-4 md:p-0 mt-4 rounded-lg md:flex-row md:space-x-8 md:mt-0">
                       {[
                           ['Home', '/'],
-                          ['Track', '/updates'],
-                          ['Send', '/enterprises'],
+                          ['Track', '/track'],
+                          ['Send', '/send'],
 
                       ].map(([title, url]) => (
                           <li key={title}>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index e0733a5..455182e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,10 +1,10 @@
 export default function Home() {
   return (
-    <div className="">
+    <div>
       <h1>Track a post</h1>
-      <form>
-        <input type="text" placeholder="Tracking Number" />
-        <button type="button">Track</button>
+      <form action="/track">
+        <input type="text" name="trackingNumber" placeholder="Tracking Number" />
+        <button type="submit">Track</button>
       </form>
     </div>
   );
diff --git a/src/app/track/page.tsx b/src/app/track/page.tsx
new file mode 100644
index 0000000..b4978f3
--- /dev/null
+++ b/src/app/track/page.tsx
@@ -0,0 +1,80 @@
+'use client';
+import { useEffect, useState } from 'react'
+import Search from './url'
+import Header from '../components/Header'
+
+interface TrackData {
+    sender: string;
+    receiver: string;
+    express: boolean;
+    signature: boolean;
+    abandon: boolean;
+    delivered: boolean
+    country_code: string;
+    handler: string;
+    history: { info: string, location: string, time: string }[];
+}
+
+export default function Track() {
+    const [data, setData] = useState<TrackData | null>(null);
+    const params = Search();
+    useEffect(() => {
+            async function fetchData() {
+                if (params == null) return;
+
+                const res = await fetch(`https://haystack-khaki.vercel.app/api/pkg/${params}`);
+                const json = await res.json();
+
+                setData(json);
+            }
+            fetchData();
+        }, [params]);
+    return (
+        <>
+            <Header title="Track" description="Tracking your packages" />
+            <div className="sm:px-40 px-10 py-5 bg-zinc-800">
+                <form action="/track">
+                    <div className="flex flex-row gap-1">
+                        <input type="text" name="trackingNumber" className="border py-2 px-2 rounded-md" placeholder="Tracking Number" />
+                        <button type="submit" className="px-5 py-2 bg-blue-600 hover:bg-blue-500 active:bg-blue-700 rounded-md">Track</button>
+                    </div>
+                </form>
+                {params ? (
+                    data ? (
+                        <div className="pt-5">
+                            {!data.abandon && !data.delivered && (
+                              <div className="p-3 bg-gray-700 rounded-sm">Package is in transit</div>
+                            )}
+                            {data.signature && (
+                              <div className="p-3 bg-yellow-800 rounded-sm">Signature is required when the package arrive</div>
+                            )}
+                            {data.abandon && (
+                              <div className="p-3 bg-red-800 rounded-sm">Package has been abandoned</div>
+                            )}
+                            {data.delivered && (
+                                <div className="p-3 bg-green-700 rounded-sm">Package has delivered</div>
+                            )}
+                            <div className="p-3 bg-sky-800 rounded-sm">
+                                <h1 className="text-xl">Origin: {data.sender}</h1>
+                                <h1 className="text-xl">Delivering to: {data.receiver}</h1>
+                            </div>
+                            <h1 className="text-lg">Delivery progress</h1>
+                            <div className="flex flex-col gap-1">
+                            {[...data.history]
+                                    .sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime())
+                                    .map((history, idx) => (
+                                        <div key={idx}>
+                                            <div>{history.info}</div>
+                                            <div>{history.location}</div>
+                                            <div>{new Date(history.time).toLocaleString()}</div>
+                                        </div>
+                                    ))}
+                            </div>
+
+                        </div>
+                    ) : "Loading..."
+                ) : null}
+            </div>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/app/track/url.tsx b/src/app/track/url.tsx
new file mode 100644
index 0000000..c4a6138
--- /dev/null
+++ b/src/app/track/url.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import { useSearchParams } from 'next/navigation'
+
+export default function Search() {
+    const searchParams = useSearchParams();
+
+    const search = searchParams.get('trackingNumber');
+
+    return search
+}