documentation page & help

frontend/src/components/ui/accordion/Accordion.tsx

@@ -0,0 +1,64 @@
+import React, { useState, ReactNode } from 'react';
+import { ChevronDownIcon } from '../../../icons';
+
+interface AccordionItemProps {
+  title: string;
+  children: ReactNode;
+  defaultOpen?: boolean;
+  className?: string;
+}
+
+export const AccordionItem: React.FC<AccordionItemProps> = ({
+  title,
+  children,
+  defaultOpen = false,
+  className = '',
+}) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  return (
+    <div className={`border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden ${className}`}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="w-full px-6 py-4 flex items-center justify-between bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
+      >
+        <h3 className="text-left font-semibold text-gray-900 dark:text-white">{title}</h3>
+        <ChevronDownIcon
+          className={`w-5 h-5 text-gray-500 dark:text-gray-400 transition-transform duration-200 ${
+            isOpen ? 'rotate-180' : ''
+          }`}
+        />
+      </button>
+      <div
+        className={`overflow-hidden transition-all duration-300 ease-in-out ${
+          isOpen ? 'max-h-[5000px] opacity-100' : 'max-h-0 opacity-0'
+        }`}
+      >
+        <div className="px-6 py-4 bg-gray-50 dark:bg-gray-900/50 border-t border-gray-200 dark:border-gray-700">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface AccordionProps {
+  children: ReactNode;
+  className?: string;
+  allowMultiple?: boolean;
+}
+
+export const Accordion: React.FC<AccordionProps> = ({
+  children,
+  className = '',
+  allowMultiple = true,
+}) => {
+  return (
+    <div className={`space-y-3 ${className}`}>
+      {children}
+    </div>
+  );
+};
+
+export default Accordion;
+

frontend/src/components/ui/accordion/index.ts

@@ -0,0 +1,3 @@
+export { Accordion, AccordionItem } from './Accordion';
+export { default } from './Accordion';
+