initial commit

components/fundmarket/ProductCardList.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+import Image from "next/image";
+import { Button, Card, CardBody } from "@heroui/react";
+import { buttonStyles } from "@/lib/buttonStyles";
+
+interface ProductCardListProps {
+  name: string;
+  category: string;
+  categoryColor: "orange" | "green" | "blue" | "purple" | "red";
+  iconType: "us-flag-1" | "hk-flag" | "us-flag-2" | "sg-flag" | "uk-flag";
+  poolCap: string;
+  lockUp: string;
+  poolCapacityPercent: number;
+  onInvest?: () => void;
+}
+
+export default function ProductCardList({
+  name,
+  category,
+  categoryColor,
+  iconType,
+  poolCap,
+  lockUp,
+  poolCapacityPercent,
+  onInvest,
+}: ProductCardListProps) {
+  const getIconSrc = () => {
+    switch (iconType) {
+      case "us-flag-1":
+      case "hk-flag":
+      case "us-flag-2":
+      default:
+        return "/lr0.svg";
+    }
+  };
+
+  const getIconBg = () => {
+    switch (categoryColor) {
+      case "orange":
+        return "bg-orange-50 dark:bg-orange-900/20";
+      case "green":
+        return "bg-green-50 dark:bg-green-900/20";
+      case "blue":
+        return "bg-blue-50 dark:bg-blue-900/20";
+      case "purple":
+        return "bg-purple-50 dark:bg-purple-900/20";
+      case "red":
+        return "bg-red-50 dark:bg-red-900/20";
+      default:
+        return "bg-orange-50 dark:bg-orange-900/20";
+    }
+  };
+
+  return (
+    <Card className="bg-bg-subtle dark:bg-gray-800 border border-border-gray dark:border-gray-700">
+      <CardBody className="py-6 px-8">
+        <div className="flex flex-row items-center justify-between">
+          {/* Icon and Title - Fixed width */}
+          <div className="flex flex-row gap-4 items-center justify-start w-[280px] flex-shrink-0">
+            <div
+              className={`${getIconBg()} rounded-md border-[0.75px] border-black/10 dark:border-white/10 w-10 h-[30px] relative shadow-[inset_0_1.5px_3px_0_rgba(0,0,0,0.05)] overflow-hidden flex items-center justify-center flex-shrink-0`}
+            >
+              <Image
+                src={getIconSrc()}
+                alt={name}
+                width={43}
+                height={30}
+                className="w-[107.69%] h-full object-cover"
+              />
+            </div>
+            <div className="flex flex-col gap-0.5 items-start min-w-0 flex-1">
+              <div className="text-text-tertiary dark:text-gray-400 text-caption-tiny font-normal font-inter">
+                {category}
+              </div>
+              <div className="text-text-primary dark:text-white text-body-default font-bold font-inter truncate w-full">
+                {name}
+              </div>
+            </div>
+          </div>
+
+          {/* Middle section with stats - evenly distributed */}
+          <div className="flex flex-row items-center justify-between flex-1 px-12">
+            {/* Lock-up */}
+            <div className="flex flex-col gap-1 items-start w-[120px] flex-shrink-0">
+              <div className="text-text-tertiary dark:text-gray-400 text-caption-tiny font-normal font-inter">
+                Lock-up
+              </div>
+              <div className="text-text-primary dark:text-white text-body-small font-bold font-inter">
+                {lockUp}
+              </div>
+            </div>
+
+            {/* Pool Cap */}
+            <div className="flex flex-col gap-1 items-start w-[100px] flex-shrink-0">
+              <div className="text-text-tertiary dark:text-gray-400 text-caption-tiny font-normal font-inter">
+                Pool Cap
+              </div>
+              <div className="text-green-500 dark:text-green-400 text-body-small font-bold font-inter">
+                {poolCap}
+              </div>
+            </div>
+
+            {/* Pool Capacity */}
+            <div className="flex flex-col gap-1 items-start w-[260px] flex-shrink-0">
+              <div className="text-text-tertiary dark:text-gray-400 text-caption-tiny font-normal font-inter">
+                Pool Capacity
+              </div>
+              <div className="flex flex-row gap-3 items-center">
+                <div className="bg-gray-100 dark:bg-gray-700 rounded-full w-24 h-2 relative overflow-hidden flex-shrink-0">
+                  <div
+                    className="rounded-full h-2"
+                    style={{
+                      background:
+                        "linear-gradient(90deg, rgba(20, 71, 230, 1) 0%, rgba(3, 43, 189, 1) 100%)",
+                      width: `${poolCapacityPercent}%`,
+                    }}
+                  />
+                </div>
+                <div className="text-text-primary dark:text-white text-body-small font-bold font-inter whitespace-nowrap">
+                  {poolCapacityPercent}% Filled
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Invest Button */}
+          <div className="flex-shrink-0">
+            <Button
+              color="default"
+              variant="solid"
+              onPress={onInvest}
+              className={buttonStyles({ intent: "theme" })}
+            >
+              Invest
+            </Button>
+          </div>
+        </div>
+      </CardBody>
+    </Card>
+  );
+}