Merge pull request #22 from opensquare-network/feat-explore-2

feat: add explore info

projects/16-open-qf/src/site/components/card/index.jsx

@@ -8,7 +8,8 @@ export default function Card(props) {
         "border border-fill-bg-primary",
         "bg-fill-bg-primary",
         "shadow-shadow-card-default hover:shadow-shadow-card-hover",
-        "[&_.osn-card]:shadow-none [&_.osn-card]:bg-transparent",
+        "[&_.osn-card]:shadow-none [&_.osn-card]:bg-transparent [&_.osn-card]:h-full [&_.osn-card]:w-full",
+        props.className,
       )}
     >
       <CardBase bordered={false} {...props}></CardBase>

projects/16-open-qf/src/site/components/card/round.jsx

@@ -5,6 +5,31 @@ import Card from ".";
 import { Button } from "../button";
 import Link from "next/link";
 
+export function RoundCardMetadata({ data }) {
+  return (
+    <div
+      className={cn(
+        "flex items-baseline justify-between",
+        "max-sm:block max-sm:space-y-4",
+      )}
+    >
+      <div>
+        <Link href={`/project/${data.id}`} className="hover:underline">
+          <h3 className="text20semibold text-text-primary">{data.title}</h3>
+        </Link>
+        <p className="mt-1 text14medium text-text-link">
+          {dayjs(data.startDate).format("YYYY/MM/DD")} -
+          {dayjs(data.endDate).format("YYYY/MM/DD")}
+        </p>
+      </div>
+
+      <div>
+        <Tag>{data.type}</Tag>
+      </div>
+    </div>
+  );
+}
+
 export default function RoundCard({ data = {} }) {
   return (
     <div>
@@ -17,33 +42,9 @@ export default function RoundCard({ data = {} }) {
         head={
           <>
             <div>
-              <div
-                className={cn(
-                  "flex items-baseline justify-between",
-                  "max-sm:block max-sm:space-y-4",
-                )}
-              >
-                <div>
-                  <Link
-                    href={`/explore/${data.id}`}
-                    className="hover:underline"
-                  >
-                    <h3 className="text20semibold text-text-primary">
-                      {data.title}
-                    </h3>
-                  </Link>
-                  <p className="mt-1 text14medium text-text-link">
-                    {dayjs(data.startDate).format("YYYY/MM/DD")} -
-                    {dayjs(data.endDate).format("YYYY/MM/DD")}
-                  </p>
-                </div>
-
-                <div>
-                  <Tag>{data.type}</Tag>
-                </div>
-              </div>
+              <RoundCardMetadata data={data} />
 
-              <p className="mt-4 text-text-secondary text14medium">
+              <p className="mt-4 text-text-secondary text14medium line-clamp-3">
                 {data.description}
               </p>
             </div>

projects/16-open-qf/src/site/components/project/info.jsx

@@ -0,0 +1,59 @@
+import Card from "@/components/card";
+import { Button } from "@/components/button";
+import { RoundCardMetadata } from "@/components/card/round";
+
+export default function ExploreProjectInfo({ data }) {
+  return (
+    <div className="flex gap-5 max-sm:flex-col">
+      <Card
+        className="flex-1"
+        head={
+          <div>
+            <RoundCardMetadata data={data} />
+
+            <p className="mt-4 text-text-secondary text14medium">
+              {data.description}
+            </p>
+          </div>
+        }
+      >
+        <div className="flex justify-between gap-4">
+          <div className="space-y-1">
+            <div className="text14medium text-text-tertiary">
+              Program Funders
+            </div>
+            <div className="text16semibold text-text-primary">
+              {data.programFunders}
+            </div>
+          </div>
+          <div className="flex items-end justify-end">
+            <Button>Apply</Button>
+          </div>
+        </div>
+      </Card>
+
+      <div className="w-[392px] max-w-full">
+        <Card className="text-center h-full">
+          <div className="w-full h-full flex gap-2 flex-col items-center">
+            <div className="">
+              <div className="text14medium text-text-tertiary">
+                Matching Pool
+              </div>
+              <div className="text24bold text-text-primary">
+                {data.matchingPool} DOT
+              </div>
+            </div>
+            <div>
+              <div className="text14medium text-text-tertiary">
+                Total Contributors
+              </div>
+              <div className="text24bold text-text-primary">
+                {data.contributors}
+              </div>
+            </div>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}

projects/16-open-qf/src/site/fixtures/roundList.js

@@ -13,14 +13,14 @@ export const ROUND_LIST_DATA = [
   },
   {
     id: 2,
-    title: "Web3 Community and Education",
-    startDate: "2023/12/15",
-    endDate: "2023/12/31",
-    type: "Quadratic Funding",
+    title: "Project 2",
+    startDate: "2023/12/12",
+    endDate: "2023/12/28",
+    type: "Type",
     description:
-      "Grants focused on non-software projects pushing Web3 space forward, including growing new communities, providing educational resources, creating content, protecting users, and working on inclusion/diversity/advocacy. Applications submitted by November 8th are guaranteed to be reviewed before the start of the round.",
-    matchingPool: 100000, // TODO: chain settings
-    contributors: 100,
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque. Diam maecenas sed enim ut sem viverra aliquet eget sit. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Ridiculus mus mauris vitae ultricies. Cursus euismod quis viverra nibh cras pulvinar. Suspendisse ultrices gravida dictum fusce ut placerat. Nunc congue nisi vitae suscipit tellus mauris a diam maecenas. Venenatis a condimentum vitae sapien pellentesque. Congue mauris rhoncus aenean vel elit scelerisque mauris. Varius morbi enim nunc faucibus a. In est ante in nibh mauris cursus mattis molestie. Luctus venenatis lectus magna fringilla urna porttitor rhoncus. Aliquam sem et tortor consequat id porta nibh venenatis. Eget magna fermentum iaculis eu non diam phasellus. Vulputate eu scelerisque felis imperdiet. Ornare quam viverra orci sagittis. Nisi porta lorem mollis aliquam ut porttitor.",
+    matchingPool: 1130000, // TODO: chain settings
+    contributors: 135,
     programFunders: "Polkadot",
   },
   {

projects/16-open-qf/src/site/pages/explore/[id].jsx → projects/16-open-qf/src/site/pages/project/[id].jsx

@@ -2,18 +2,17 @@ import ListLayout from "@/components/layouts/listLayout";
 import { ROUND_LIST_DATA } from "@/fixtures/roundList";
 import { find } from "lodash-es";
 import { useRouter } from "next/router";
+import ExploreProjectInfo from "@/components/project/info";
 
-export default function ExplorePage() {
+export default function ProjectPage() {
   const router = useRouter();
   const id = Number(router.query.id);
 
   const data = find(ROUND_LIST_DATA, { id }) ?? {};
 
   return (
     <ListLayout title="Explore Projects" description="How OpenQF Works">
-      <div>
-        id: {id} {data.title}
-      </div>
+      <ExploreProjectInfo data={data} />
     </ListLayout>
   );
 }