export function CrosswordSelect()

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