forked from OctoWoW/OctoLauncher
57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
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;
|