Initial commit

src/renderer/components/tabs/addons/AddonList.tsx

@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import cls from 'classnames';
+
+import { type AddonData } from '~main/types';
+
+import AddonListItem, { type Dependencies } from './AddonListItem';
+import AddonItemErrorBoundary from './AddonItemErrorBoundary';
+
+type Props = {
+	title: string;
+	addons: AddonData[];
+	dependencies: Dependencies;
+};
+
+const AddonList = ({ title, addons, dependencies }: Props) => {
+	const [open, setOpen] = useState(true);
+	if (!addons.length) return null;
+	return (
+		<div>
+			<button
+				type="button"
+				onClick={() => setOpen(o => !o)}
+				className="mb-2 flex cursor-pointer items-center gap-1 border-0 bg-transparent p-0"
+			>
+				{open ? <ChevronDown size={18} /> : <ChevronRight size={18} />}
+				<h4 className="tw-color">{title}</h4>
+			</button>
+			<div
+				className={cls(
+					'grid grid-cols-[auto_auto_1fr_auto] items-center gap-x-3 gap-y-1',
+					!open && 'hidden'
+				)}
+			>
+				{addons.map((addon, i) => {
+					const { ref: gitRef, ...rest } = addon;
+					return (
+						<AddonItemErrorBoundary
+							key={`${addon.folder}#${i}`}
+							folder={addon.folder}
+							row={i}
+						>
+							<AddonListItem
+								row={i}
+								dependencies={dependencies}
+								gitRef={gitRef}
+								{...rest}
+							/>
+						</AddonItemErrorBoundary>
+					);
+				})}
+			</div>
+		</div>
+	);
+};
+export default AddonList;