mintlify 1.2.0 → 2.0.1

package/bin/mint/client/src/ui/Search.tsx

@@ -1,386 +0,0 @@
-import { Combobox, Dialog, Transition } from '@headlessui/react';
-import { ChevronRightIcon, FolderIcon, SearchIcon } from '@heroicons/react/outline';
-import algoliasearch from 'algoliasearch';
-import axios from 'axios';
-import clsx from 'clsx';
-import { useRouter } from 'next/router';
-import {
-  Fragment,
-  useState,
-  useCallback,
-  useRef,
-  createContext,
-  useContext,
-  useEffect,
-} from 'react';
-import { useHotkeys } from 'react-hotkeys-hook';
-
-import { config } from '@/config';
-import { useActionKey } from '@/hooks/useActionKey';
-
-const client = algoliasearch('M6VUKXZ4U5', '60f283c4bc8c9feb5c44da3df3c21ce3');
-const index = client.initIndex('docs');
-
-// @ts-ignore
-const SearchContext = createContext();
-
-type HighlightedResult = { value: string; matchLevel: 'none' | 'full' };
-
-type Hit = {
-  objectID: string;
-  title: string;
-  heading?: string;
-  subheading?: string;
-  content: string;
-  slug: string;
-  _highlightResult: {
-    title: HighlightedResult;
-    heading?: HighlightedResult;
-    subheading?: HighlightedResult;
-    content?: HighlightedResult;
-  };
-  _snippetResult: {
-    heading: HighlightedResult;
-    content: HighlightedResult;
-  };
-};
-
-// TODO: Simplify the repeated components
-function SearchHit({ active, hit }: { active: boolean; hit: Hit }) {
-  if (hit._highlightResult.heading?.matchLevel === 'full') {
-    return (
-      <>
-        <div
-          className={clsx(
-            'rounded-md ring-1 ring-slate-900/5 shadow-sm group-hover:shadow group-hover:ring-slate-900/10 dark:ring-0 dark:shadow-none dark:group-hover:shadow-none dark:group-hover:highlight-white/10',
-            active ? 'bg-white dark:bg-primary' : 'dark:bg-slate-800'
-          )}
-        >
-          <svg
-            className="h-6 w-6 p-1.5"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 12 12"
-            fill="none"
-          >
-            <path
-              className={clsx(
-                'stroke-primary group-hover:stroke-primary-dark dark:stroke-primary-ultralight dark:group-hover:stroke-white',
-                active && 'stroke-primary-dark dark:stroke-white'
-              )}
-              d="M3.75 1v10M8.25 1v10M1 3.75h10M1 8.25h10"
-              strokeWidth="1.5"
-              stroke-linecap="round"
-            ></path>
-          </svg>
-        </div>
-        <div className="ml-3 flex-auto">
-          {hit._highlightResult.title?.value && (
-            <div>
-              <span
-                className={clsx(
-                  'rounded-full py-px px-2 text-xs',
-                  active
-                    ? 'bg-primary text-white'
-                    : 'bg-slate-200 dark:bg-slate-700 text-slate-600 dark:text-slate-400'
-                )}
-                dangerouslySetInnerHTML={{ __html: hit._highlightResult.title.value }}
-              ></span>
-            </div>
-          )}
-          <div
-            className="mt-1 truncate"
-            dangerouslySetInnerHTML={{ __html: hit._highlightResult.heading?.value }}
-          ></div>
-        </div>
-        {active && <ChevronRightIcon className="h-4 w-4 ml-3 flex-none" />}
-      </>
-    );
-  }
-
-  if (hit._highlightResult.subheading?.matchLevel === 'full') {
-    return (
-      <>
-        <div
-          className={clsx(
-            'rounded-md ring-1 ring-slate-900/5 shadow-sm group-hover:shadow group-hover:ring-slate-900/10 dark:ring-0 dark:shadow-none dark:group-hover:shadow-none dark:group-hover:highlight-white/10',
-            active ? 'bg-white dark:bg-primary' : 'dark:bg-slate-800'
-          )}
-        >
-          <svg
-            className="h-6 w-6 p-1.5"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 12 12"
-            fill="none"
-          >
-            <path
-              className={clsx(
-                'stroke-primary group-hover:stroke-primary-dark dark:stroke-primary-ultralight dark:group-hover:stroke-white',
-                active && 'stroke-primary-dark dark:stroke-white'
-              )}
-              d="M3.75 1v10M8.25 1v10M1 3.75h10M1 8.25h10"
-              strokeWidth="1.5"
-              stroke-linecap="round"
-            ></path>
-          </svg>
-        </div>
-        <div className="ml-3 flex-auto">
-          {hit._highlightResult.title?.value && (
-            <div>
-              <span
-                className={clsx(
-                  'rounded-full py-px px-2 text-xs',
-                  active
-                    ? 'bg-primary text-white'
-                    : 'bg-slate-200 dark:bg-slate-700 text-slate-600 dark:text-slate-400'
-                )}
-                dangerouslySetInnerHTML={{ __html: hit._highlightResult.title.value }}
-              ></span>
-            </div>
-          )}
-          <div
-            className="mt-1 truncate"
-            dangerouslySetInnerHTML={{ __html: hit._highlightResult.subheading?.value }}
-          ></div>
-        </div>
-        {active && <ChevronRightIcon className="h-4 w-4 ml-3 flex-none" />}
-      </>
-    );
-  }
-
-  return (
-    <>
-      <div
-        className={clsx(
-          'rounded-md ring-1 ring-slate-900/5 shadow-sm group-hover:shadow group-hover:ring-slate-900/10 dark:ring-0 dark:shadow-none dark:group-hover:shadow-none dark:group-hover:highlight-white/10',
-          active ? 'bg-white dark:bg-primary' : 'dark:bg-slate-800'
-        )}
-      >
-        <svg
-          className="h-6 w-6 p-1"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-          fill="none"
-        >
-          <path
-            className={clsx(
-              'fill-primary group-hover:fill-primary-dark dark:fill-primary-ultralight dark:group-hover:fill-white',
-              active && 'fill-primary-dark dark:fill-white'
-            )}
-            d="M9 4.804A7.968 7.968 0 005.5 4c-1.255 0-2.443.29-3.5.804v10A7.969 7.969 0 015.5 14c1.669 0 3.218.51 4.5 1.385A7.962 7.962 0 0114.5 14c1.255 0 2.443.29 3.5.804v-10A7.968 7.968 0 0014.5 4c-1.255 0-2.443.29-3.5.804V12a1 1 0 11-2 0V4.804z"
-          ></path>
-        </svg>
-      </div>
-      <div className="ml-3 flex-auto">
-        <div
-          className="truncate"
-          dangerouslySetInnerHTML={{ __html: hit._highlightResult.title.value }}
-        ></div>
-        {hit._highlightResult.content?.matchLevel === 'full' &&
-          hit._snippetResult.content?.value && (
-            <div dangerouslySetInnerHTML={{ __html: hit._snippetResult.content.value }}></div>
-          )}
-      </div>
-      {active && <ChevronRightIcon className="h-4 w-4 ml-3 flex-none" />}
-    </>
-  );
-}
-
-export function SearchProvider({ children }: any) {
-  const router = useRouter();
-  const [searchId, setSearchId] = useState('');
-  const [isOpen, setIsOpen] = useState(false);
-  const [query, setQuery] = useState<string>('');
-  const [hits, setHits] = useState<Hit[]>([]);
-
-  useEffect(() => {
-    axios.get(`${config.basePath ?? ''}/api/name`).then(({ data }) => {
-      setSearchId(data);
-    });
-  }, []);
-
-  useHotkeys('cmd+k', (e) => {
-    e.preventDefault();
-    setIsOpen(true);
-  });
-
-  const onOpen = useCallback(() => {
-    setIsOpen(true);
-  }, [setIsOpen]);
-
-  const onClose = useCallback(() => {
-    setIsOpen(false);
-  }, [setIsOpen]);
-
-  const onInput = useCallback(
-    (e: any) => {
-      setIsOpen(true);
-      setQuery(e.key);
-    },
-    [setIsOpen, setQuery]
-  );
-
-  const onSearch = async (query: string) => {
-    if (!query) {
-      setHits([]);
-      return;
-    }
-    const { hits } = await index.search(query, {
-      filters: `orgID:${searchId}`,
-    });
-
-    setHits(hits as Hit[]);
-  };
-
-  const onSelectOption = (hit: any) => {
-    onClose();
-
-    const section =
-      hit._highlightResult.subheading?.matchLevel === 'full'
-        ? `#${hit.subheading}`
-        : hit._highlightResult.heading?.matchLevel === 'full'
-        ? `#${hit.heading}`
-        : '';
-    const sectionSlug = section
-      .toLowerCase()
-      .replaceAll(' ', '-')
-      .replaceAll(/[^a-zA-Z0-9-_#]/g, '');
-    router.push(`/${hit.slug}${sectionSlug}`);
-    setHits([]);
-  };
-
-  return (
-    <>
-      <SearchContext.Provider
-        value={{
-          isOpen,
-          onOpen,
-          onClose,
-          onInput,
-        }}
-      >
-        {children}
-      </SearchContext.Provider>
-      {isOpen && (
-        <Transition.Root
-          show={isOpen}
-          as={Fragment}
-          afterLeave={() => {
-            setQuery('');
-            setHits([]);
-          }}
-          appear
-        >
-          <Dialog as="div" className="relative z-50" onClose={setIsOpen}>
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0"
-              enterTo="opacity-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100"
-              leaveTo="opacity-0"
-            >
-              <div className="fixed inset-0 bg-gray-500 bg-opacity-25 transition-opacity backdrop-blur-sm" />
-            </Transition.Child>
-
-            <div className="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20">
-              <Transition.Child
-                as={Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 scale-95"
-                enterTo="opacity-100 scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 scale-100"
-                leaveTo="opacity-0 scale-95"
-              >
-                <Dialog.Panel className="mx-auto max-w-3xl transform divide-y divide-gray-500 divide-opacity-10 overflow-hidden rounded-md bg-white dark:bg-slate-900 bg-opacity-80 shadow-2xl backdrop-blur backdrop-filter transition-all">
-                  <Combobox onChange={(option) => onSelectOption(option)} value={query}>
-                    <div className="relative flex items-center">
-                      <SearchIcon
-                        className="pointer-events-none absolute left-4 h-5 w-5 text-slate-700 dark:text-slate-400"
-                        aria-hidden="true"
-                      />
-                      <Combobox.Input
-                        className="h-14 w-full border-0 bg-transparent pl-11 pr-6 text-gray-900 dark:text-slate-100 placeholder-slate-400 focus:ring-0 sm:text-sm focus:outline-none"
-                        placeholder="Find anything..."
-                        onChange={(event) => onSearch(event.target.value)}
-                      />
-                    </div>
-
-                    {(query === '' || hits.length > 0) && (
-                      <Combobox.Options
-                        static
-                        className="max-h-80 scroll-py-2 divide-y divide-slate-500 divide-opacity-10 overflow-y-auto"
-                      >
-                        {hits.length > 0 && (
-                          <li className="p-2">
-                            <ul className="text-sm text-slate-700">
-                              {hits.map((hit: Hit) => (
-                                <Combobox.Option
-                                  key={hit.objectID}
-                                  value={hit}
-                                  className={({ active }) =>
-                                    clsx(
-                                      'flex cursor-pointer select-none items-center px-3 py-2 rounded-md',
-                                      active
-                                        ? 'bg-primary-dark text-white dark:text-white'
-                                        : 'dark:text-slate-500'
-                                    )
-                                  }
-                                >
-                                  {({ active }) => <SearchHit active={active} hit={hit} />}
-                                </Combobox.Option>
-                              ))}
-                            </ul>
-                          </li>
-                        )}
-                      </Combobox.Options>
-                    )}
-
-                    {query !== '' && hits.length === 0 && (
-                      <div className="py-14 px-6 text-center sm:px-14">
-                        <FolderIcon
-                          className="mx-auto h-6 w-6 text-slate-900 dark:text-slate-400 text-opacity-40"
-                          aria-hidden="true"
-                        />
-                        <p className="mt-4 text-sm text-slate-900 dark:text-slate-400">
-                          We couldn't find any projects with that term. Please try again.
-                        </p>
-                      </div>
-                    )}
-                  </Combobox>
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </Dialog>
-        </Transition.Root>
-      )}
-    </>
-  );
-}
-
-export function SearchButton({ children, ...props }: any) {
-  let searchButtonRef = useRef();
-  let actionKey = useActionKey();
-  let { onOpen, onInput } = useContext(SearchContext) as any;
-
-  useEffect(() => {
-    function onKeyDown(event: any) {
-      if (searchButtonRef && searchButtonRef.current === document.activeElement && onInput) {
-        if (/[a-zA-Z0-9]/.test(String.fromCharCode(event.keyCode))) {
-          onInput(event);
-        }
-      }
-    }
-    window.addEventListener('keydown', onKeyDown);
-    return () => {
-      window.removeEventListener('keydown', onKeyDown);
-    };
-  }, [onInput, searchButtonRef]);
-
-  return (
-    <button type="button" ref={searchButtonRef} onClick={onOpen} {...props}>
-      {typeof children === 'function' ? children({ actionKey }) : children}
-    </button>
-  );
-}

package/bin/mint/client/src/ui/ThemeToggle.tsx

@@ -1,285 +0,0 @@
-import { Listbox } from '@headlessui/react';
-import clsx from 'clsx';
-import { Fragment, useEffect, useRef } from 'react';
-import create from 'zustand';
-
-import { useIsomorphicLayoutEffect } from '@/hooks/useIsomorphicLayoutEffect';
-
-const useSetting = create((set: any) => ({
-  setting: 'system',
-  setSetting: (setting: string) => set({ setting }),
-})) as any;
-
-function update() {
-  if (
-    localStorage.theme === 'dark' ||
-    (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
-  ) {
-    document.documentElement.classList.add('dark', 'changing-theme');
-  } else {
-    document.documentElement.classList.remove('dark', 'changing-theme');
-  }
-  window.setTimeout(() => {
-    document.documentElement.classList.remove('changing-theme');
-  });
-}
-
-let settings = [
-  {
-    value: 'light',
-    label: 'Light',
-    icon: SunIcon,
-  },
-  {
-    value: 'dark',
-    label: 'Dark',
-    icon: MoonIcon,
-  },
-  {
-    value: 'system',
-    label: 'System',
-    icon: PcIcon,
-  },
-];
-
-function SunIcon({ selected, ...props }: { selected?: boolean; className: string }) {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      fill="none"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <path
-        d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-        className={selected ? 'stroke-yellow-500' : 'stroke-slate-400 dark:stroke-slate-500'}
-      />
-      <path
-        d="M12 4v1M17.66 6.344l-.828.828M20.005 12.004h-1M17.66 17.664l-.828-.828M12 20.01V19M6.34 17.664l.835-.836M3.995 12.004h1.01M6 6l.835.836"
-        className={selected ? 'stroke-yellow-500' : 'stroke-slate-400 dark:stroke-slate-500'}
-      />
-    </svg>
-  );
-}
-
-function MoonIcon({ selected, ...props }: { selected: boolean; className: string }) {
-  return (
-    <svg viewBox="0 0 24 24" fill="none" {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M17.715 15.15A6.5 6.5 0 0 1 9 6.035C6.106 6.922 4 9.645 4 12.867c0 3.94 3.153 7.136 7.042 7.136 3.101 0 5.734-2.032 6.673-4.853Z"
-        className={selected ? 'fill-primary-light/20' : 'fill-transparent'}
-      />
-      <path
-        d="m17.715 15.15.95.316a1 1 0 0 0-1.445-1.185l.495.869ZM9 6.035l.846.534a1 1 0 0 0-1.14-1.49L9 6.035Zm8.221 8.246a5.47 5.47 0 0 1-2.72.718v2a7.47 7.47 0 0 0 3.71-.98l-.99-1.738Zm-2.72.718A5.5 5.5 0 0 1 9 9.5H7a7.5 7.5 0 0 0 7.5 7.5v-2ZM9 9.5c0-1.079.31-2.082.845-2.93L8.153 5.5A7.47 7.47 0 0 0 7 9.5h2Zm-4 3.368C5 10.089 6.815 7.75 9.292 6.99L8.706 5.08C5.397 6.094 3 9.201 3 12.867h2Zm6.042 6.136C7.718 19.003 5 16.268 5 12.867H3c0 4.48 3.588 8.136 8.042 8.136v-2Zm5.725-4.17c-.81 2.433-3.074 4.17-5.725 4.17v2c3.552 0 6.553-2.327 7.622-5.537l-1.897-.632Z"
-        className={
-          selected ? 'fill-primary dark:fill-primary-light' : 'fill-slate-400 dark:fill-slate-500'
-        }
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M17 3a1 1 0 0 1 1 1 2 2 0 0 0 2 2 1 1 0 1 1 0 2 2 2 0 0 0-2 2 1 1 0 1 1-2 0 2 2 0 0 0-2-2 1 1 0 1 1 0-2 2 2 0 0 0 2-2 1 1 0 0 1 1-1Z"
-        className={
-          selected ? 'fill-primary dark:fill-primary-light' : 'fill-slate-400 dark:fill-slate-500'
-        }
-      />
-    </svg>
-  );
-}
-
-function PcIcon({ selected, ...props }: { selected: boolean; className: string }) {
-  return (
-    <svg viewBox="0 0 24 24" fill="none" {...props}>
-      <path
-        d="M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6Z"
-        strokeWidth="2"
-        strokeLinejoin="round"
-        className={
-          selected
-            ? 'stroke-primary dark:stroke-primary-light fill-primary-light/20'
-            : 'stroke-slate-400 dark:stroke-slate-500'
-        }
-      />
-      <path
-        d="M14 15c0 3 2 5 2 5H8s2-2 2-5"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        className={
-          selected
-            ? 'stroke-primary dark:stroke-primary-light'
-            : 'stroke-slate-400 dark:stroke-slate-500'
-        }
-      />
-    </svg>
-  );
-}
-
-function useTheme() {
-  let { setting, setSetting } = useSetting();
-  let initial = useRef(true);
-
-  useIsomorphicLayoutEffect(() => {
-    let theme = localStorage.theme;
-    if (theme === 'light' || theme === 'dark') {
-      setSetting(theme);
-    }
-  }, []);
-
-  useIsomorphicLayoutEffect(() => {
-    if (setting === 'system') {
-      localStorage.removeItem('theme');
-    } else if (setting === 'light' || setting === 'dark') {
-      localStorage.theme = setting;
-    }
-    if (initial.current) {
-      initial.current = false;
-    } else {
-      update();
-    }
-  }, [setting]);
-
-  useEffect(() => {
-    let mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-
-    if (mediaQuery?.addEventListener) {
-      mediaQuery.addEventListener('change', update);
-    } else {
-      mediaQuery.addListener(update);
-    }
-
-    function onStorage() {
-      update();
-      let theme = localStorage.theme;
-      if (theme === 'light' || theme === 'dark') {
-        setSetting(theme);
-      } else {
-        setSetting('system');
-      }
-    }
-    window.addEventListener('storage', onStorage);
-
-    return () => {
-      if (mediaQuery?.removeEventListener) {
-        mediaQuery.removeEventListener('change', update);
-      } else {
-        mediaQuery.removeListener(update);
-      }
-
-      window.removeEventListener('storage', onStorage);
-    };
-  }, [setSetting]);
-
-  return [setting, setSetting];
-}
-
-export function ThemeToggle({ panelClassName = 'mt-4' }) {
-  let [setting, setSetting] = useTheme();
-
-  return (
-    <Listbox value={setting} onChange={setSetting}>
-      <Listbox.Label className="sr-only">Theme</Listbox.Label>
-      <Listbox.Button type="button">
-        <span className="dark:hidden">
-          <SunIcon className="w-6 h-6" selected={setting !== 'system'} />
-        </span>
-        <span className="hidden dark:inline">
-          <MoonIcon className="w-6 h-6" selected={setting !== 'system'} />
-        </span>
-      </Listbox.Button>
-      <Listbox.Options
-        className={clsx(
-          'absolute z-50 top-full right-0 bg-white rounded-lg ring-1 ring-slate-900/10 shadow-lg overflow-hidden w-36 py-1 text-sm text-slate-700 font-medium dark:bg-slate-800 dark:ring-0 dark:highlight-white/5 dark:text-slate-300',
-          panelClassName
-        )}
-      >
-        {settings.map(({ value, label, icon: Icon }) => (
-          <Listbox.Option key={value} value={value} as={Fragment}>
-            {({ active, selected }) => (
-              <li
-                className={clsx(
-                  'py-1 px-2 flex items-center cursor-pointer',
-                  selected
-                    ? value === 'light'
-                      ? 'text-yellow-500'
-                      : 'text-primary dark:text-primary-light'
-                    : '',
-                  active && 'bg-slate-50 dark:bg-slate-600/30'
-                )}
-              >
-                <Icon selected={selected} className="w-6 h-6 mr-2" />
-                {label}
-              </li>
-            )}
-          </Listbox.Option>
-        ))}
-      </Listbox.Options>
-    </Listbox>
-  );
-}
-
-export function ThemeSelect() {
-  let [setting, setSetting] = useTheme();
-
-  const foundSetting = settings.find((x) => x.value === setting);
-  if (foundSetting == null) {
-    return null;
-  }
-
-  const { label } = foundSetting;
-
-  return (
-    <div className="flex items-center justify-between">
-      <label htmlFor="theme" className="text-slate-700 font-normal dark:text-slate-400">
-        Switch theme
-      </label>
-      <div className="relative flex items-center ring-1 ring-slate-900/10 rounded-lg shadow-sm p-2 text-slate-700 font-semibold dark:bg-slate-600 dark:ring-0 dark:highlight-white/5 dark:text-slate-200">
-        <SunIcon className="w-6 h-6 mr-2 dark:hidden" />
-        <svg viewBox="0 0 24 24" fill="none" className="w-6 h-6 mr-2 hidden dark:block">
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M17.715 15.15A6.5 6.5 0 0 1 9 6.035C6.106 6.922 4 9.645 4 12.867c0 3.94 3.153 7.136 7.042 7.136 3.101 0 5.734-2.032 6.673-4.853Z"
-            className="fill-transparent"
-          />
-          <path
-            d="m17.715 15.15.95.316a1 1 0 0 0-1.445-1.185l.495.869ZM9 6.035l.846.534a1 1 0 0 0-1.14-1.49L9 6.035Zm8.221 8.246a5.47 5.47 0 0 1-2.72.718v2a7.47 7.47 0 0 0 3.71-.98l-.99-1.738Zm-2.72.718A5.5 5.5 0 0 1 9 9.5H7a7.5 7.5 0 0 0 7.5 7.5v-2ZM9 9.5c0-1.079.31-2.082.845-2.93L8.153 5.5A7.47 7.47 0 0 0 7 9.5h2Zm-4 3.368C5 10.089 6.815 7.75 9.292 6.99L8.706 5.08C5.397 6.094 3 9.201 3 12.867h2Zm6.042 6.136C7.718 19.003 5 16.268 5 12.867H3c0 4.48 3.588 8.136 8.042 8.136v-2Zm5.725-4.17c-.81 2.433-3.074 4.17-5.725 4.17v2c3.552 0 6.553-2.327 7.622-5.537l-1.897-.632Z"
-            className="fill-slate-400"
-          />
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M17 3a1 1 0 0 1 1 1 2 2 0 0 0 2 2 1 1 0 1 1 0 2 2 2 0 0 0-2 2 1 1 0 1 1-2 0 2 2 0 0 0-2-2 1 1 0 1 1 0-2 2 2 0 0 0 2-2 1 1 0 0 1 1-1Z"
-            className="fill-slate-400"
-          />
-        </svg>
-        {label}
-        <svg className="w-6 h-6 ml-2 text-slate-400" fill="none">
-          <path
-            d="m15 11-3 3-3-3"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </svg>
-        <select
-          id="theme"
-          value={setting}
-          onChange={(e) => setSetting(e.target.value)}
-          className="absolute appearance-none inset-0 w-full h-full opacity-0"
-        >
-          {settings.map(({ value, label }) => (
-            <option key={value} value={value}>
-              {label}
-            </option>
-          ))}
-        </select>
-      </div>
-    </div>
-  );
-}

package/bin/mint/client/src/ui/Title.tsx

@@ -1,22 +0,0 @@
-import Head from 'next/head'
-import { ReactNode } from 'react'
-
-export function Title({ suffix, children }: { suffix: string, children: ReactNode }) {
-  let title = '';
-  if (suffix != null) {
-    title = suffix;
-    if (children != null) {
-      title = children + ` - ${title}`
-    }
-  } else if (children != null) {
-    title = children.toString();
-  }
-
-  return (
-    <Head>
-      <title key="title">{title}</title>
-      <meta key="twitter:title" name="twitter:title" content={title} />
-      <meta key="og:title" property="og:title" content={title} />
-    </Head>
-  )
-}