fix: collection-activity-data

BibliothecaDAO · Nov 24, 2024 · 56b08f5 · 56b08f5
1 parent e0d217d
commit 56b08f5
Showing 1 changed file with 11 additions and 144 deletions.
diff --git a/.../arkmarket/src/app/collection/[collectionAddress]/components/collection-activity-data.tsx b/.../arkmarket/src/app/collection/[collectionAddress]/components/collection-activity-data.tsx
@@ -36,149 +36,16 @@ export default function CollectionActivityData({
   );
 
   return (
-    <Table ref={tableRef}>
-      <TableHeader className="h-12">
-        <TableRow
-          className={cn(
-            "absolute grid w-full items-center",
-            gridTemplateColumnValue,
-          )}
-        >
-          <TableHead className="sticky top-0 flex items-center bg-background pl-5">
-            Event
-          </TableHead>
-          <TableHead className="sticky top-0 flex items-center bg-background">
-            Token
-          </TableHead>
-          <TableHead className="sticky top-0 flex items-center bg-background">
-            Price
-          </TableHead>
-          <TableHead className="sticky top-0 flex items-center bg-background">
-            From
-          </TableHead>
-          <TableHead className="sticky top-0 flex items-center bg-background">
-            To
-          </TableHead>
-          <TableHead className="sticky top-0 flex items-center bg-background">
-            Date
-          </TableHead>
-          <TableHead className="sticky top-0 flex items-center bg-background"></TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody
-        className="font-numbers relative text-sm font-medium"
-        style={{ height: `${rowVirtualizer.getTotalSize() + 2}px` }}
-      >
-        {rowVirtualizer.getVirtualItems().map((virtualRow) => {
-          const activity = collectionActivity[virtualRow.index];
-          if (activity === undefined) {
-            return null;
-          }
-
-          return (
-            <TableRow
-              className={cn(
-                "group absolute grid h-[6.25rem] w-full items-center",
-                gridTemplateColumnValue,
-              )}
-              data-index={virtualRow.index}
-              key={`${virtualRow.index}-${activity.time_stamp}-${activity.transaction_hash}`}
-              ref={(node) => rowVirtualizer.measureElement(node)}
-              style={{
-                transform: `translateY(${virtualRow.start}px)`,
-              }}
-            >
-              <TableCell className="items-center gap-4 whitespace-nowrap pl-5">
-                <div className="flex items-center gap-4 whitespace-nowrap">
-                  {activityTypeMetadata[activity.activity_type].icon}
-                  <p>{activityTypeMetadata[activity.activity_type].title}</p>
-                </div>
-              </TableCell>
-              <TableCell>
-                <div className="flex items-center gap-4">
-                  <Media
-                    alt={activity.token_metadata?.name ?? ""}
-                    className="size-[3.75rem] rounded-xs object-contain"
-                    height={120}
-                    width={120}
-                    src={activity.token_metadata?.image ?? undefined}
-                    mediaKey={activity.token_metadata?.image_key ?? undefined}
-                  />
-
-                  <div className="w-full overflow-hidden">
-                    <Link
-                      className={cn(
-                        "w-full text-base font-medium",
-                        focusableStyles,
-                        ellipsableStyles,
-                      )}
-                      href={`/token/${collectionAddress}/${activity.token_id}`}
-                    >
-                      {activity.token_metadata?.name ??
-                        `${activity.name} #${activity.token_id}`}
-                    </Link>
-                    <div className="flex w-full items-center gap-1">
-                      <Link
-                        className={focusableStyles}
-                        href={`/collection/${activity.address}`}
-                      >
-                        <p
-                          className={cn(
-                            "text-muted-foreground",
-                            ellipsableStyles,
-                          )}
-                        >
-                          {activity.name}
-                        </p>
-                      </Link>
-                      {activity.is_verified && (
-                        <VerifiedIcon className="size-4 text-primary" />
-                      )}
-                    </div>
-                  </div>
-                </div>
-              </TableCell>
-              <TableCell>
-                {activity.price ? <PriceTag price={activity.price} token="lords" /> : "_"}
-              </TableCell>
-              <TableCell>
-                {activity.from ? (
-                  <Link href={`/wallet/${activity.from}`}>
-                    {ownerOrShortAddress({
-                      ownerAddress: activity.from,
-                      address,
-                    })}
-                  </Link>
-                ) : (
-                  "_"
-                )}
-              </TableCell>
-              <TableCell>
-                {activity.to ? (
-                  <Link href={`/wallet/${activity.to}`}>
-                    {ownerOrShortAddress({
-                      ownerAddress: activity.to,
-                      address,
-                    })}
-                  </Link>
-                ) : (
-                  "_"
-                )}
-              </TableCell>
-              <TableCell>
-                {activity.time_stamp ? timeSince(activity.time_stamp) : "_"}
-              </TableCell>
-              <TableCell className="pr-5">
-                <Button asChild size="icon" variant="outline">
-                  <ExternalLink href="/">
-                    <ArrowUpRight className="size-5" />
-                  </ExternalLink>
-                </Button>
-              </TableCell>
-            </TableRow>
-          );
-        })}
-      </TableBody>
-    </Table>
+    <div className="w-full">
+      <div className="hidden md:block">
+        <DesktopCollectionActivityData
+          collectionAddress={collectionAddress}
+          collectionActivity={collectionActivity}
+        />
+      </div>
+      <div className="md:hidden">
+        <MobileCollectionActivity collectionActivity={collectionActivity} />
+      </div>
+    </div>
   );
 }