1import React, { FC } from 'react'; 2import { Block, BlocksPool } from './block'; 3import { BlockSpan } from './BlockSpan'; 4import styles from './blocks.module.css'; 5 6export const BlocksRow: FC<{ 7 blocks: Block[]; 8 gridMinTime: number; 9 gridMaxTime: number; 10 selectBlock: React.Dispatch<React.SetStateAction<Block | undefined>>; 11}> = ({ blocks, gridMinTime, gridMaxTime, selectBlock }) => { 12 return ( 13 <div className={styles.row}> 14 {blocks.map<JSX.Element>((b) => ( 15 <BlockSpan selectBlock={selectBlock} block={b} gridMaxTime={gridMaxTime} gridMinTime={gridMinTime} key={b.ulid} /> 16 ))} 17 </div> 18 ); 19}; 20 21export interface SourceViewProps { 22 data: BlocksPool; 23 title: string; 24 gridMinTime: number; 25 gridMaxTime: number; 26 selectBlock: React.Dispatch<React.SetStateAction<Block | undefined>>; 27} 28 29export const SourceView: FC<SourceViewProps> = ({ data, title, gridMaxTime, gridMinTime, selectBlock }) => { 30 return ( 31 <> 32 <div className={styles.source}> 33 <div className={styles.title} title={title}> 34 <span>{title}</span> 35 </div> 36 <div className={styles.rowsContainer}> 37 {Object.keys(data).map((k) => ( 38 <React.Fragment key={k}> 39 {data[k].map((b, i) => ( 40 <BlocksRow 41 selectBlock={selectBlock} 42 blocks={b} 43 key={`${k}-${i}`} 44 gridMaxTime={gridMaxTime} 45 gridMinTime={gridMinTime} 46 /> 47 ))} 48 </React.Fragment> 49 ))} 50 </div> 51 </div> 52 <hr /> 53 </> 54 ); 55}; 56