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} + +
  • + ))} +
+ )} +
+ )} +
+ ); +}