in dotcom-rendering/src/components/CrosswordSelect.editions.tsx [32:93]
export function CrosswordSelect<Crossword extends { name: string }>({
crosswordsByDate,
date,
onDateChange,
crosswordIndex,
onCrosswordIndexChange,
}: Props<Crossword>) {
const dates = Object.keys(crosswordsByDate);
if (dates.length === 0) {
return null;
}
return (
<div
css={{
display: 'flex',
flexDirection: 'column',
marginBottom: '20px',
[from.tablet]: {
maxWidth: '481px',
},
}}
>
<Select
id="date-select"
value={date}
onChange={(e) => onDateChange(e.target.value)}
label="Date"
>
{dates.map((crosswordDate) => (
<Option value={crosswordDate} key={crosswordDate}>
{crosswordDate}
</Option>
))}
</Select>
{crosswordsByDate[date] === undefined ||
crosswordsByDate[date].length === 0 ? null : (
<>
<Select
id="crossword-select"
label="Crossword"
value={crosswordIndex}
onChange={(e) => {
const index = parseInt(e.target.value);
if (!isNaN(index)) {
onCrosswordIndexChange(index);
}
}}
>
{crosswordsByDate[date].map((crossword, index) => (
<Option value={index} key={crossword.name}>
{crossword.name}
</Option>
))}
</Select>
</>
)}
</div>
);
}