diff --git a/src/components/marketplace/SoldHistoryTabs.test.tsx b/src/components/marketplace/SoldHistoryTabs.test.tsx
new file mode 100644
index 00000000..c9388a51
--- /dev/null
+++ b/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(
+ Active listings
}
+ 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(Active listings} sold={[]} />);
+ fireEvent.click(screen.getByRole('tab', { name: 'Sold history' }));
+ expect(screen.getByText('No sold listings yet.')).toBeInTheDocument();
+ });
+});
diff --git a/src/components/marketplace/SoldHistoryTabs.tsx b/src/components/marketplace/SoldHistoryTabs.tsx
new file mode 100644
index 00000000..e4930602
--- /dev/null
+++ b/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 (
+
+
+ {(['active', 'sold'] as const).map((value) => (
+
+ ))}
+
+
+ {tab === 'active' ? (
+
+ {renderActive ?? active}
+
+ ) : (
+
+ {sold.length === 0 ? (
+
No sold listings yet.
+ ) : (
+
+ {sold.map((listing) => (
+ -
+ {listing.title}
+ Sale price: {listing.price}
+
+
+ ))}
+
+ )}
+
+ )}
+
+ );
+}