| 1 |
import { useMemo } from 'react'; |
| 2 |
import HeroSection from './components/HeroSection'; |
| 3 |
import PluginGrid from './components/PluginGrid'; |
| 4 |
import getPlugins from './data/plugins'; |
| 5 |
|
| 6 |
export default function CompatiblePluginListApp() { |
| 7 |
const plugins = useMemo(() => { |
| 8 |
const raw = window.DISCO_COMPATIBLE_PLUGINS?.active_plugins ?? []; |
| 9 |
const activePlugins = Array.isArray( raw ) ? raw : Object.values( raw ); |
| 10 |
|
| 11 |
const withStatus = getPlugins().map((plugin) => ({ |
| 12 |
...plugin, |
| 13 |
status: activePlugins.includes(plugin.pluginFile) |
| 14 |
? 'detected' |
| 15 |
: 'not-installed', |
| 16 |
})); |
| 17 |
|
| 18 |
// Detected plugins first |
| 19 |
return [ |
| 20 |
...withStatus.filter((p) => p.status === 'detected'), |
| 21 |
...withStatus.filter((p) => p.status !== 'detected'), |
| 22 |
]; |
| 23 |
}, []); |
| 24 |
|
| 25 |
return ( |
| 26 |
<div className="disco:min-h-screen disco:bg-white disco:font-sans disco:my-4 disco:mr-4 disco:rounded-2xl"> |
| 27 |
<HeroSection /> |
| 28 |
<PluginGrid plugins={plugins} /> |
| 29 |
</div> |
| 30 |
); |
| 31 |
} |
| 32 |
|
