40 lines
1.6 KiB
TypeScript
40 lines
1.6 KiB
TypeScript
import { ChevronRightIcon } from '@heroicons/react/outline';
|
|
import React, { useState } from 'react';
|
|
import { ICategory } from '../../Interfaces/ICategory';
|
|
import { TruncateString } from '../../utils/stringtools';
|
|
|
|
interface ICategoryProps {
|
|
children: JSX.Element | JSX.Element[]
|
|
category: ICategory
|
|
}
|
|
|
|
export function Category(props: ICategoryProps): JSX.Element {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
const categoryType: string = props.category.Type;
|
|
const categoryDisplayedText: string = props.category.DisplayedText ?? categoryType;
|
|
|
|
return (
|
|
<div
|
|
className={` transition-all text-center ${isOpen ? 'overflow-hidden h-full' : 'overflow-visible h-16'}`}
|
|
key={categoryType}
|
|
id={categoryType}
|
|
title={categoryDisplayedText}
|
|
>
|
|
<div
|
|
className='flex flex-row group cursor-pointer h-16'
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
>
|
|
<span className={`transition-all flex-1 h-full justify-center sidebar-component-left ${isOpen ? 'rounded-b-none bg-slate-400/80 group-hover:bg-blue-600' : ''}`}>
|
|
{TruncateString(categoryDisplayedText, 25)}
|
|
</span>
|
|
<span className={`flex-none h-full justify-center sidebar-component-right ${isOpen ? 'rounded-b-none' : ''}`}>
|
|
<ChevronRightIcon className={`transition-all w-5 ${isOpen ? 'rotate-90' : ''}`} />
|
|
</span>
|
|
</div>
|
|
<div className={`transition-all grid gap-2 p-2 rounded-b-lg ${isOpen ? 'visible overflow-auto bg-slate-400/80' : 'hidden overflow-hidden'}`}>
|
|
{ props.children }
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|