Initial commit

pages/devtools-panel/src/Panel.css

@@ -0,0 +1,28 @@
+.App {
+  text-align: center;
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+}
+
+.App-logo {
+  height: 40vmin;
+}
+
+.App-header {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+}
+
+code {
+  background: rgba(148, 163, 184, 0.5);
+  border-radius: 0.25rem;
+  padding: 0.2rem 0.5rem;
+}

pages/devtools-panel/src/Panel.tsx

@@ -0,0 +1,45 @@
+import '@src/Panel.css';
+import { t } from '@extension/i18n';
+import { PROJECT_URL_OBJECT, useStorage, withErrorBoundary, withSuspense } from '@extension/shared';
+import { exampleThemeStorage } from '@extension/storage';
+import { cn, ErrorDisplay, LoadingSpinner } from '@extension/ui';
+import type { ComponentPropsWithoutRef } from 'react';
+
+const Panel = () => {
+  const { isLight } = useStorage(exampleThemeStorage);
+  const logo = isLight ? 'devtools-panel/logo_horizontal.svg' : 'devtools-panel/logo_horizontal_dark.svg';
+
+  const goGithubSite = () => chrome.tabs.create(PROJECT_URL_OBJECT);
+
+  return (
+    <div className={cn('App', isLight ? 'bg-slate-50' : 'bg-gray-800')}>
+      <header className={cn('App-header', isLight ? 'text-gray-900' : 'text-gray-100')}>
+        <button onClick={goGithubSite}>
+          <img src={chrome.runtime.getURL(logo)} className="App-logo" alt="logo" />
+        </button>
+        <p>
+          Edit <code>pages/devtools-panel/src/Panel.tsx</code>
+        </p>
+        <ToggleButton onClick={exampleThemeStorage.toggle}>{t('toggleTheme')}</ToggleButton>
+      </header>
+    </div>
+  );
+};
+
+const ToggleButton = (props: ComponentPropsWithoutRef<'button'>) => {
+  const { isLight } = useStorage(exampleThemeStorage);
+
+  return (
+    <button
+      className={cn(
+        props.className,
+        'mt-4 rounded px-4 py-1 font-bold shadow hover:scale-105',
+        isLight ? 'bg-white text-black' : 'bg-black text-white',
+      )}
+      onClick={exampleThemeStorage.toggle}>
+      {props.children}
+    </button>
+  );
+};
+
+export default withErrorBoundary(withSuspense(Panel, <LoadingSpinner />), ErrorDisplay);

pages/devtools-panel/src/index.css

@@ -0,0 +1 @@
+@import '@extension/ui/global.css';

pages/devtools-panel/src/index.tsx

@@ -0,0 +1,15 @@
+import '@src/index.css';
+import Panel from '@src/Panel';
+import { createRoot } from 'react-dom/client';
+
+const init = () => {
+  const appContainer = document.querySelector('#app-container');
+  if (!appContainer) {
+    throw new Error('Can not find #app-container');
+  }
+  const root = createRoot(appContainer);
+
+  root.render(<Panel />);
+};
+
+init();