vscode-front-matter/src/dashboardWebView/components/Header/Startup.tsx

import * as React from 'react';
import { Messenger } from '@estruyf/vscode/dist/client';
import { Settings } from '../../models';
import { DashboardMessage } from '../../DashboardMessage';
import { SETTING_DASHBOARD_OPENONSTART } from '../../../constants';
import * as l10n from "@vscode/l10n"
import { LocalizationKey } from '../../../localization';
import { VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react';


export interface IStartupProps {
  settings: Settings | null;
}

export const Startup: React.FunctionComponent<IStartupProps> = ({
  settings
}: React.PropsWithChildren<IStartupProps>) => {
  const [isChecked, setIsChecked] = React.useState(false);

  const onChange = (value: boolean) => {
    setIsChecked(value);
    Messenger.send(DashboardMessage.updateSetting, {
      name: SETTING_DASHBOARD_OPENONSTART,
      value: value
    });
  };

  React.useEffect(() => {
    setIsChecked(!!settings?.openOnStart);
  }, [settings?.openOnStart]);

  return (
    <VSCodeCheckbox
      onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.checked)}
      checked={isChecked}>
      {l10n.t(LocalizationKey.dashboardHeaderStartupLabel)}
    </VSCodeCheckbox>
  );
};