declare IHighlightJsCssSelectorOptions

packages/app/src/components/Admin/Customize/CustomizeHighlightSetting.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable no-useless-escape */
 import React, { useCallback, useState } from 'react';
 
+
 import { useTranslation } from 'next-i18next';
 import {
   Dropdown, DropdownToggle, DropdownMenu, DropdownItem,
@@ -8,6 +9,7 @@ import {
 
 import AdminCustomizeContainer from '~/client/services/AdminCustomizeContainer';
 import { toastSuccess, toastError } from '~/client/util/apiNotification';
+import { IHighlightJsCssSelectorOptions } from '~/interfaces/customize';
 
 import { withUnstatedContainers } from '../../UnstatedUtils';
 import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
@@ -48,7 +50,7 @@ const CustomizeHighlightSetting = (props: Props): JSX.Element => {
   const { adminCustomizeContainer } = props;
   const { t } = useTranslation();
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const options = adminCustomizeContainer.state.highlightJsCssSelectorOptions;
+  const options: IHighlightJsCssSelectorOptions = adminCustomizeContainer.state.highlightJsCssSelectorOptions;
 
   const onToggleDropdown = useCallback(() => {
     setIsDropdownOpen(!isDropdownOpen);

packages/app/src/interfaces/customize.ts

@@ -0,0 +1,21 @@
+const IHighlightJsCssSelectorThemes = {
+  GITHUB: 'github',
+  GITHUB_GIST: 'github-gist',
+  ATOM_ONE_LIGHT: 'atom-one-light',
+  XCIDE: 'xcode',
+  VS: 'vs',
+  ATOM_ONE_DARK: 'atom-one-dark',
+  HYBRID: 'hybrid',
+  MONOKAI: 'monokai',
+  TOMMORROW_NIGHT: 'tomorrow-night',
+  VS_2015: 'vs2015',
+} as const;
+
+type IHighlightJsCssSelectorThemes = typeof IHighlightJsCssSelectorThemes[keyof typeof IHighlightJsCssSelectorThemes];
+
+export type IHighlightJsCssSelectorOptions = {
+  [theme in IHighlightJsCssSelectorThemes]: {
+    name: string,
+    border: boolean
+  }
+}