- {/* Add market content here */}
+ const [search, setSearch] = useState('')
+ const [sortConfig, setSortConfig] = useState<{
+ key: keyof MarketItem | null;
+ direction: 'asc' | 'desc' | null;
+ }>({ key: null, direction: null })
+ const [loading, setLoading] = useState(false)
+
+ // Available digital rights
+ const availableRights: DigitalRight[] = [
+ { id: '2', name: 'Append data pool', description: 'Permits adding new data entries to existing pools while maintaining schema requirements' },
+ { id: '3', name: 'Execute Median WASM', description: 'Enables running Rust WebAssembly-based median calculations on data pools' },
+ { id: '4', name: 'Execute Median Python', description: 'Allows execution of Python-based median computations on data pools' }
+ ]
+
+ // Sample market data (replace with API call)
+ const items: MarketItem[] = [
+ {
+ name: "Market Analysis 2024",
+ description: "Consumer behavior trends Q1",
+ price: "$299",
+ digitalRights: availableRights[0],
+ seller: "AnalyticsCorp",
+ state: "available"
+ },
+ {
+ name: "Customer Demographics",
+ description: "Age distribution study",
+ price: "$199",
+ digitalRights: availableRights[1],
+ seller: "DataMetrics",
+ state: "available"
+ },
+ {
+ name: "Product Analytics",
+ description: "Usage patterns Q4 2023",
+ price: "$399",
+ digitalRights: availableRights[2],
+ seller: "InsightPro",
+ state: "available"
+ }
+ ]
+
+ // Handle sort
+ const handleSort = (key: keyof MarketItem) => {
+ let direction: 'asc' | 'desc' | null = 'asc'
+
+ if (sortConfig.key === key) {
+ if (sortConfig.direction === 'asc') direction = 'desc'
+ else if (sortConfig.direction === 'desc') direction = null
+ }
+
+ setSortConfig({ key, direction })
+ }
+
+ // Get sort icon
+ const getSortIcon = (key: keyof MarketItem) => {
+ if (sortConfig.key !== key) return
+ if (sortConfig.direction === 'asc') return
+ if (sortConfig.direction === 'desc') return
+ return
+ }
+
+ // Filter and sort items
+ const filteredAndSortedItems = items
+ .filter(item => {
+ const searchTerm = search.toLowerCase()
+ return (
+ item.name.toLowerCase().includes(searchTerm) ||
+ item.description.toLowerCase().includes(searchTerm) ||
+ item.seller.toLowerCase().includes(searchTerm) ||
+ item.digitalRights.name.toLowerCase().includes(searchTerm)
+ )
+ })
+ .sort((a, b) => {
+ if (!sortConfig.key || !sortConfig.direction) return 0
+
+ const aValue = a[sortConfig.key]
+ const bValue = b[sortConfig.key]
+
+ if (aValue < bValue) return sortConfig.direction === 'asc' ? -1 : 1
+ if (aValue > bValue) return sortConfig.direction === 'asc' ? 1 : -1
+ return 0
+ })
+
+ return (
+
+
Market
+
+
+ {/* Search */}
+
-
- )
+
+ {/* Table */}
+
+
+
+
+ handleSort('name')}
+ >
+
+ Name
+ {getSortIcon('name')}
+
+
+ handleSort('description')}
+ >
+
+ Description
+ {getSortIcon('description')}
+
+
+ handleSort('price')}
+ >
+
+ Price
+ {getSortIcon('price')}
+
+
+ handleSort('digitalRights')}
+ >
+
+ Digital Rights
+ {getSortIcon('digitalRights')}
+
+
+ handleSort('seller')}
+ >
+
+ Seller
+ {getSortIcon('seller')}
+
+
+
+
+
+ {loading ? (
+
+
+ Loading...
+
+
+ ) : (
+ filteredAndSortedItems.map((item, index) => (
+
+ {item.name}
+ {item.description}
+ {item.price}
+
+
+ {item.digitalRights.name}
+
+
+ {item.seller}
+
+
+ Buy
+
+
+
+ ))
+ )}
+ {!loading && filteredAndSortedItems.length === 0 && (
+
+
+ No results found.
+
+
+ )}
+
+
+
+
+
+ )
}
\ No newline at end of file
diff --git a/ntc-web/app/page.tsx b/ntc-web/app/page.tsx
index c929406..9df4c3a 100644
--- a/ntc-web/app/page.tsx
+++ b/ntc-web/app/page.tsx
@@ -1,8 +1,48 @@
-// app/page.tsx
"use client"
+import { useState } from 'react'
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "@/components/ui/table"
+import { Card } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { Input } from "@/components/ui/input"
+import { ExternalLink, ChevronDown, ChevronUp, ChevronsUpDown } from 'lucide-react'
+
+interface StatsItem {
+ label: string
+ value: string
+}
+
+interface DigitalRight {
+ id: string
+ name: string
+ description: string
+}
+
+interface Pool {
+ id: number
+ name: string
+ description: string
+ rights: string[]
+ contractAddress: string
+}
+
+type SortField = 'name' | 'description' | 'rights' | 'contractAddress';
+type SortDirection = 'asc' | 'desc' | null;
+
export default function Home() {
- const statsItems = [
+ const [search, setSearch] = useState('')
+ const [sortField, setSortField] = useState