feat: create proposal page

 proposal title section
 proposal status section

dapp/src/components/page/proposal/ProposalPage.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import ProposalPageTitle from "./ProposalPageTitle";
+import ProposalStatusSection from "./ProposalStatusSection";
+import { useStore } from "@nanostores/react";
+import { proposalId } from "utils/store";
+
+const ProposalPage: React.FC = () => {
+  const id = useStore(proposalId);
+
+  return (
+    <div>
+      <ProposalPageTitle
+        id={id}
+        title="Bounty of issue: integrate DAO system to Tansu - $3000"
+        submitVote={() => {}}
+      />
+      <ProposalStatusSection status="active" endDate={"2024-11-24"} />
+    </div>
+  );
+};
+
+export default ProposalPage;

dapp/src/components/page/proposal/ProposalPageTitle.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { useState, useEffect } from "react";
+interface Props {
+  id: string;
+  title: string;
+  submitVote: (id: string) => void;
+}
+
+const ProposalPageTitle: React.FC<Props> = ({ id, title, submitVote }) => {
+  const [projectId, setProjectId] = useState(id);
+
+  useEffect(() => {
+    if (id) {
+      setProjectId(id);
+    }
+  }, [id]);
+
+  return (
+    <div className="relative flex flex-col items-center md:flex-row justify-between mb-1.5 mt-4 sm:mt-8 md:mt-12 gap-y-4">
+      <div className="grid place-items-center gap-8 md:flex">
+        <span className="w-14 sm:w-16 md:w-20 flex justify-center text-2xl sm:text-3xl md:text-4xl px-1 font-medium bg-lime rounded-md sm:rounded-lg">
+          {projectId}
+        </span>
+        <p className="text-2xl font-normal text-center md:text-start">
+          {title}
+        </p>
+      </div>
+      <div id="vote-proposal-button" className="">
+        <button
+          onClick={() => submitVote(id)}
+          className={`w-full px-4 py-2 sm:py-3 bg-zinc-900 rounded-[14px] justify-center gap-2.5 inline-flex`}
+        >
+          <span className="text-center text-white text-xl font-normal leading-7">
+            Vote
+          </span>
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ProposalPageTitle;

dapp/src/components/page/proposal/ProposalStatusDiv.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import type { ProposalStatus } from "types/proposal";
+
+interface ProposalStatusDivProps {
+  proposalStatus: ProposalStatus;
+}
+
+const ProposalStatusDiv: React.FC<ProposalStatusDivProps> = ({
+  proposalStatus,
+}) => {
+  let title;
+  let backgroundColorClass;
+
+  switch (proposalStatus) {
+    case "active":
+      title = "Active";
+      backgroundColorClass = "bg-green";
+      break;
+    case "rejected":
+      title = "Rejected";
+      backgroundColorClass = "bg-red";
+      break;
+    case "cancelled":
+      title = "Cancelled";
+      backgroundColorClass = "bg-gray";
+      break;
+    case "approved":
+      title = "Approved";
+      backgroundColorClass = "bg-violet-600";
+      break;
+    default:
+      title = "Unknown";
+      backgroundColorClass = "bg-gray";
+  }
+
+  return (
+    <div
+      className={`${backgroundColorClass} text-sm sm:text-base md:text-xl font-bold text-white px-1 sm:px-2 md:px-3 py-0.5 rounded-lg`}
+    >
+      <h1 className="text-white">{title}</h1>
+    </div>
+  );
+};
+
+export default ProposalStatusDiv;

dapp/src/components/page/proposal/ProposalStatusSection.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { calculateDateDifference } from "../../../utils/formatTimeFunctions";
+import ProposalStatusDiv from "./ProposalStatusDiv";
+import type { ProposalStatus } from "types/proposal";
+
+interface Props {
+  status: ProposalStatus;
+  endDate: string | null;
+}
+
+const ProposalStatusSection: React.FC<Props> = ({ status, endDate }) => {
+  return (
+    <div className="flex items-center gap-2 sm:gap-3 md:gap-4">
+      <div className="">
+        <ProposalStatusDiv proposalStatus={status} />
+      </div>
+      <div className="hidden lg:block">
+        {status === "active" && endDate && (
+          <div className="text-xs sm:text-sm md:text-base text-zinc-800 font-medium">
+            Ends in {calculateDateDifference(endDate)}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ProposalStatusSection;

dapp/src/pages/proposal/index.astro

@@ -0,0 +1,30 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import Container from "../../components/layout/Container.astro";
+import ProposalPage from "../../components/page/proposal/ProposalPage.tsx";
+---
+
+<script is:inline>
+  var global = global || window;
+</script>
+
+<Layout title="Tansu">
+  <main class="space-y-20">
+    <Container>
+      <ProposalPage client:load />
+    </Container>
+  </main>
+</Layout>
+
+<script>
+  import { proposalId } from "utils/store";
+
+  document.addEventListener("astro:page-load", async () => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const id = urlParams.get("id") || "";
+    if (id) {
+      proposalId.set(id);
+      console.log("id:", id);
+    }
+  });
+</script>

dapp/src/utils/store.js

@@ -4,3 +4,4 @@ export const projectInfoLoaded = atom(false);
 export const latestCommit = atom("");
 export const projectCardModalOpen = atom(false);
 export const projectNameForGovernance = atom("");
+export const proposalId = atom("");