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