feat: my collections page

app/client/src/app/components/InfoCard.tsx

@@ -0,0 +1,28 @@
+function InfoCard({
+  value,
+  description,
+  iconBg,
+  icon,
+}: {
+  value?: string;
+  description?: string;
+  iconBg?: string;
+  icon: React.ReactNode;
+}) {
+  return (
+    <div className="p-7 flex-1 rounded-xl bg-white flex items-center gap-x-3">
+      <div
+        style={{ backgroundColor: iconBg }}
+        className={`p-[13px] rounded-full`}
+      >
+        {icon}
+      </div>
+      <div>
+        <h3 className="text-[#090914] font-bold text-xl">{value}</h3>
+        <p className="text-[#7E8299] text-xs font-semibold">{description}</p>
+      </div>
+    </div>
+  );
+}
+
+export default InfoCard;

app/client/src/app/components/SearchBar.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+function SearchBar() {
+  return (
+    <div className="relative h-fit flex-1">
+      <img
+        src="/icons/searchIcon.svg"
+        className="absolute z-[5] top-[12px] left-3"
+        alt=""
+      />
+      <input
+        type="text"
+        placeholder="Search..."
+        className="bg-[#F9F9F9] py-3 pl-[43px] pr-6 rounded-xl text-black w-full"
+      />
+    </div>
+  );
+}
+
+export default SearchBar;

app/client/src/app/owner/my-collections/components/CollectionsTable.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import CollectionsTableRow from "./CollectionsTableRow";
+import { Land } from "../../../utils/types";
+
+const dummyLands: Land[] = [
+  {
+    num: 1,
+    id: "56037-XDER",
+    name: "Banana Island",
+    price: "0.2345",
+    date: "20/11/24",
+    status: "bought",
+  },
+  {
+    num: 2,
+    id: "56037-XDER",
+    name: "Banana Island",
+    price: "12.0145",
+    date: "12/10/24",
+    status: "unapproved",
+  },
+  {
+    num: 3,
+    id: "56037-XDER",
+    name: "Banana Island",
+    price: "1.8925",
+    date: "23/09/24",
+    status: "approved",
+  },
+];
+
+function CollectionsTable() {
+  return (
+    <div className="flex flex-col gap-y-6">
+      <div className="grid grid-cols-[auto_1.9fr_3.4fr_2.1fr_1.3fr_1.2fr_auto] gap-x-3 uppercase text-xs font-bold text-[#7E8299] pb-4 border-b-[#7E82994D] border-b-[1px] border-dashed">
+        <div>No</div>
+        <div>Land ID</div>
+        <div>Land Name</div>
+        <div>Price</div>
+        <div>Date</div>
+        <div>Status</div>
+        <div>Actions</div>
+      </div>
+      {dummyLands.map((land, id) => (
+        <CollectionsTableRow land={land} />
+      ))}
+    </div>
+  );
+}
+
+export default CollectionsTable;

app/client/src/app/owner/my-collections/components/CollectionsTableRow.tsx

@@ -0,0 +1,45 @@
+import { Land } from "../../../utils/types";
+
+function CollectionsTableRow({ land }: { land: Land }) {
+  let statusBadgeClasses = () => {
+    switch (land.status) {
+      case "approved":
+        return "bg-[#E8FFF3] text-[#50CD89]";
+      case "unapproved":
+        return "bg-[#F9F9F9] text-[#7E8299]";
+      case "bought":
+        return "bg-[#F1FAFF] text-[#00A3FF]";
+      default:
+        return "";
+    }
+  };
+  return (
+    <div className="grid grid-cols-[auto_1.9fr_3.4fr_2.1fr_1.3fr_1.2fr_auto] gap-x-3 text-sm font-bold text-[#3F4254] pb-4 border-b-[#7E82994D] border-b-[1px] border-dashed items-center">
+      <div>{land.num}</div>
+      <div>{land.id}</div>
+      <div className="flex gap-x-2 items-center">
+        <img src="/images/avatar.svg" className="w-6 rounded-full h-6" alt="" />
+        {land.name}
+      </div>
+      <div className="flex gap-x-2 items-center">
+        <img src="/icons/ethIcon.svg" className="w-6 rounded-full h-6" alt="" />
+        {land.price}
+      </div>
+      <div className="text-[#B5B5C3]">{land.date}</div>
+      <div>
+        <div
+          className={`${statusBadgeClasses()} w-[89px] py-[7px] px-[6px] rounded-lg text-center text-[13px] capitalize`}
+        >
+          {land.status}
+        </div>
+      </div>
+      <div>
+        <button className="w-[39px] bg-[#F9F9F9] py-2 flex justify-center rounded-lg">
+          <img src="/icons/moreVertIcon.svg" alt="" />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default CollectionsTableRow;

app/client/src/app/owner/my-collections/page.tsx

@@ -0,0 +1,91 @@
+import React from "react";
+import InfoCard from "@/app/components/InfoCard";
+import SearchBar from "@/app/components/SearchBar";
+import CollectionsTable from "./components/CollectionsTable";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import LayersIcon from "@/app/svg/LayersIcon";
+const page = () => {
+  return (
+    <div>
+      <div className="flex justify-between items-center mb-[21px]">
+        <h2 className="text-[24px] leading-[26.4px] font-semibold text-[#090914]">
+          Collections
+        </h2>
+        <button className="bg-[#6E62E5] hover:bg-[#5353c5] disabled:bg-[#a0a0d8] px-6 py-2 text-base text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed">
+          Register New Land
+        </button>
+      </div>
+      <div className="flex gap-x-6 items-center mb-6">
+        <InfoCard
+          icon={<LayersIcon fill="#5B93FF" />}
+          iconBg="#EFF5FF"
+          value="24"
+          description="Total Land Owned"
+        />
+        <InfoCard
+          icon={<LayersIcon fill="#FFC327" />}
+          iconBg="#FFF7E1"
+          value="10"
+          description="Total Land Registered"
+        />
+        <InfoCard
+          icon={<LayersIcon fill="#FF8F6B" />}
+          iconBg="#FFF4F1"
+          value="04"
+          description="Total Land Bought"
+        />
+        <InfoCard
+          icon={<LayersIcon fill="#605BFF" />}
+          iconBg="#F0EFFF"
+          value="02"
+          description="Total Land Unapproved"
+        />
+      </div>
+
+      <div className="bg-white p-6 rounded-xl">
+        <div className="flex items-center gap-x-[42px] mb-8">
+          <SearchBar />
+          <div className="flex items-center gap-x-4 text-sm text-[#7E8299] font-bold">
+            <div className="py-[11px] px-[26px] bg-[#F9F9F9] rounded-lg gap-x-2 flex items-center">
+              Status
+            </div>
+            <div className="py-[10px] px-3 bg-[#F9F9F9] rounded-lg gap-x-2 flex items-center">
+              <img src="/icons/calendarIcon.svg" alt="" />
+              Nov 11 - Nov 24
+            </div>
+          </div>
+        </div>
+
+        <CollectionsTable />
+
+        {/* Pagination */}
+        <div className="flex justify-end mt-[56px]">
+          <div className="flex gap-x-4 items-center">
+            <span>
+              <ChevronLeft size={24} />
+            </span>
+            <div className="flex gap-x-1 text-[13px] font-semibold text-white">
+              <div className="w-[25px] h-[25px] bg-[#6E62E5] rounded-full flex items-center justify-center text-center">
+                1
+              </div>
+              <div className="w-[25px] h-[25px] rounded-full text-[#7E8299] flex items-center justify-center text-center">
+                2
+              </div>
+              <div className="w-[25px] h-[25px] rounded-full text-[#7E8299] flex items-center justify-center text-center">
+                3
+              </div>
+              <div className="w-[25px] h-[25px] rounded-full text-[#7E8299] flex items-center justify-center text-center">
+                4
+              </div>
+            </div>
+            <span>
+              <ChevronRight size={24} />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default page;

app/client/src/app/svg/LayersIcon.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+function LayersIcon({ fill }: { fill: string }) {
+  return (
+    <svg
+      width="26"
+      height="26"
+      viewBox="0 0 26 26"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        opacity="0.3"
+        d="M23.0209 20.0687L14.1375 23.6437C13.3792 23.9687 12.6209 23.9687 11.8625 23.6437L2.97919 20.0687C1.89585 19.6353 1.89585 18.1187 2.97919 17.6853L4.38751 17.1437L11.1042 19.852C11.7542 20.0687 12.4042 20.177 13.0542 20.177C13.7042 20.177 14.3542 20.0687 15.0042 19.852L21.7209 17.1437L23.1292 17.6853C24.2125 18.1187 24.2125 19.6353 23.0209 20.0687ZM14.1375 17.7937L23.0209 14.2187C24.1042 13.7853 24.1042 12.2687 23.0209 11.8353L14.1375 8.26035C13.3792 7.93535 12.6209 7.93535 11.8625 8.26035L2.97919 11.8353C1.89585 12.2687 1.89585 13.7853 2.97919 14.2187L11.8625 17.7937C12.6209 18.1187 13.4875 18.1187 14.1375 17.7937Z"
+        fill={fill}
+      />
+      <path
+        d="M11.9708 11.9436L3.08746 8.36859C2.00413 7.93525 2.00413 6.41859 3.08746 5.98525L11.9708 2.41025C12.7292 2.08525 13.4875 2.08525 14.2458 2.41025L23.1292 5.98525C24.2125 6.41859 24.2125 7.93525 23.1292 8.36859L14.1375 11.9436C13.4875 12.2686 12.6208 12.2686 11.9708 11.9436Z"
+        fill={fill}
+      />
+    </svg>
+  );
+}
+
+export default LayersIcon;

app/client/src/app/utils/types.ts

@@ -0,0 +1,8 @@
+export type Land = {
+  num: number;
+  id: string;
+  name: string;
+  price: string;
+  date: string;
+  status: "approved" | "unapproved" | "bought";
+};