Frontend (#4)

* package management page * Finishing package info page * deliverer form --------- Co-authored-by: KPomales <[email protected]>
DePinBox · Jul 13, 2024 · 4f19423 · 4f19423
1 parent f04ba61
commit 4f19423
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 6 deletions.
diff --git a/packages/nextjs/app/deliverer-form/page.tsx b/packages/nextjs/app/deliverer-form/page.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import DelivererForm1 from "~~/components/DelivererForm1";
+import DelivererForm2 from "~~/components/DelivererForm2";
+import PackageInfo from "~~/components/PackageInfo";
+import { Button } from "~~/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~~/components/ui/card";
+
+const PackageInfoPage = () => {
+  return (
+    <div className="container py-3 flex justify-center flex-col items-center min-h-screen">
+      <div className="container py-3 flex justify-center flex-col items-center min-h-screen">
+        <div className="flex">
+          <DelivererForm1 />
+        </div>
+      </div>
+      <div className="container py-3 flex justify-center flex-col items-center min-h-screen">
+        <div className="flex">
+          <DelivererForm2 />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PackageInfoPage;
diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
@@ -70,7 +70,9 @@ const Home: NextPage = () => {
               <p className="text-muted-foreground text-center">
                 Mark a package as delivered and complete the shipment.
               </p>
-              <Button className="text-white">Deliver a Package</Button>
+              <Link href="/deliver-package-info">
+                <Button className="text-white">View Available Package</Button>
+              </Link>
             </CardContent>
           </Card>
           <Card>

diff --git a/packages/nextjs/components/DelivererForm1.tsx b/packages/nextjs/components/DelivererForm1.tsx
@@ -0,0 +1,23 @@
+import { Button } from "~~/components/ui/button";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "~~/components/ui/card";
+import { Input } from "~~/components/ui/input";
+import { Label } from "~~/components/ui/label";
+import { Slider } from "~~/components/ui/slider";
+
+const DelivererForm1 = () => {
+  return (
+    <div className="flex justify-center items-center min-h-screen">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle>Join The Box's delivery network!</CardTitle>
+          <CardDescription className="text-sm text-muted-foreground">
+            Earn bounties for delivering packages in your neighborhood.
+          </CardDescription>
+          <Button>Log In with Worldcoin</Button>
+        </CardHeader>
+      </Card>
+    </div>
+  );
+};
+
+export default DelivererForm1;
diff --git a/packages/nextjs/components/DelivererForm2.tsx b/packages/nextjs/components/DelivererForm2.tsx
@@ -0,0 +1,24 @@
+import { Button } from "~~/components/ui/button";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "~~/components/ui/card";
+import { Input } from "~~/components/ui/input";
+import { Label } from "~~/components/ui/label";
+import { Slider } from "~~/components/ui/slider";
+
+const DelivererForm2 = () => {
+  return (
+    <div className="flex justify-center items-center min-h-screen">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle>Stake to start your delivery!</CardTitle>
+          <CardDescription className="text-sm text-muted-foreground">
+            Stake the required amount of tokens to start your delivery.
+          </CardDescription>
+          <p>Amount to stake: 5 BOX</p>
+          <Button>Stake</Button>
+        </CardHeader>
+      </Card>
+    </div>
+  );
+};
+
+export default DelivererForm2;
diff --git a/packages/nextjs/components/Package-Deliverer-Buttons.tsx b/packages/nextjs/components/Package-Deliverer-Buttons.tsx
@@ -0,0 +1,16 @@
+import Link from "next/link";
+import { Button } from "~~/components/ui/button";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "~~/components/ui/card";
+import { Input } from "~~/components/ui/input";
+import { Label } from "~~/components/ui/label";
+import { Slider } from "~~/components/ui/slider";
+
+const PackageDelivererButtons = () => {
+  return (
+    <div className="grid gap-2">
+      <Button size="lg">Deliver This Item</Button>
+    </div>
+  );
+};
+
+export default PackageDelivererButtons;
diff --git a/packages/nextjs/components/Package-Reciever-Buttons.tsx b/packages/nextjs/components/Package-Reciever-Buttons.tsx
@@ -0,0 +1,18 @@
+import { Button } from "~~/components/ui/button";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "~~/components/ui/card";
+import { Input } from "~~/components/ui/input";
+import { Label } from "~~/components/ui/label";
+import { Slider } from "~~/components/ui/slider";
+
+const PackageRecieverButtons = () => {
+  return (
+    <div className="grid gap-2">
+      <Button size="lg">I received the package</Button>
+      <Button variant="outline" size="lg">
+        Report package lost
+      </Button>
+    </div>
+  );
+};
+
+export default PackageRecieverButtons;
diff --git a/packages/nextjs/components/PackageInfo.tsx b/packages/nextjs/components/PackageInfo.tsx
@@ -1,3 +1,5 @@
+import PackageDelivererButtons from "./Package-Deliverer-Buttons";
+import PackageRecieverButtons from "./Package-Reciever-Buttons";
 import { Button } from "~~/components/ui/button";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "~~/components/ui/card";
 import { Input } from "~~/components/ui/input";
@@ -38,7 +40,7 @@ const PackageInfo = () => {
             </CardHeader>
             <CardContent className="grid gap-3">
               <div className="flex items-center justify-between">
-                <div className="text-muted-foreground">Amount staked</div>
+                <div className="text-muted-foreground">Amount of stake</div>
                 <div>0.5 ETH</div>
               </div>
               <div className="flex items-center justify-between">
@@ -48,10 +50,10 @@ const PackageInfo = () => {
             </CardContent>
           </Card>
           <div className="grid gap-2">
-            <Button size="lg">I received the package</Button>
-            <Button variant="outline" size="lg">
-              Report package lost
-            </Button>
+            <PackageRecieverButtons />
+          </div>
+          <div className="grid gap-2">
+            <PackageDelivererButtons />
           </div>
         </div>
       </div>