fix(market-card.tsx): fix import statement for storeComponent type

feat(market-card.tsx): add ShadTooltip component for displaying tooltips on market card
fix(index.tsx): fix import statement for storeComponent type
feat(index.tsx): change data and dataSelect state types to storeComponent[]
fix(index.tsx): add missing properties to storeComponent type
fix(styleUtils.ts): add missing import statement for Heart and ToyBrick icons

src/frontend/src/pages/StorePage/components/market-card.tsx

@@ -1,5 +1,5 @@
-import { Link, ToyBrick } from "lucide-react";
 import { useContext, useEffect, useRef, useState } from "react";
+import ShadTooltip from "../../../components/ShadTooltipComponent";
 import IconComponent from "../../../components/genericIconComponent";
 import { Badge } from "../../../components/ui/badge";
 import { Button } from "../../../components/ui/button";
@@ -15,10 +15,10 @@ import { StoreContext } from "../../../contexts/storeContext";
 import { TabsContext } from "../../../contexts/tabsContext";
 import { getComponent, saveFlowStore } from "../../../controllers/API";
 import { FlowType } from "../../../types/flow";
-import { FlowComponent } from "../../../types/store";
+import { storeComponent } from "../../../types/store";
 import cloneFLowWithParent from "../../../utils/storeUtils";
 
-export const MarketCardComponent = ({ data }: { data: FlowComponent }) => {
+export const MarketCardComponent = ({ data }: { data: storeComponent }) => {
   const { savedFlows } = useContext(StoreContext);
   const [added, setAdded] = useState(savedFlows.has(data.id) ? true : false);
   const [loading, setLoading] = useState(false);
@@ -143,12 +143,29 @@ export const MarketCardComponent = ({ data }: { data: FlowComponent }) => {
             <div className=" flex items-center gap-3">
               <Badge size="md" variant="outline">
                 chain
-                <Link className="ml-1.5 w-3 text-green-700" />
+                <IconComponent
+                  name="Link"
+                  className="ml-1.5 w-3 text-green-700"
+                />
               </Badge>
-              <span className="flex items-center gap-1.5 text-xs text-foreground">
-                <ToyBrick className="h-4 w-4" />
-                123
-              </span>
+              <ShadTooltip content="Components">
+                <span className="flex items-center gap-1.5 text-xs text-foreground">
+                  <IconComponent name="ToyBrick" className="h-4 w-4" />
+                  123
+                </span>
+              </ShadTooltip>
+              <ShadTooltip content="Favorites">
+                <span className="flex items-center gap-1.5 text-xs text-foreground">
+                  <IconComponent name="Heart" className="h-4 w-4" />
+                  {data.liked_by_count ?? 0}
+                </span>
+              </ShadTooltip>
+              <ShadTooltip content="Downloads">
+                <span className="flex items-center gap-1.5 text-xs text-foreground">
+                  <IconComponent name="DownloadCloud" className="h-4 w-4" />
+                  {data.downloads_count}
+                </span>
+              </ShadTooltip>
             </div>
             {/* {data.isChat ? (
               <Button size="sm" variant="outline">

src/frontend/src/pages/StorePage/index.tsx

@@ -25,7 +25,7 @@ import {
   searchComponent,
 } from "../../controllers/API";
 import StoreApiKeyModal from "../../modals/StoreApiKeyModal";
-import { FlowComponent } from "../../types/store";
+import { storeComponent } from "../../types/store";
 import { cn } from "../../utils/utils";
 import { MarketCardComponent } from "./components/market-card";
 export default function StorePage(): JSX.Element {
@@ -37,8 +37,8 @@ export default function StorePage(): JSX.Element {
   useEffect(() => {
     setTabId("");
   }, []);
-  const [data, setData] = useState<FlowComponent[]>([]);
-  const [dataSelect, setDataSelect] = useState<FlowComponent[]>([]);
+  const [data, setData] = useState<storeComponent[]>([]);
+  const [dataSelect, setDataSelect] = useState<storeComponent[]>([]);
   const [loading, setLoading] = useState(false);
   const [filteredCategories, setFilteredCategories] = useState(new Set());
   const [inputText, setInputText] = useState<string>("");

src/frontend/src/types/store/index.ts

@@ -1,13 +1,10 @@
-export type FlowComponent = {
+export type storeComponent = {
   id: string;
-  status: string;
-  sort: null | any;
-  user_created: string;
-  date_created: string;
-  user_updated: string;
-  date_updated: string;
   is_component: boolean;
+  tags: string[];
+  metadata?: {};
+  downloads_count: number;
   name: string;
   description: string;
-  data: Object;
+  liked_by_count: number;
 };

src/frontend/src/utils/styleUtils.ts

@@ -38,6 +38,7 @@ import {
   GithubIcon,
   Group,
   Hammer,
+  Heart,
   HelpCircle,
   Home,
   Info,
@@ -75,6 +76,7 @@ import {
   Store,
   SunIcon,
   TerminalSquare,
+  ToyBrick,
   Trash2,
   Undo,
   Ungroup,
@@ -334,4 +336,7 @@ export const nodeIconsLucide: iconsType = {
   GitBranchPlus,
   Loader2,
   BookmarkPlus,
+  Heart,
+  Link,
+  ToyBrick,
 };