Implement Category

src/Components/Category/Category.tsx

@@ -0,0 +1,60 @@
+import { ChevronRightIcon } from '@heroicons/react/outline';
+import React, { useState } from 'react';
+import { TruncateString } from '../../utils/stringtools';
+
+interface ICategoryProps {
+  children: JSX.Element | JSX.Element[]
+  category: string
+}
+
+export function Category(props: ICategoryProps): JSX.Element {
+  const [isOpen, setIsOpen] = useState(false);
+
+  if (isOpen) {
+    return (
+      <button type="button"
+        className='overflow-hidden h-full transition-all'
+        key={props.category}
+        id={props.category}
+        title={props.category}
+      >
+        <div
+          className='flex flex-row group full'
+          onClick={() => setIsOpen(!isOpen)}
+        >
+          <span className={'transition-all flex-1 h-full justify-center sidebar-component-left rounded-b-none bg-slate-400/60 group-hover:bg-blue-600'}>
+            {TruncateString(props.category, 25)}
+          </span>
+          <span className={'flex-none h-full justify-center sidebar-component-right rounded-b-none'}>
+            <ChevronRightIcon className='transition-all w-5 rotate-90' />
+          </span>
+        </div>
+        <div className='transition-all grid gap-2 p-2 bg-slate-400/60 overflow-auto rounded-b-lg visible'>
+          { props.children }
+        </div>
+      </button>
+    );
+  }
+
+  return (
+    <button type="button"
+      className='overflow-visible h-16 group transition-all'
+      key={props.category}
+      id={props.category}
+      title={props.category}
+      onClick={() => setIsOpen(!isOpen)}
+    >
+      <div className='flex flex-row h-full'>
+        <span className='flex-1 h-full justify-center sidebar-component-left'>
+          {TruncateString(props.category, 25)}
+        </span>
+        <span className='flex-none h-full justify-center sidebar-component-right'>
+          <ChevronRightIcon className='transition-all w-5' />
+        </span>
+      </div>
+      <div className='transition-all overflow-hidden rounded-b-lg hidden'>
+        { props.children }
+      </div>
+    </button>
+  );
+}