diff --git a/app/client/public/icons/calendarIcon.svg b/app/client/public/icons/calendarIcon.svg new file mode 100644 index 00000000..c2cac742 --- /dev/null +++ b/app/client/public/icons/calendarIcon.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/app/client/public/icons/ethIcon.svg b/app/client/public/icons/ethIcon.svg new file mode 100644 index 00000000..f003346d --- /dev/null +++ b/app/client/public/icons/ethIcon.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/app/client/public/icons/moreVertIcon.svg b/app/client/public/icons/moreVertIcon.svg new file mode 100644 index 00000000..eb1bd4c5 --- /dev/null +++ b/app/client/public/icons/moreVertIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/client/public/icons/searchIcon.svg b/app/client/public/icons/searchIcon.svg new file mode 100644 index 00000000..ea2b9da0 --- /dev/null +++ b/app/client/public/icons/searchIcon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/client/public/images/avatar.svg b/app/client/public/images/avatar.svg new file mode 100644 index 00000000..89f40b71 --- /dev/null +++ b/app/client/public/images/avatar.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/app/client/src/app/components/Button/Button.tsx b/app/client/src/app/components/Button/Button.tsx deleted file mode 100644 index 52e1d6c4..00000000 --- a/app/client/src/app/components/Button/Button.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import React from "react"; - -interface ButtonProps extends React.PropsWithChildren { - classname?: string; - variant?: "default" | "error" | "success" | "gray"; - size?: "small" | "medium" | "large" | "full"; - type?: "button" | "submit" | "reset"; - disabled?: boolean; - onClick?: () => void; - "aria-label"?: string; -} - -const Button: React.FC = ({ - children, - classname = "", - variant = "default", - size = "medium", - type = "button", - disabled = false, - onClick, - "aria-label": ariaLabel, -}) => { - const getVariantStyles = () => { - switch (variant) { - case "error": - return "bg-red-500 hover:bg-red-600 disabled:bg-red-300"; - case "success": - return "bg-green-500 hover:bg-green-600 disabled:bg-green-300"; - case "gray": - return "bg-gray-500 hover:bg-gray-600 disabled:bg-gray-300"; - default: - return "bg-[#6364d5] hover:bg-[#5353c5] disabled:bg-[#a0a0d8]"; - } - }; - - const getSizeStyles = () => { - switch (size) { - case "small": - return "px-4 py-1 text-sm"; - case "medium": - return "px-6 py-2 text-base"; - case "large": - return "px-8 py-3 text-lg"; - case "full": - return "w-full py-2 text-base"; - default: - return "px-6 py-2 text-base"; - } - }; - - return ( - - ); -}; - -export default Button; diff --git a/app/client/src/app/components/InfoCard.tsx b/app/client/src/app/components/InfoCard.tsx new file mode 100644 index 00000000..21d8686a --- /dev/null +++ b/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 ( +
+
+ {icon} +
+
+

{value}

+

{description}

+
+
+ ); +} + +export default InfoCard; diff --git a/app/client/src/app/components/SearchBar.tsx b/app/client/src/app/components/SearchBar.tsx new file mode 100644 index 00000000..de5f3338 --- /dev/null +++ b/app/client/src/app/components/SearchBar.tsx @@ -0,0 +1,20 @@ +import React from "react"; + +function SearchBar() { + return ( +
+ + +
+ ); +} + +export default SearchBar; diff --git a/app/client/src/app/owner/my-collections/components/CollectionsTable.tsx b/app/client/src/app/owner/my-collections/components/CollectionsTable.tsx new file mode 100644 index 00000000..1ac6334e --- /dev/null +++ b/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 ( +
+
+
No
+
Land ID
+
Land Name
+
Price
+
Date
+
Status
+
Actions
+
+ {dummyLands.map((land, id) => ( + + ))} +
+ ); +} + +export default CollectionsTable; diff --git a/app/client/src/app/owner/my-collections/components/CollectionsTableRow.tsx b/app/client/src/app/owner/my-collections/components/CollectionsTableRow.tsx new file mode 100644 index 00000000..c47608f7 --- /dev/null +++ b/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 ( +
+
{land.num}
+
{land.id}
+
+ + {land.name} +
+
+ + {land.price} +
+
{land.date}
+
+
+ {land.status} +
+
+
+ +
+
+ ); +} + +export default CollectionsTableRow; diff --git a/app/client/src/app/owner/my-collections/page.tsx b/app/client/src/app/owner/my-collections/page.tsx new file mode 100644 index 00000000..71813a05 --- /dev/null +++ b/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 ( +
+
+

+ Collections +

+ +
+
+ } + iconBg="#EFF5FF" + value="24" + description="Total Land Owned" + /> + } + iconBg="#FFF7E1" + value="10" + description="Total Land Registered" + /> + } + iconBg="#FFF4F1" + value="04" + description="Total Land Bought" + /> + } + iconBg="#F0EFFF" + value="02" + description="Total Land Unapproved" + /> +
+ +
+
+ +
+
+ Status +
+
+ + Nov 11 - Nov 24 +
+
+
+ + + + {/* Pagination */} +
+
+ + + +
+
+ 1 +
+
+ 2 +
+
+ 3 +
+
+ 4 +
+
+ + + +
+
+
+
+ ); +}; + +export default page; diff --git a/app/client/src/app/svg/LayersIcon.tsx b/app/client/src/app/svg/LayersIcon.tsx new file mode 100644 index 00000000..76850c61 --- /dev/null +++ b/app/client/src/app/svg/LayersIcon.tsx @@ -0,0 +1,25 @@ +import React from "react"; + +function LayersIcon({ fill }: { fill: string }) { + return ( + + + + + ); +} + +export default LayersIcon; diff --git a/app/client/src/app/utils/types.ts b/app/client/src/app/utils/types.ts new file mode 100644 index 00000000..4967ae1f --- /dev/null +++ b/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"; +};