built the main pop-up screen

ginny100 · Dec 25, 2024 · 6bffd03 · 6bffd03
1 parent e986822
commit 6bffd03
Show file tree

Hide file tree

Showing 4 changed files with 158 additions and 78 deletions.
diff --git a/pages/popup/postcss.config.js b/pages/popup/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};
diff --git a/pages/popup/src/Popup.tsx b/pages/popup/src/Popup.tsx
@@ -1,78 +1,153 @@
 import '@src/Popup.css';
 import { useStorage, withErrorBoundary, withSuspense } from '@extension/shared';
 import { exampleThemeStorage } from '@extension/storage';
-import type { ComponentPropsWithoutRef } from 'react';
-
-const notificationOptions = {
-  type: 'basic',
-  iconUrl: chrome.runtime.getURL('icon-34.png'),
-  title: 'Injecting content script error',
-  message: 'You cannot inject script here!',
-} as const;
+import { useState } from 'react';
 
 const Popup = () => {
   const theme = useStorage(exampleThemeStorage);
   const isLight = theme === 'light';
-  const logo = isLight ? 'popup/logo_vertical.svg' : 'popup/logo_vertical_dark.svg';
-  const goGithubSite = () =>
-    chrome.tabs.create({ url: 'https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite' });
-
-  const injectContentScript = async () => {
-    const [tab] = await chrome.tabs.query({ currentWindow: true, active: true });
-
-    if (tab.url!.startsWith('about:') || tab.url!.startsWith('chrome:')) {
-      chrome.notifications.create('inject-error', notificationOptions);
-    }
 
-    await chrome.scripting
-      .executeScript({
-        target: { tabId: tab.id! },
-        files: ['/content-runtime/index.iife.js'],
-      })
-      .catch(err => {
-        // Handling errors related to other paths
-        if (err.message.includes('Cannot access a chrome:// URL')) {
-          chrome.notifications.create('inject-error', notificationOptions);
-        }
-      });
-  };
+  const [sessions, setSessions] = useState(0);
+  const [focusMinutes, setFocusMinutes] = useState(0);
+  const [breakMinutes, setBreakMinutes] = useState(0);
 
   return (
-    <div className={`App ${isLight ? 'bg-slate-50' : 'bg-gray-800'}`}>
-      <header className={`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/popup/src/Popup.tsx</code>
-        </p>
+    <div className={`App size-full p-8 transition-colors ${isLight ? 'bg-[#e8f4ff]' : 'bg-[#1a2b3c]'}`}>
+      {/* Theme Toggle Switch Row */}
+      <div className="mb-8 flex justify-end">
         <button
-          className={
-            'font-bold mt-4 py-1 px-4 rounded shadow hover:scale-105 ' +
-            (isLight ? 'bg-blue-200 text-black' : 'bg-gray-700 text-white')
-          }
-          onClick={injectContentScript}>
-          Click to inject Content Script
+          onClick={exampleThemeStorage.toggle}
+          className="relative flex h-6 w-12 cursor-pointer items-center rounded-full bg-blue-500"
+        >
+          <div 
+            className={`absolute size-5 rounded-full bg-white transition-transform ${
+              isLight ? 'translate-x-1' : 'translate-x-6'
+            }`}
+          />
         </button>
-        <ToggleButton>Toggle theme</ToggleButton>
-      </header>
+      </div>
+
+      {/* Main Content */}
+      <div className={`text-center transition-colors ${isLight ? 'text-gray-900' : 'text-white'}`}>
+        <div className="flex gap-0">
+          {/* Timer Settings Column */}
+          <div className="w-7/12 space-y-2">
+            <h1 className="mb-2 text-left font-[\'Agbalumo\'] text-4xl font-normal">Timer setting</h1>
+            {/* Center the number inputs */}
+            <div className="flex flex-col items-center space-y-1">
+              <NumberInput
+                label="Let's do"
+                value={sessions}
+                onChange={setSessions}
+                suffix="sessions"
+                isLight={isLight}
+              />
+
+              <div className="flex justify-center py-1">
+                <span role="img" aria-label="lotus" className="text-3xl">🪷</span>
+              </div>
+
+              <NumberInput
+                label="Focus:"
+                value={focusMinutes}
+                onChange={setFocusMinutes}
+                suffix="minutes"
+                isLight={isLight}
+              />
+
+              <div className="flex justify-center py-1">
+                <span role="img" aria-label="lotus" className="text-3xl">🪷</span>
+              </div>
+
+              <NumberInput
+                label="Break:"
+                value={breakMinutes}
+                onChange={setBreakMinutes}
+                suffix="minutes"
+                isLight={isLight}
+              />
+            </div>
+          </div>
+
+          {/* Block List Column */}
+          <div className="w-9/12">
+            <h2 className="mb-3 text-left text-xl font-bold">Block List</h2>
+            <div className={`mb-4 flex items-center rounded-lg p-2 ${isLight ? 'bg-white' : 'bg-[#2a3b4c]'}`}>
+              <div className="rounded-lg bg-blue-500 p-2">
+                <span role="img" aria-label="search">🔍</span>
+              </div>
+              <input
+                type="text"
+                placeholder="Search"
+                className={`w-full bg-transparent p-2 outline-none ${isLight ? 'text-gray-900' : 'text-white'}`}
+              />
+            </div>
+
+            {/* Scrollable container with background */}
+            <div className={`rounded-lg p-3 ${isLight ? 'bg-white/50' : 'bg-[#2a3b4c]/50'}`}>
+              <div className="max-h-[300px] space-y-1 overflow-y-auto pr-2">
+                {['App 1', 'App 2', 'App 3', 'App 4', 'App 5'].map((app) => (
+                  <div 
+                    key={app} 
+                    className={`flex items-center justify-between rounded-lg p-3 ${
+                      isLight ? 'bg-gray-200' : 'bg-[#3a4b5c]'
+                    }`}
+                  >
+                    <div className="flex items-center gap-3">
+                      <div className="size-3 rounded-full bg-red-500" />
+                      <span>{app}</span>
+                    </div>
+                    <button className="text-gray-400 hover:text-gray-600">
+                      🗑️
+                    </button>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Start Button - Reduced margin-top */}
+        <div className="mt-2 flex justify-center">
+          <button
+            className={`rounded-lg px-8 py-2 text-white ${
+              isLight ? 'bg-blue-500 hover:bg-blue-600' : 'bg-blue-600 hover:bg-blue-700'
+            }`}>
+            Start
+          </button>
+        </div>
+      </div>
     </div>
   );
 };
 
-const ToggleButton = (props: ComponentPropsWithoutRef<'button'>) => {
-  const theme = useStorage(exampleThemeStorage);
+interface NumberInputProps {
+  label: string;
+  value: number;
+  onChange: (value: number) => void;
+  suffix: string;
+  isLight: boolean;
+}
+
+const NumberInput = ({ label, value, onChange, suffix, isLight }: NumberInputProps) => {
   return (
-    <button
-      className={
-        props.className +
-        ' ' +
-        'font-bold mt-4 py-1 px-4 rounded shadow hover:scale-105 ' +
-        (theme === 'light' ? 'bg-white text-black shadow-black' : 'bg-black text-white')
-      }
-      onClick={exampleThemeStorage.toggle}>
-      {props.children}
-    </button>
+    <div className="flex items-center gap-4">
+      <span className="text-xl font-bold">{label}</span>
+      <div className="flex flex-col items-center">
+        <button 
+          onClick={() => onChange(value + 1)}
+          className="text-2xl">▲</button>
+        <div className={`flex size-10 items-center justify-center rounded-lg text-2xl ${
+          isLight ? 'bg-white text-black' : 'bg-[#2a3b4c] text-white'
+        }`}>
+          {value.toString().padStart(2, '0')}
+        </div>
+        <button 
+          onClick={() => onChange(Math.max(0, value - 1))}
+          className="text-2xl">▼</button>
+      </div>
+      <span className="text-xl font-bold">{suffix}</span>
+    </div>
   );
 };
 

diff --git a/pages/popup/src/index.css b/pages/popup/src/index.css
@@ -1,19 +1,14 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
+@import url('https://fonts.googleapis.com/css2?family=Agbalumo&display=swap');
 body {
-  width: 300px;
-  height: 260px;
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
-    'Droid Sans', 'Helvetica Neue', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  position: relative;
+    width: 700px;
+    height: 700px;
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    position: relative;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
-}
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
diff --git a/pages/popup/tailwind.config.ts b/pages/popup/tailwind.config.ts
@@ -1,7 +1,11 @@
-import baseConfig from '@extension/tailwindcss-config';
-import type { Config } from 'tailwindcss/types/config';
+import type { Config } from 'tailwindcss';
 
 export default {
-  ...baseConfig,
-  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
-} as Config;
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+} satisfies Config;