first commit

components/counting/AccordionItem.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import CountBadge from './CountBadge.tsx';
+
+const AccordionItem: React.FC<{
+  id: string;
+  title: string;
+  count: number;
+  icon: string;
+  level: 'location' | 'coop' | 'floor';
+  children?: React.ReactNode;
+  isOpen: boolean;
+  onToggle: (id: string) => void;
+}> = ({ id, title, count, icon, level, children, isOpen, onToggle }) => {
+  const levelStyles = {
+    location: {
+      button: 'bg-gray-100 hover:bg-gray-200',
+      icon: 'text-gray-600',
+      title: 'text-lg font-bold text-gray-800',
+    },
+    coop: {
+      button: 'bg-white hover:bg-gray-50',
+      icon: 'text-gray-500',
+      title: 'font-semibold text-gray-700',
+    },
+    floor: {
+      button: 'bg-white',
+      icon: 'text-gray-500',
+      title: 'font-medium text-gray-700',
+    },
+  };
+
+  const styles = levelStyles[level];
+
+  return (
+    <div className={level === 'coop' ? 'pl-4' : ''}>
+      <div
+        className={`flex items-center justify-between p-3 rounded-md transition-colors ${styles.button}`}
+      >
+        <div className="flex items-center gap-4 flex-grow truncate">
+          <i className={`fa-solid ${icon} w-6 text-center text-xl ${styles.icon}`}></i>
+          <span className={`truncate ${styles.title}`} title={title}>
+            {title}
+          </span>
+        </div>
+        <div className="flex items-center gap-4 flex-shrink-0">
+          <CountBadge count={count} />
+          {children && (
+            <button
+              onClick={() => onToggle(id)}
+              className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-300/50"
+            >
+              <i
+                className={`fa-solid fa-chevron-down transform transition-transform ${isOpen ? 'rotate-180' : ''}`}
+              ></i>
+            </button>
+          )}
+        </div>
+      </div>
+      {isOpen && <div className="mt-2">{children}</div>}
+    </div>
+  );
+};
+
+export default AccordionItem;