[feat]: event code refactor

apps/client/app/page.tsx

@@ -1,12 +1,12 @@
 "use client"
 import HomeWrapper from "@/components/landing/Home/HomeWrapper";
-// import OrderBook from "@/components/landing/Orderbook/Orderbook";
+// import TradePage from "@/components/landing/EventTrade/Trade";
 
 export default function Page() {
   return (
     <div>
       <HomeWrapper/>
-      {/* <OrderBook eventId="jbdjfdf"/> */}
+      {/* <TradePage eventId="jbdjfdf"/> */}
     </div>
   );
 }

apps/client/components/landing/EventTrade/BidCard.tsx

@@ -0,0 +1,99 @@
+import React, { useEffect, useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+const BidCard = () => {
+  const [side, setSide] = useState<"yes" | "no">("yes");
+  const [tradePrice, setTradePrice] = useState("");
+  const [tradeQuantity, setTradeQuantity] = useState("");
+
+  useEffect(() => {
+    async function fetchInitialData() {}
+    fetchInitialData();
+  }, []);
+
+  async function handleTrade() {}
+
+  return (
+    <Card className="bg-white border md:fixed md:right-10 md:w-[30%]">
+      <CardHeader>
+        <CardTitle className="">Place Order</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="flex justify-between mb-4">
+          <Button
+            variant={side === "yes" ? "default" : "outline"}
+            onClick={() => setSide("yes")}
+            className={`bg-blue-500 text-white hover:bg-blue-600 ${
+              side === "yes" ? "ring-2 ring-blue-400" : ""
+            }`}
+          >
+            Yes ₹{5}
+          </Button>
+          <Button
+            variant={side === "no" ? "default" : "outline"}
+            onClick={() => setSide("no")}
+            className={`bg-red-500 text-white hover:bg-red-600 ${
+              side === "no" ? "ring-2 ring-red-400" : ""
+            }`}
+          >
+            No ₹{5}
+          </Button>
+        </div>
+        <div className="space-y-4">
+          <div>
+            <label htmlFor="trade-price" className="block text-sm font-medium ">
+              Price
+            </label>
+            <Input
+              id="trade-price"
+              type="number"
+              value={tradePrice}
+              onChange={(e) => setTradePrice(e.target.value)}
+              className="mt-1 "
+            />
+            <p className="text-sm text-gray-400">0 qty available</p>
+          </div>
+          <div>
+            <label
+              htmlFor="trade-quantity"
+              className="block text-sm font-medium "
+            >
+              Quantity
+            </label>
+            <Input
+              id="trade-quantity"
+              type="number"
+              value={tradeQuantity}
+              onChange={(e) => setTradeQuantity(e.target.value)}
+              className="mt-1 "
+            />
+          </div>
+          <div className="flex justify-between">
+            <div>
+              <p className="text-lg font-bold">₹{5}</p>
+              <p className="text-sm text-gray-400">You put</p>
+            </div>
+            <div>
+              <p className="text-lg font-bold text-green-500">₹{5 + 5 - 3}</p>
+              <p className="text-sm text-gray-400">You get</p>
+            </div>
+          </div>
+          <Button
+            onClick={handleTrade}
+            className={`w-full text-white  ${
+              side === "yes"
+                ? "bg-blue-500 hover:bg-blue-600"
+                : "bg-red-500 hover:bg-red-600"
+            }`}
+          >
+            Place order
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default BidCard;

apps/client/components/landing/EventTrade/Orderbook.tsx

@@ -0,0 +1,69 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+const Orderbook = () => {
+  const getBarWidth = (quantity: number, maxQuantity: number) => {
+    return `${Math.min((quantity / maxQuantity) * 100, 100)}%`;
+  };
+
+  return (
+    <Card className="md:col-span-2 bg-white">
+      <CardHeader>
+        <CardTitle>Order Book</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Table>
+          <TableHeader>
+            <TableRow className="border-b ">
+              <TableHead className=" font-sans">PRICE</TableHead>
+              <TableHead className=" font-sans">QTY AT YES</TableHead>
+              <TableHead className=" font-sans">PRICE</TableHead>
+              <TableHead className=" font-sans">QTY AT NO</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            <TableRow key={Date.now()} className="border-b border-gray-800">
+              <TableCell className="text-blue-500 font-semibold">
+                {"yesPrice"}
+              </TableCell>
+              <TableCell className="p-0">
+                <div className="relative h-full w-full">
+                  <div
+                    className="absolute top-0 left-0 h-full bg-blue-700 opacity-20"
+                    style={{
+                      width: getBarWidth(1, 10),
+                    }}
+                  ></div>
+                  <div className="relative p-4 text-blue-500">{1}</div>
+                </div>
+              </TableCell>
+              <TableCell className="text-red-500 font-semibold">
+                {"noPrice"}
+              </TableCell>
+              <TableCell className="p-0">
+                <div className="relative h-full w-full">
+                  <div
+                    className="absolute top-0 left-0 h-full bg-red-700 opacity-20"
+                    style={{
+                      width: getBarWidth(1, 10),
+                    }}
+                  ></div>
+                  <div className="relative p-4 text-red-500">{1}</div>
+                </div>
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default Orderbook;

apps/client/components/landing/EventTrade/Overview.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+const Overview = () => {
+  return (
+    <Card className="mt-8 bg-white">
+        <CardHeader>
+          <CardTitle className="">Event Overview</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-gray-300">{"description"}</p>
+        </CardContent>
+      </Card>
+  )
+}
+
+export default Overview

apps/client/components/landing/EventTrade/ProbabilityChart.tsx

@@ -0,0 +1,42 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import LineChart from "@/components/ui/line-chart";
+import { ArrowUpDown } from "lucide-react";
+import { useState } from "react";
+
+const ProbabilityChart = () => {
+  const [showYesData, setShowYesData] = useState<boolean>(true);
+
+  return (
+    <Card className="mt-8 bg-white md:w-[66%]">
+      <CardHeader>
+        <CardTitle className=" flex items-center justify-between">
+          Probability Chart
+          <Button
+            onClick={() => setShowYesData(!showYesData)}
+            className={`text-white
+            ${
+              showYesData
+                ? "bg-blue-600 hover:bg-blue-700"
+                : "bg-red-600 hover:bg-red-700"
+            }`}
+          >
+            <ArrowUpDown className="mr-2 h-4 w-4" />
+            {showYesData ? "Show No Data" : "Show Yes Data"}
+          </Button>
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <LineChart
+          labels={["timeSeries"]}
+          data={showYesData ? [10] : [90]}
+          borderColor={
+            showYesData ? "rgba(59, 130, 246, 1)" : "rgba(220, 38, 38, 1)"
+          }
+        />
+      </CardContent>
+    </Card>
+  );
+};
+
+export default ProbabilityChart;

apps/client/components/landing/EventTrade/Trade.tsx

@@ -0,0 +1,35 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import { getEventDetails } from "@/actions/Event/getEventDetails";
+import BidCard from "./BidCard";
+import Orderbook from "./Orderbook";
+import ProbabilityChart from "./ProbabilityChart";
+import Overview from "./Overview";
+
+interface OrderBookProps {
+  eventId: string;
+}
+
+export default function TradePage({ eventId }: OrderBookProps) {
+  const [title, setTitle] = useState("");
+
+  useEffect(() => {
+    async function fetchInitialData() {
+      const eventData = await getEventDetails(eventId);
+      setTitle(eventData.title);
+    }
+    fetchInitialData();
+  }, [eventId]);
+
+  return (
+    <div className="min-h-screen p-10">
+      <h1 className="text-3xl font-bold text-center mb-6 mt-1">{title}</h1>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <Orderbook />
+        <BidCard />
+      </div>
+      <ProbabilityChart />
+      <Overview />
+    </div>
+  );
+}