feat: add marketplace sold history tabs

src/components/marketplace/SoldHistoryTabs.test.tsx

@@ -0,0 +1,26 @@
+/** @vitest-environment happy-dom */
+
+import { describe, expect, it } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { SoldHistoryTabs } from './SoldHistoryTabs';
+
+describe('SoldHistoryTabs', () => {
+  it('switches to an accessible sold-history panel', () => {
+    render(
+      <SoldHistoryTabs
+        active={<p>Active listings</p>}
+        sold={[{ id: '1', title: 'Commitment', price: '$100', soldAt: '2026-07-01' }]}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('tab', { name: 'Sold history' }));
+    expect(screen.getByRole('tab', { name: 'Sold history' })).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByText('Sale price: $100')).toBeInTheDocument();
+  });
+
+  it('shows an empty state when there is no sold history', () => {
+    render(<SoldHistoryTabs active={<p>Active listings</p>} sold={[]} />);
+    fireEvent.click(screen.getByRole('tab', { name: 'Sold history' }));
+    expect(screen.getByText('No sold listings yet.')).toBeInTheDocument();
+  });
+});

src/components/marketplace/SoldHistoryTabs.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { useState, type ReactNode } from 'react';
+
+export interface SoldHistoryListing {
+  id: string;
+  title: string;
+  price: string;
+  soldAt: string;
+}
+
+export function SoldHistoryTabs({
+  active,
+  sold,
+  renderActive,
+}: {
+  active: ReactNode;
+  sold: SoldHistoryListing[];
+  renderActive?: ReactNode;
+}) {
+  const [tab, setTab] = useState<'active' | 'sold'>('active');
+
+  return (
+    <section aria-label="Marketplace history">
+      <div role="tablist" aria-label="Marketplace listing status" className="mb-4 flex gap-2">
+        {(['active', 'sold'] as const).map((value) => (
+          <button
+            key={value}
+            type="button"
+            role="tab"
+            aria-selected={tab === value}
+            aria-controls={`marketplace-panel-${value}`}
+            onClick={() => setTab(value)}
+            className="rounded-lg border border-white/15 px-4 py-2 text-sm text-white"
+          >
+            {value === 'active' ? 'Active' : 'Sold history'}
+          </button>
+        ))}
+      </div>
+
+      {tab === 'active' ? (
+        <div id="marketplace-panel-active" role="tabpanel">
+          {renderActive ?? active}
+        </div>
+      ) : (
+        <div id="marketplace-panel-sold" role="tabpanel">
+          {sold.length === 0 ? (
+            <p className="rounded-lg border border-white/10 p-6 text-white/60">No sold listings yet.</p>
+          ) : (
+            <ul className="grid gap-3 sm:grid-cols-2">
+              {sold.map((listing) => (
+                <li key={listing.id} className="rounded-lg border border-white/10 p-4 text-white">
+                  <span className="block font-medium">{listing.title}</span>
+                  <span className="block text-white/70">Sale price: {listing.price}</span>
+                  <time className="block text-sm text-white/50" dateTime={listing.soldAt}>
+                    Sold {new Date(listing.soldAt).toLocaleDateString()}
+                  </time>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      )}
+    </section>
+  );
+}