demoncord/src/api/settings/components/card/card.jsx

// @flow
/*import { make, join } from '@modules/styles';
import SettingsAPI from '@modules/apis/Settings';
import Manager, { modules } from '@modules/manager';

const styles = make('pluginCard');
const Settings = SettingsAPI.create('modules');

const { Filters } = Webpack;

const [
  SwitchItem,
  { Heading },
  SettingsIcon,
] = Webpack.bulk(
  Filters.byDisplayName('SwitchItem'),
  Filters.byProps('Heading'),
  Filters.byDisplayName('Gear'),
);*/

import common from "../../../common";
import webpack from "../../../webpack";
const React = common.React;

const SwitchItem = webpack.findByDisplayName("SwitchItem");
const { Heading } = webpack.findByProps("Heading");
const SettingsIcon = webpack.findByDisplayName("Gear");

function useDidUpdateEffect(effect, deps?) {
    const didMountRef = React.useRef(false);

    React.useEffect(() => {
        if (didMountRef.current) return effect();

        // else set didMount to true
        didMountRef.current = true;
    }, deps);
}

export default (module: {
    file: string,
    name: string,
    version: string,
    description: string,
    setPage: React.Dispatch<React.SetStateAction<string>>
}) => {
    return (
        <div className={styles.container}>
            <div className={styles.headerContainer}>
                <div className={styles.textContainer}>
                    <Heading
                        level={2}
                        lineClamp={1}
                        className={styles.text}
                        variant="heading-lg/medium"
                    >
                        {module.name}
                    </Heading>
                    <div className={styles.version}>{module.version}</div>
                </div>
                <SwitchItem
                    hideBorder
                    value={enabled}
                    onChange={setEnabled}
                    className={styles.switch}
                />
                <div
                    className={join(
                        styles.settings,
                        !enabled || !settings ? styles.settingsDisabled : false
                    )}
                >
                    <SettingsIcon
                        onClick={() =>
                            enabled && settings && setPage(module.file)
                        }
                    />
                </div>
            </div>
            <div className={styles.description}>{module.description}</div>
        </div>
    );
};