preact#JSX TypeScript Examples
The following examples show how to use
preact#JSX.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Img.tsx From adyen-web with MIT License | 6 votes |
|
export default function Img(props: ImgProps) {
const { backgroundUrl = '', className = '', classNameModifiers = [], src = '', alt = '', showOnError = false } = props;
const [loaded, setLoaded] = useState(false);
const imageRef = useRef(null);
const handleLoad = () => {
setLoaded(true);
};
const handleError = () => {
setLoaded(showOnError);
};
const classNames = cx(
[className],
'adyen-checkout__image',
{ 'adyen-checkout__image--loaded': loaded },
...classNameModifiers.map(modifier => `adyen-checkout__image--${modifier}`)
);
useEffect(() => {
const image = backgroundUrl ? new Image() : imageRef.current;
image.src = backgroundUrl || src;
image.onload = handleLoad;
setLoaded(!!image.complete);
}, []);
if (backgroundUrl) {
return <div style={{ backgroundUrl } as JSX.CSSProperties} {...props} className={classNames} />;
}
return <img {...props} alt={alt} ref={imageRef} className={classNames} onError={handleError} />;
}
Example #2
| Source File: imagery.tsx From homebridge-vieramatic with Apache License 2.0 | 6 votes |
|
PanasonicLogo = (props: JSX.SVGAttributes<SVGSVGElement>): JSX.Element => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 600 91.7"
preserveAspectRatio="xMidYMid meet"
x="0"
y="0"
{...props}
>
<path d="M43.59 61.96H27.17V40.98h10.67c2.02 0 3.74-.05 5.76-.16a8.78 8.78 0 0 0 6.81-3.67 8.21 8.21 0 0 0 1.6-3.9c.18-1.24.2-2.3.08-3.56a9.01 9.01 0 0 0-9.02-8.17h-15.9v68.02H0V0H44.4c1.77 0 3.26.03 5.03.13C61.22.76 70.93 7.31 75.92 18a30.6 30.6 0 0 1 2.81 17.02A29.06 29.06 0 0 1 55.7 60.65a53.6 53.6 0 0 1-12.1 1.31" />
<path
id="a"
strokeWidth="3.65"
d="M144.48 84.53c-.36-5.27-.56-9.73-.67-15.02-.14-6.95-.22-12.8-.27-19.75a40.94 40.94 0 0 0-1.38-10.54 16.68 16.68 0 0 0-8.3-10.77A27.03 27.03 0 0 0 126 25.5a66.75 66.75 0 0 0-26.67-.53c-2.6.45-4.77 1.08-7.22 2.1a19.22 19.22 0 0 0-11.38 12.46 15.3 15.3 0 0 0-.61 6.6c.04.42.15.78.34 1.17l21.53.53a9.65 9.65 0 0 1 .58-3.82 6.54 6.54 0 0 1 4.06-4.07 12.57 12.57 0 0 1 8.59-.15 5.88 5.88 0 0 1 3.9 3.95c.36 1.2.18 2.4-.55 3.43a5.12 5.12 0 0 1-2.46 1.92c-.64.25-1.2.42-1.85.6a84.5 84.5 0 0 1-8.6 1.87c-2.42.4-4.46.77-6.86 1.26a76.94 76.94 0 0 0-9.13 2.38 19.15 19.15 0 0 0-7.4 4.32 15.61 15.61 0 0 0-5.12 9.71c-.37 2.61-.28 4.88.3 7.45a17.8 17.8 0 0 0 12.7 13.51 31.1 31.1 0 0 0 21.16-1.07 20.2 20.2 0 0 0 8.38-6.12l-1.52-11a9.3 9.3 0 0 1-4.26 3.63c-1.7.75-3.25 1.15-5.1 1.34-1.55.15-2.89.04-4.39-.38a6.23 6.23 0 0 1-3.03-1.82 5.41 5.41 0 0 1-1.4-2.69 4.28 4.28 0 0 1 1.46-4.23 8.39 8.39 0 0 1 2.7-1.58 94.5 94.5 0 0 1 7.2-2.34c3.09-.87 5.64-1.81 8.57-3.16.28 2.34.27 4.34-.06 6.67-.23 1.71-.76 3.12-1.69 4.56l1.52 11c.47 1.56.9 2.86 1.44 4.4.3.85.7 1.51 1.3 2.18h23.7a10.28 10.28 0 0 1-1.65-5.04"
/>
<path
id="b"
strokeWidth="3.65"
d="M172.83 32.34a39.66 39.66 0 0 1 9.93-6.45 25.96 25.96 0 0 1 18.9-1.4 20.62 20.62 0 0 1 14.27 13.94 30.88 30.88 0 0 1 1.52 9.83v41.28h-25.4V52.42c0-1.24-.16-2.3-.52-3.48a7.04 7.04 0 0 0-4.13-4.57 9.58 9.58 0 0 0-12.08 4 10.41 10.41 0 0 0-1.5 5.53v35.64h-24.6V25.58h23.07l.54 6.76"
/>
<use width="100%" height="100%" transform="translate(143.6)" xlinkHref="#a" />
<path d="M323.58 66.03c1.83.31 3.36.7 5.12 1.28a4.1 4.1 0 0 1 2.8 3.13 4.67 4.67 0 0 1-1.29 4.4 7.33 7.33 0 0 1-4.25 2.17c-2.26.36-4.26.18-6.4-.6a8.64 8.64 0 0 1-2.73-1.55 6.89 6.89 0 0 1-2.23-3.36 10.4 10.4 0 0 1-.48-3.41H290.7v1.36c0 2.2.34 4.07 1.11 6.14 1.18 3.1 2.79 5.5 5.22 7.76a24.87 24.87 0 0 0 10.65 6 56.77 56.77 0 0 0 25.36 1.6 35.03 35.03 0 0 0 11.37-3.7 23 23 0 0 0 4.4-2.95A19.48 19.48 0 0 0 354.97 63a15.54 15.54 0 0 0-4.82-7.29 26.96 26.96 0 0 0-10.6-5.77l-2.56-.73a113.9 113.9 0 0 0-14.48-3.08c-1.38-.2-2.54-.42-3.9-.74a9 9 0 0 1-1.73-.6 2.86 2.86 0 0 1-1.44-3.78l.11-.22a5.58 5.58 0 0 1 3.43-2.72c2.68-.77 5.14-.7 7.77.18a5.81 5.81 0 0 1 3.98 5.83h22.58a22.28 22.28 0 0 0-1.38-7.72 13.73 13.73 0 0 0-4.62-6.4 21.94 21.94 0 0 0-6.03-3.44 32.78 32.78 0 0 0-6.54-1.82 66.63 66.63 0 0 0-16.07-.9c-3.24.18-5.97.58-9.14 1.32-4.26 1-7.7 2.65-11.14 5.35a17.76 17.76 0 0 0-6.07 8.49 17.86 17.86 0 0 0 .42 12.48 17 17 0 0 0 9.85 9.85c2.37.94 4.44 1.56 6.94 2.07 4.93 1.02 9.1 1.81 14.06 2.66M400.3 24.36c-2.53-.4-4.69-.57-7.25-.57-2.56 0-4.71.17-7.25.57a33.22 33.22 0 0 0-18.65 9.25 30.42 30.42 0 0 0-9.6 19.96 36.59 36.59 0 0 0 1.25 13.76c2 7.22 5.78 12.8 11.73 17.35a30.34 30.34 0 0 0 12.63 5.86 43.8 43.8 0 0 0 9.9 1.06c3.5 0 6.46-.3 9.89-1.06a30.35 30.35 0 0 0 12.63-5.86L401.84 69.7a9.63 9.63 0 0 1-12.74 4.83 9.28 9.28 0 0 1-4.83-4.83 22.31 22.31 0 0 1-1.81-6.17c-.68-4.5-.6-8.4.27-12.86.45-2.31 1.23-4.2 2.52-6.18a9.34 9.34 0 0 1 15.6 0 16.43 16.43 0 0 1 2.52 6.18c.87 4.47.96 8.37.28 12.86-.34 2.25-.88 4.1-1.81 6.17l13.74 14.98a31.58 31.58 0 0 0 11.72-17.35c1.31-4.7 1.69-8.9 1.25-13.76a30.4 30.4 0 0 0-9.6-19.96 33.19 33.19 0 0 0-18.65-9.25" />
<use width="100%" height="100%" transform="translate(282.89)" xlinkHref="#b" />
<path d="M505.26 0v16.9h23.91V0zm0 25.59v63.96h23.91V25.59zM593.4 81.25a31.2 31.2 0 0 1-17.18 9.49c-4.64.94-8.7 1.14-13.41.65a31.59 31.59 0 0 1-16.44-6.42 34.24 34.24 0 0 1-9.63-10.82 29.79 29.79 0 0 1-3.78-10.58c-.9-5.44-.66-10.22.77-15.54 3.27-12.1 12.36-20.67 24.63-23.22 7-1.45 13.22-1.3 20.15.49a27.84 27.84 0 0 1 12.57 6.89 25.35 25.35 0 0 1 5.5 7.21 19.24 19.24 0 0 1 2.27 10.4h-21.87a10.68 10.68 0 0 0-4.24-7.06 8.9 8.9 0 0 0-10.27-.5 10.15 10.15 0 0 0-4.5 5.79 29.54 29.54 0 0 0-.28 17.56 13.26 13.26 0 0 0 3.83 6.34 9.13 9.13 0 0 0 7.9 2.5 7.35 7.35 0 0 0 4.62-2.48 9.5 9.5 0 0 0 2.4-4.93c.24-1.35.37-2.5.45-3.87h23.05a23.13 23.13 0 0 1-6.54 18.1" />
</svg>
)
Example #3
| Source File: bracket.tsx From big-web-quiz with Apache License 2.0 | 6 votes |
|
private _createBracket(result: Result): JSX.Element {
const cols = [
<div class="bracket-center">
<div class="bracket-center-items">
{createCenterItem(this.props.topics, this.props.champions, result, 0)}
<div class="bracket-center-vs">
<VS />
</div>
{createCenterItem(this.props.topics, this.props.champions, result, 1)}
</div>
</div>,
];
for (let i = 0; i < 2; i++) {
if (typeof result.items[i] === 'string') continue;
const newCols = this._createBracketColumns(
[result.items[i] as Result],
[[i]],
1,
i === 0,
);
if (i === 0) {
cols.unshift(...newCols.reverse());
} else {
cols.push(...newCols);
}
}
return <div class="bracket">{cols}</div>;
}
Example #4
| Source File: index.tsx From big-web-quiz with Apache License 2.0 | 6 votes |
|
Select: FunctionalComponent<JSX.HTMLAttributes> = props => {
const { class: className, ...selectProps } = props;
return (
<div class={'select' + (className ? ' ' + className : '')}>
<select {...selectProps}></select>
<div class="select-icon">
<svg class="fill-current h-4 w-4" viewBox="0 0 20 20">
<path d="M9.3 13l.7.7L15.7 8l-1.5-1.4-4.2 4.2-4.2-4.2L4.3 8z" />
</svg>
</div>
</div>
);
}
Example #5
| Source File: sort.tsx From gridjs with MIT License | 6 votes |
|
changeDirection(e: JSX.TargetedMouseEvent<HTMLButtonElement>): void {
e.preventDefault();
e.stopPropagation();
// to sort two or more columns at the same time
this.actions.sortToggle(
this.props.index,
e.shiftKey === true && this.config.sort.multiColumn,
this.props.compare,
);
}
Example #6
| Source File: td.tsx From gridjs with MIT License | 6 votes |
|
private handleClick(e: JSX.TargetedMouseEvent<HTMLTableCellElement>): void {
if (this.props.messageCell) return;
this.config.eventEmitter.emit(
'cellClick',
e,
this.props.cell,
this.props.column,
this.props.row,
);
}
Example #7
| Source File: Links.tsx From remind with MIT License | 6 votes |
|
Links = (props: LinksProps) => {
const { layoutRoot, layout } = props
const linkTheme = useContext(ThemeContext).link
const model = Model.useContainer()
const links: JSX.Element[] = []
layoutRoot.each((node) => {
node.children?.forEach((child) => {
links.push(
linkTheme.render(node, child, {
layout,
justify: model.getNodeJustify(child.data.id),
}),
)
})
})
return <g className="links">{links}</g>
}
Example #8
| Source File: imagery.tsx From homebridge-vieramatic with Apache License 2.0 | 5 votes |
|
VieraLogo = (props: JSX.SVGAttributes<SVGSVGElement>): JSX.Element => (
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
id="svg4588"
viewBox="0 0 302.00001 111.97555"
preserveAspectRatio="xMidYMid meet"
x="0"
y="0"
{...props}
>
<defs id="defs4590" />
<g transform="translate(1243.319,113.58067)" id="layer1">
<g transform="matrix(1.8851444,0,0,-1.8851444,-1069.3004,-44.136734)" id="g3664">
<path
id="path3666"
style={{ fillOpacity: '1', fillRule: 'nonzero', stroke: 'none' }}
d="m 0,0 c 0.011,-0.234 0.104,-11.507 0.104,-11.614 -0.087,-0.039 -20.373,-9.349 -20.598,-9.466 0,0.258 -0.287,46.641 -0.293,46.748 0.929,0.482 20.37,9.46 20.573,9.552 l 0.035,0.023 c 0.004,-0.26 0.069,-11.6 0.069,-11.688 l -10.208,-4.969 -0.007,-6.491 c 0,0 9.657,4.433 9.882,4.549 0.006,-0.26 0.071,-9.891 0.071,-9.987 L -10.244,2 l 0.03,-6.436 0.131,0.051 C -9.703,-4.195 -1.061,-0.52 0,0"
/>
</g>
<g transform="matrix(1.8851444,0,0,-1.8851444,-1158.3227,-99.62596)" id="g3668">
<path
id="path3670"
style={{ fillOpacity: '1', fillRule: 'nonzero', stroke: 'none' }}
d="m 0,0 c 0,-0.105 0.405,-50.311 0.41,-50.571 0.22,0.099 11.037,4.702 11.134,4.761 0,0.101 -0.238,50.454 -0.238,50.707 C 11.066,4.78 0.101,0.047 0,0"
/>
</g>
<g transform="matrix(1.8851444,0,0,-1.8851444,-961.94147,-112.58067)" id="g3672">
<path
id="path3674"
style={{ fillOpacity: '1', fillRule: 'nonzero', stroke: 'none' }}
d="m 0,0 c -0.178,-0.135 -9.602,-5.468 -9.665,-5.499 -0.015,-0.076 -8.534,-52.141 -8.597,-52.503 0.302,0.184 11.079,6.831 11.129,6.876 0.121,0.746 2.988,21.225 3.491,24.719 0.087,0.566 0.109,1.673 0.252,1.673 0.154,0 0.2,-0.974 0.322,-1.632 0.645,-2.895 4.156,-18.386 4.462,-19.776 0.2,0.144 8.92,5.433 9.015,5.498 C 10.395,-40.535 0.054,-0.225 0,0"
/>
</g>
<g transform="matrix(1.8851444,0,0,-1.8851444,-1042.6088,-74.027584)" id="g3676">
<path
id="path3678"
style={{ fillOpacity: '1', fillRule: 'nonzero', stroke: 'none' }}
d="m 0,0 c 0,-0.355 0.034,-33.077 0.046,-35.602 0.155,0.109 0.544,0.32 0.544,0.32 l 10.305,5.428 c 0,0.988 -0.122,18.72 -0.122,18.73 l -0.04,3.826 c -0.022,0.854 -0.048,1.646 -0.048,2.407 0,4.188 0.56,7.483 4.495,9.767 0.208,0.119 4.061,2.207 4.494,2.467 0,0.062 0.068,12.477 0.068,12.753 C 18.543,19.457 8.588,14.167 8.588,14.167 3.772,11.421 0.156,5.472 0,0"
/>
</g>
<g transform="matrix(1.8851444,0,0,-1.8851444,-1204.8574,-69.454224)" id="g3680">
<path
id="path3682"
style={{ fillOpacity: '1', fillRule: 'nonzero', stroke: 'none' }}
d="m 0,0 c -0.436,-3.849 -1.08,-8.368 -1.367,-10.55 -0.154,-1.101 0,-1.727 -0.213,-1.727 -0.235,0 -0.158,0.567 -0.475,1.587 -0.364,1.179 -0.839,2.796 -1.483,4.912 -1.766,5.827 -4.962,16.521 -6.05,20.193 -0.166,-0.062 -10.17,-3.043 -10.284,-3.115 0.052,-0.135 14.607,-46.554 14.66,-46.761 0.183,0.108 10.486,5.687 10.566,5.73 0.004,0.089 6.743,50.42 6.788,50.723 C 11.882,20.865 1.982,17.956 1.906,17.905 1.513,15.425 0.795,6.91 0,0"
/>
</g>
</g>
</svg>
)
Example #9
| Source File: imagery.tsx From homebridge-vieramatic with Apache License 2.0 | 5 votes |
|
logosCSS: JSX.CSSProperties = { fill: '#124686', height: '2em' }
Example #10
| Source File: index.tsx From big-web-quiz with Apache License 2.0 | 5 votes |
|
private _createBracketColumns(
results: Result[],
resultsPaths: string[],
stage: number,
): JSX.Element[] {
const toCreate = 2 ** stage / 2;
const mapper = Array(toCreate).fill(undefined);
const cols = [
<div
class={`bracket-column${stage === 1 ? ' bracket-column-semis' : ''}`}
>
{mapper.map((_, i) => (
<div class="bracket-items-container">
{results[i] && [
...results[i].items.map(item => (
<div
class={`bracket-item${
typeof item === 'string' ? ' bracket-item-leaf' : ''
}`}
>
{this._getResultLabel(item) ||
(typeof item === 'string' ? 'Unselected' : 'Undecided')}
</div>
)),
<button
class="button result-edit-button"
data-path={resultsPaths[i]}
onClick={this._onSelectBracketClick}
>
...
</button>,
]}
</div>
))}
</div>,
];
const nextResults: Result[] = [];
const nextResultsPaths: string[] = [];
for (const [i, result] of results.entries()) {
const path = resultsPaths[i];
for (let itemI = 0; itemI < 2; itemI++) {
if (typeof result.items[itemI] === 'string') continue;
nextResults.push(result.items[itemI] as Result);
nextResultsPaths.push(path + '/items/' + itemI);
}
}
if (nextResults.length !== 0) {
cols.push(
...this._createBracketColumns(nextResults, nextResultsPaths, stage + 1),
);
}
return cols;
}
Example #11
| Source File: index.tsx From big-web-quiz with Apache License 2.0 | 5 votes |
|
private _createBracket(result: Result): JSX.Element {
const cols = [
<div class="bracket-center">
<div class="bracket-center-items">
<div class="bracket-center-item">
{this._getResultLabel(result.items[0]) ||
(typeof result.items[0] === 'string'
? 'Unselected'
: 'Undecided')}
</div>
<div class="bracket-center-vs">
<button
class="button"
data-path="/"
onClick={this._onSelectBracketClick}
>
...
</button>
</div>
<div class="bracket-center-item">
{this._getResultLabel(result.items[1]) ||
(typeof result.items[0] === 'string'
? 'Unselected'
: 'Undecided')}
</div>
</div>
</div>,
];
for (let i = 0; i < 2; i++) {
if (typeof result.items[i] === 'string') continue;
const newCols = this._createBracketColumns(
[result.items[i] as Result],
['/items/' + i],
1,
);
if (i === 0) {
cols.unshift(...newCols.reverse());
} else {
cols.push(...newCols);
}
}
return <div class="bracket">{cols}</div>;
}
Example #12
| Source File: th.tsx From gridjs with MIT License | 5 votes |
|
private onClick(e: JSX.TargetedMouseEvent<HTMLInputElement>): void {
e.stopPropagation();
if (this.isSortable()) {
this.sortRef.current.changeDirection(e);
}
}
Example #13
| Source File: th.tsx From gridjs with MIT License | 5 votes |
|
private keyDown(e: JSX.TargetedMouseEvent<HTMLInputElement>): void {
if (this.isSortable() && e.which === 13) {
this.onClick(e);
}
}
Example #14
| Source File: tr.tsx From gridjs with MIT License | 5 votes |
|
private handleClick(e: JSX.TargetedMouseEvent<HTMLTableRowElement>): void {
if (this.props.messageRow) return;
this.config.eventEmitter.emit('rowClick', e, this.props.row);
}
Example #15
| Source File: bracket.tsx From big-web-quiz with Apache License 2.0 | 4 votes |
|
private _createBracketColumns(
results: Result[],
resultPaths: number[][],
stage: number,
isLeftHandSide: boolean,
): JSX.Element[] {
const toCreate = 2 ** stage / 2;
const mapper = Array(toCreate).fill(undefined);
const cols = [
<div
class={`bracket-column${stage === 1 ? ' bracket-column-semis' : ''}${
isLeftHandSide ? ' bracket-column-left' : ''
}`}
>
{mapper.map((_, i) => {
// lol this needs refactoring
let topColor = '';
let bottomColor = '';
let nextColor = '';
if (results[i]) {
const result = results[i];
const topTopic = getResultTopic(this.props.topics, result.items[0]);
const bottomTopic = getResultTopic(
this.props.topics,
result.items[1],
);
if (result.winningIndex === 0 && topTopic) {
nextColor = topColor = getHexColor(
getMidColor(
palette[topTopic.colorId][0],
palette[topTopic.colorId][1],
),
);
} else if (result.winningIndex === 1 && bottomTopic) {
nextColor = bottomColor = getHexColor(
getMidColor(
palette[bottomTopic.colorId][0],
palette[bottomTopic.colorId][1],
),
);
}
}
return (
<div class="bracket-items-container">
{results[i] && [
...results[i].items.map((item, itemIndex) => {
const topic = getResultTopic(this.props.topics, item);
const champImg =
this.props.champions[topic?.championId || '']?.picture ||
'';
const won = results[i].winningIndex === itemIndex;
const lost = results[i].winningIndex !== -1 && !won;
return (
<div class="bracket-item">
<div
class={`bracket-item-content${lost ? ' lost' : ''}`}
data-path={[...resultPaths[i], itemIndex].join('-')}
>
<div class="bracket-item-box">
{topic ? topic.label : 'TBD'}
<div
class="bracket-item-tbd"
style={{ opacity: topic ? 0 : 1 }}
>
TBD
</div>
{topic && (
<div
class="bracket-item-win"
style={{
opacity: won ? 1 : 0,
'--color-from': getHexColor(
palette[topic.colorId][0],
),
'--color-to': getHexColor(
palette[topic.colorId][1],
),
}}
>
{topic ? topic.label : 'TBD'}
</div>
)}
</div>
<div class="bracket-item-champion">
{[
topic?.championId && (
<img src={champImg || genericAvatarURL} />
),
<div
class="bracket-item-champion-unknown"
style={{ opacity: topic?.championId ? 0 : 1 }}
>
?
</div>,
]}
</div>
</div>
</div>
);
}),
stage === 1 ? (
<div class="bracket-lines-semi">
<div
class="bracket-line bracket-line-semi-top"
style={{ '--line-color': topColor }}
/>
<div
class="bracket-line bracket-line-semi-bottom"
style={{ '--line-color': bottomColor }}
/>
<div
class="bracket-line-circle bracket-line-circle-top-1"
style={{
'--line-color': topColor,
background: topColor,
}}
/>
<div
class="bracket-line-circle bracket-line-circle-top-2"
style={{
'--line-color': topColor,
background: topColor,
}}
/>
<div
class="bracket-line-circle bracket-line-circle-bottom-1"
style={{
'--line-color': bottomColor,
background: bottomColor,
}}
/>
<div
class="bracket-line-circle bracket-line-circle-bottom-2"
style={{
'--line-color': bottomColor,
background: bottomColor,
}}
/>
</div>
) : (
<div class="bracket-lines">
<div
class="bracket-line bracket-line-top"
style={{ '--line-color': topColor }}
/>
<div
class="bracket-line bracket-line-bottom"
style={{ '--line-color': bottomColor }}
/>
<div
class="bracket-line bracket-line-vertical-1"
style={{ '--line-color': topColor }}
/>
<div
class="bracket-line bracket-line-vertical-2"
style={{ '--line-color': bottomColor }}
/>
<div
class="bracket-line bracket-line-next"
style={{ '--line-color': nextColor }}
/>
<div
class="bracket-line-circle bracket-line-circle-top"
style={{ '--line-color': topColor, background: topColor }}
/>
<div
class="bracket-line-circle bracket-line-circle-bottom"
style={{
'--line-color': bottomColor,
background: bottomColor,
}}
/>
<div
class="bracket-line-circle bracket-line-circle-next"
style={{
'--line-color': nextColor,
background: nextColor,
}}
/>
</div>
),
]}
</div>
);
})}
</div>,
];
const nextResults: Result[] = [];
const nextResultsPath: number[][] = [];
for (const [i, result] of results.entries()) {
for (let itemI = 0; itemI < 2; itemI++) {
if (typeof result.items[itemI] === 'string') continue;
nextResults.push(result.items[itemI] as Result);
nextResultsPath.push([...resultPaths[i], itemI]);
}
}
if (nextResults.length !== 0) {
cols.push(
...this._createBracketColumns(
nextResults,
nextResultsPath,
stage + 1,
isLeftHandSide,
),
);
}
return cols;
}
