diff --git a/client/public/icons/calendar.svg b/client/public/icons/calendar.svg new file mode 100644 index 00000000..c80596eb --- /dev/null +++ b/client/public/icons/calendar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/public/icons/clock.svg b/client/public/icons/clock.svg new file mode 100644 index 00000000..7a8e085a --- /dev/null +++ b/client/public/icons/clock.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/public/icons/marker.svg b/client/public/icons/marker.svg new file mode 100644 index 00000000..3ce50e19 --- /dev/null +++ b/client/public/icons/marker.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/client/src/components/ui/TaskCard.tsx b/client/src/components/ui/TaskCard.tsx new file mode 100644 index 00000000..9ec8c70c --- /dev/null +++ b/client/src/components/ui/TaskCard.tsx @@ -0,0 +1,100 @@ +import Image from "next/image"; +import React from "react"; + +// please try to understand the "pricetype", not sure if we need to do useState for this part + +// the props +type TaskCardProps = { + state: "BIDDING" | "EXPIRED"; + category: string; + title: string; + date: string; + location: string; + duration: string; + estimatePrice: string; + myOfferPrice: string; + priceType: "Estimated Price" | "My Offer"; +}; + +// the task card +const TaskCard: React.FC = ({ + title, + category, + date, + location, + duration, + estimatePrice, + myOfferPrice, + state, + priceType, +}) => { + return ( +
+ {/* the state (expried or bidding) */} +
+ {state} +
+ + {/* the category & title (in 1 column) */} +
+
{category}
+

{title}

+
+ + {/* the date, location, duration & Price, price type (estimate or myoffer price) (in 2 columns)*/} +
+ {/* Column 1 with icons */} +
+
+
+ Date +
+

{date}

+
+
+
+ Location +
+

{location}

+
+
+
+ Duration +
+

{duration} hours

+
+
+ + {/* Column 2 */} +
+

+ {/* show the different price based on the different price type */}$ + {priceType === "My Offer" ? myOfferPrice : estimatePrice} +

+

{priceType}

+
+
+
+ ); +}; + +export default TaskCard; diff --git a/client/src/pages/hello.tsx b/client/src/pages/hello.tsx new file mode 100644 index 00000000..696d15df --- /dev/null +++ b/client/src/pages/hello.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +const Hello = () => { + return
Hello from Hello
; +}; + +export default Hello; diff --git a/client/src/pages/index.tsx b/client/src/pages/index.tsx index ea367875..144f97a5 100644 --- a/client/src/pages/index.tsx +++ b/client/src/pages/index.tsx @@ -44,6 +44,8 @@ export default function Home() {

Response from server: {data as string}

+
+

HELLO

); } diff --git a/client/src/pages/taskcard.tsx b/client/src/pages/taskcard.tsx new file mode 100644 index 00000000..b3e424f0 --- /dev/null +++ b/client/src/pages/taskcard.tsx @@ -0,0 +1,47 @@ +// pages/taskcard.tsx + +import React from "react"; + +import TaskCard from "../components/ui/TaskCard"; + +const Test = () => { + return ( +
+ + + +
+ ); +}; + +export default Test;