57 lines
1.8 KiB
JavaScript
57 lines
1.8 KiB
JavaScript
import FuseSvgIcon from '@fuse/core/FuseSvgIcon';
|
|
import Typography from '@mui/material/Typography';
|
|
import _ from '@lodash';
|
|
import clsx from 'clsx';
|
|
import { memo } from 'react';
|
|
|
|
function PropertiesHeader({ className, categories, layouts, onCategory, onLayout }) {
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
'flex items-center gap-44 w-full py-9 px-52 rounded-20 bg-white shadow-light',
|
|
className
|
|
)}
|
|
>
|
|
<div className="grow flex items-center justify-start gap-16 py-16 border-r-1 border-common-disabled">
|
|
{categories.map(({ name, amount, active }, idx) => (
|
|
<button
|
|
key={name + idx}
|
|
type="button"
|
|
className={clsx(
|
|
'text-2xl text-common-layout cursor-pointer',
|
|
active && 'text-secondary-main font-semibold cursor-default'
|
|
)}
|
|
onClick={() => onCategory(name)}
|
|
>{`${_.startCase(name)} (${amount})`}</button>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-60 py-16">
|
|
{layouts.map(({ name, active }, idx) => (
|
|
<button
|
|
key={name + idx}
|
|
type="button"
|
|
className={clsx(
|
|
'flex justify-center items-center gap-10 cursor-pointer',
|
|
active && '!cursor-default'
|
|
)}
|
|
onClick={() => onLayout(name)}
|
|
>
|
|
<FuseSvgIcon className={clsx('text-common-secondary', active && 'text-secondary-main')}>
|
|
{`heroicons-outline:view-${name}`}
|
|
</FuseSvgIcon>
|
|
<Typography
|
|
variant="body1"
|
|
className={clsx('text-2xl text-common-secondary', active && 'text-secondary-main')}
|
|
>
|
|
{_.startCase(name)}
|
|
</Typography>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default memo(PropertiesHeader);
|