36 lines
900 B
JavaScript
36 lines
900 B
JavaScript
import React, { useState } from 'react';
|
|
import classNames from 'classnames';
|
|
import styles from './MenuLayout.module.css';
|
|
|
|
export default function MenuLayout({
|
|
menu,
|
|
selectedOption,
|
|
onMenuSelect,
|
|
className,
|
|
menuClassName,
|
|
contentClassName,
|
|
children,
|
|
}) {
|
|
function handleMenuSelect(option) {
|
|
onMenuSelect(option);
|
|
}
|
|
|
|
return (
|
|
<div className={classNames(styles.container, className)}>
|
|
<div className={classNames(styles.menu, menuClassName)}>
|
|
{menu.map(option =>
|
|
option ? (
|
|
<div
|
|
className={classNames(styles.option, { [styles.active]: option === selectedOption })}
|
|
onClick={() => handleMenuSelect(option)}
|
|
>
|
|
{option}
|
|
</div>
|
|
) : null,
|
|
)}
|
|
</div>
|
|
<div className={classNames(styles.content, contentClassName)}>{children}</div>
|
|
</div>
|
|
);
|
|
}
|