Initial commit

pages/new-tab/src/NewTab.css

@@ -0,0 +1,22 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+}
+
+.App-header {
+  min-height: 100vh;
+  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/new-tab/src/NewTab.scss

@@ -0,0 +1,10 @@
+$myColor: red;
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: $myColor;
+}

pages/new-tab/src/NewTab.tsx

@@ -0,0 +1,31 @@
+import '@src/NewTab.css';
+import '@src/NewTab.scss';
+import { t } from '@extension/i18n';
+import { PROJECT_URL_OBJECT, useStorage, withErrorBoundary, withSuspense } from '@extension/shared';
+import { exampleThemeStorage } from '@extension/storage';
+import { cn, ErrorDisplay, LoadingSpinner, ToggleButton } from '@extension/ui';
+
+const NewTab = () => {
+  const { isLight } = useStorage(exampleThemeStorage);
+  const logo = isLight ? 'new-tab/logo_horizontal.svg' : 'new-tab/logo_horizontal_dark.svg';
+
+  const goGithubSite = () => chrome.tabs.create(PROJECT_URL_OBJECT);
+
+  console.log(t('hello', 'World'));
+  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/new-tab/src/NewTab.tsx</code>
+        </p>
+        <h6>The color of this paragraph is defined using SASS.</h6>
+        <ToggleButton onClick={exampleThemeStorage.toggle}>{t('toggleTheme')}</ToggleButton>
+      </header>
+    </div>
+  );
+};
+
+export default withErrorBoundary(withSuspense(NewTab, <LoadingSpinner />), ErrorDisplay);

pages/new-tab/src/index.css

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

pages/new-tab/src/index.tsx

@@ -0,0 +1,15 @@
+import '@src/index.css';
+import NewTab from '@src/NewTab';
+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(<NewTab />);
+};
+
+init();