mintlify 1.1.6 → 1.1.8

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

@@ -0,0 +1,386 @@
+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

@@ -0,0 +1,285 @@
+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

@@ -0,0 +1,22 @@
+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>
+  )
+}