@turtleclub/ui 0.7.0-beta.0 → 0.7.0-beta.2

package/src/components/molecules/opportunity/opportunity-list/opportunity-list.tsx

@@ -1,142 +0,0 @@
-"use client";
-import React, { useState } from "react";
-import { WidgetListItems } from "../../widget/widget-list-items";
-import {
-  OpportunityItem,
-  OpportunityItemValue,
-} from "../../widget/opportunity-item";
-import {
-  AssetFilters,
-  AssetFilterItem,
-} from "../../widget/asset-list/asset-filters";
-import { useOpportunityFiltering, useOpportunityGrouping } from "./hooks";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { cn } from "@/lib/utils";
-
-export interface OpportunityFilter extends AssetFilterItem {
-  filterFn: (opportunity: OpportunityItemValue) => boolean;
-}
-
-export interface OpportunityListProps {
-  // Data
-  opportunities: OpportunityItemValue[];
-  onOpportunityClick?: (opportunity: OpportunityItemValue) => void;
-
-  // Display options
-  groupBy?: "none" | "partner" | "chain";
-
-  // Filtering options
-  filters?: OpportunityFilter[];
-  filterVariant?: "badge" | "navigation";
-  multipleFilters?: boolean;
-
-  // Search options
-  showSearch?: boolean;
-  searchPlaceholder?: string;
-  searchDebounceDelay?: number;
-
-  // Styling
-  className?: string;
-  itemClassName?: string;
-  emptyState?: React.ReactNode;
-}
-
-// Default filters
-const defaultFilters: OpportunityFilter[] = [
-  {
-    id: "all",
-    label: "All",
-    filterFn: (_) => true,
-  },
-  {
-    id: "stablecoins",
-    label: "Stables",
-    filterFn: (opportunity) => opportunity.name.includes("USD"),
-  },
-  {
-    id: "eth",
-    label: "ETH",
-    filterFn: (opportunity) => opportunity.name.includes("ETH"),
-  },
-  {
-    id: "btc",
-    label: "BTC",
-    filterFn: (opportunity) => opportunity.name.includes("BTC"),
-  },
-];
-
-export const OpportunityList: React.FC<OpportunityListProps> = ({
-  opportunities,
-  onOpportunityClick,
-  groupBy = "none",
-  filters = defaultFilters,
-  filterVariant = "badge",
-  multipleFilters = true,
-  showSearch = true,
-  searchPlaceholder = "Search opportunities...",
-  searchDebounceDelay = 300,
-  className,
-  itemClassName,
-  emptyState,
-}) => {
-  const [searchQuery, setSearchQuery] = useState("");
-  const [activeFilterIds, setActiveFilterIds] = useState<string[]>([]);
-
-  // Use custom hooks for filtering and grouping
-  const filteredOpportunities = useOpportunityFiltering({
-    opportunities,
-    searchQuery,
-    activeFilterIds,
-    filters,
-  });
-
-  const groups = useOpportunityGrouping({
-    opportunities: filteredOpportunities,
-    groupBy,
-  });
-
-  const renderOpportunity = (opportunity: OpportunityItemValue) => (
-    <OpportunityItem
-      value={opportunity}
-      onSelect={() => onOpportunityClick?.(opportunity)}
-      className={itemClassName}
-    />
-  );
-
-  return (
-    <div className={cn("flex h-full flex-col", className)}>
-      <div className="mb-4 flex-shrink-0">
-        <AssetFilters
-          filters={filters.map(({ filterFn, ...rest }) => rest)}
-          activeFilters={activeFilterIds}
-          onFiltersChange={setActiveFilterIds}
-          variant={filterVariant}
-          multipleFilters={multipleFilters}
-          showSearch={showSearch}
-          searchValue={searchQuery}
-          onSearchChange={setSearchQuery}
-          searchPlaceholder={searchPlaceholder}
-          searchDebounceDelay={searchDebounceDelay}
-        />
-      </div>
-
-      <ScrollArea className="flex-1">
-        <WidgetListItems
-          groups={groups}
-          renderItem={renderOpportunity}
-          getItemKey={(opportunity) => opportunity.name}
-          showGroupHeaders={groupBy !== "none"}
-          emptyState={
-            emptyState || (
-              <div className="text-muted-foreground py-8 text-center">
-                {searchQuery || activeFilterIds.length > 0
-                  ? "No opportunities match your filters"
-                  : "No opportunities available"}
-              </div>
-            )
-          }
-        />
-      </ScrollArea>
-    </div>
-  );
-};