Merge pull request #131 from codersforcauses/issue-129-Create_Bider_C…

…ard_ui_component_for_a_task

Create bidder offer card for poster to view

client/src/components/ui/bidder-offer-card.tsx

@@ -0,0 +1,34 @@
+import PersonDetail from "./person-detail";
+
+interface BidderOfferProps {
+  name: string;
+  profile: string;
+  price: number;
+  bio: string;
+  className?: string;
+}
+
+const MAX_BIO_LENGTH = 86;
+function truncate(str: string) {
+  if (str.length <= MAX_BIO_LENGTH) {
+    return str;
+  }
+  return str.slice(0, MAX_BIO_LENGTH) + "...";
+}
+
+export default function BidderOfferCard({
+  name,
+  profile,
+  price,
+  bio,
+  className,
+}: BidderOfferProps) {
+  const defaultClassName = "relative m-4 rounded-lg border border-gray-300 p-4";
+  return (
+    <div className={className ? className : defaultClassName}>
+      <PersonDetail personName={name} personImg={profile} />
+      <div className="absolute right-4 top-6 inline-block font-bold">{`$${price}`}</div>
+      <p className="text-sm font-medium">{truncate(bio)}</p>
+    </div>
+  );
+}

client/src/pages/component-showcase.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 
+import BidderOfferCard from "@/components/ui/bidder-offer-card";
 import BottomNav from "@/components/ui/bottom-nav";
 import { Button } from "@/components/ui/button";
 import {
@@ -51,6 +52,7 @@ function ComponentSection({
 export default function ComponentShowcase() {
   const [selectedValue, setSelectedValue] = useState("");
   const [selectedDropdown, setSelectedDropdown] = useState("HTML");
+  const bidder_exmaple_profile = "/bidder-exmaple-profile.svg";
   return (
     <div className="flex h-full w-screen items-center justify-center bg-penni-background-dark-mode">
       <div className="m-0 h-auto w-[375px] bg-penni-background-light-mode">
@@ -348,6 +350,14 @@ export default function ComponentShowcase() {
             nestedContent={<div>Logout content goes here</div>} // Use nested content for Logout
           />
         </ComponentSection>
+        <ComponentSection title="Bidder Offer Card">
+          <BidderOfferCard
+            profile={bidder_exmaple_profile}
+            name="Jackson Anderson"
+            price={400}
+            bio="I am a pensioner with extensive experience in cleaning. I am very patient and professional I can definitely handle your task perfectly well. You can trust me in this."
+          />
+        </ComponentSection>
       </div>
     </div>
   );