Skip to content

Commit 5577478

Browse files
lcandy2lcandy2
committed
feat: popup page
1 parent d74f731 commit 5577478

File tree

10 files changed

+504
-138
lines changed

10 files changed

+504
-138
lines changed

‎entrypoints/popup/App.css‎

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎entrypoints/popup/App.tsx‎

Lines changed: 71 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,80 @@
1-
import { useState } from 'react';
2-
import reactLogo from '@/assets/react.svg';
3-
import wxtLogo from '/wxt.svg';
4-
import './App.css';
1+
import { useState, useEffect } from 'react';
2+
import { storage } from 'wxt/storage';
53

64
function App() {
7-
const [count, setCount] = useState(0);
5+
const [baseUrl, setBaseUrl] = useState<string>('');
6+
const [isSaved, setIsSaved] = useState(false);
7+
8+
useEffect(() => {
9+
storage.getItem<string>('sync:baseUrl').then((savedUrl) => {
10+
if (savedUrl) {
11+
setBaseUrl(savedUrl);
12+
}
13+
});
14+
}, []);
15+
16+
const handleSave = async (e: React.FormEvent) => {
17+
e.preventDefault();
18+
await storage.setItem('sync:baseUrl', baseUrl);
19+
setIsSaved(true);
20+
setTimeout(() => setIsSaved(false), 2500);
21+
};
822

923
return (
10-
<>
11-
<div>
12-
<a href="https://wxt.dev" target="_blank">
13-
<img src={wxtLogo} className="logo" alt="WXT logo" />
14-
</a>
15-
<a href="https://react.dev" target="_blank">
16-
<img src={reactLogo} className="logo react" alt="React logo" />
17-
</a>
24+
<div className="min-w-32 p-4 bg-[#fff4da]">
25+
<div className="mb-4">
26+
<h1 className="text-2xl font-bold tracking-tight">
27+
<span className="text-gray-900">Git</span><span className="text-[#fca847]">ingest</span>
28+
</h1>
1829
</div>
19-
<h1>WXT + React</h1>
20-
<div className="card">
21-
<button onClick={() => setCount((count) => count + 1)}>
22-
count is {count}
23-
</button>
24-
<p>
25-
Edit <code>src/App.tsx</code> and save to test HMR
26-
</p>
30+
31+
<div className="rounded-xl relative z-20 pl-6 sm:pl-8 pr-6 sm:pr-12 py-6 border-[3px] border-gray-900 bg-[#fff4da]">
32+
<form
33+
className="flex flex-col w-full h-full justify-center items-stretch space-y-4"
34+
onSubmit={handleSave}
35+
>
36+
<div className="space-y-2">
37+
<label
38+
htmlFor="baseUrl"
39+
className="block font-bold text-gray-900 text-sm"
40+
>
41+
Service URL
42+
</label>
43+
<div className="relative">
44+
<div className="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0 z-10"></div>
45+
<input
46+
id="baseUrl"
47+
type="text"
48+
value={baseUrl}
49+
onChange={(e) => setBaseUrl(e.target.value)}
50+
placeholder="https://gitingest.com"
51+
className="border-[3px] w-full relative z-20 border-gray-900 placeholder-gray-500 text-base font-medium focus:outline-none py-2 px-4 rounded"
52+
/>
53+
</div>
54+
</div>
55+
56+
<div className="relative w-full group">
57+
<div className="w-full h-full rounded bg-gray-800 translate-y-1 translate-x-1 absolute inset-0 z-10"></div>
58+
<button
59+
type="submit"
60+
className="py-2 rounded px-4 group-hover:-translate-y-px group-hover:-translate-x-px ease-out duration-300 z-20 relative w-full border-[3px] border-gray-900 font-medium bg-[#ffc480] tracking-wide text-base flex-shrink-0 text-gray-900"
61+
>
62+
Save
63+
</button>
64+
</div>
65+
</form>
66+
67+
{isSaved && (
68+
<div className="mt-6 text-sm text-green-600 font-medium text-center relative z-20">
69+
Settings saved!
70+
<br />
71+
<span className="ml-2 font-normal text-gray-600 text-xs">
72+
You may need to refresh the page.
73+
</span>
74+
</div>
75+
)}
2776
</div>
28-
<p className="read-the-docs">
29-
Click on the WXT and React logos to learn more
30-
</p>
31-
</>
77+
</div>
3278
);
3379
}
3480

‎entrypoints/popup/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Default Popup Title</title>
6+
<title>Git Ingest</title>
77
<meta name="manifest.type" content="browser_action" />
88
</head>
99
<body>

‎entrypoints/popup/main.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import React from 'react';
2-
import ReactDOM from 'react-dom/client';
3-
import App from './App.tsx';
4-
import './style.css';
1+
import React from "react";
2+
import ReactDOM from "react-dom/client";
3+
import App from "./App.tsx";
4+
import "./style.css";
55

66
ReactDOM.createRoot(document.getElementById('root')!).render(
77
<React.StrictMode>

‎entrypoints/popup/style.css‎

Lines changed: 14 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,27 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
15
:root {
26
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3-
line-height: 1.5;
4-
font-weight: 400;
5-
6-
color-scheme: light dark;
7-
color: rgba(255, 255, 255, 0.87);
8-
background-color: #242424;
9-
10-
font-synthesis: none;
117
text-rendering: optimizeLegibility;
128
-webkit-font-smoothing: antialiased;
139
-moz-osx-font-smoothing: grayscale;
1410
-webkit-text-size-adjust: 100%;
1511
}
1612

17-
a {
18-
font-weight: 500;
19-
color: #646cff;
20-
text-decoration: inherit;
21-
}
22-
a:hover {
23-
color: #535bf2;
24-
}
25-
2613
body {
2714
margin: 0;
28-
display: flex;
29-
place-items: center;
30-
min-width: 320px;
31-
min-height: 100vh;
15+
padding: 0;
16+
width: fit-content;
17+
min-width: 360px;
18+
height: fit-content;
19+
min-height: fit-content;
3220
}
3321

34-
h1 {
35-
font-size: 3.2em;
36-
line-height: 1.1;
37-
}
38-
39-
button {
40-
border-radius: 8px;
41-
border: 1px solid transparent;
42-
padding: 0.6em 1.2em;
43-
font-size: 1em;
44-
font-weight: 500;
45-
font-family: inherit;
46-
background-color: #1a1a1a;
47-
cursor: pointer;
48-
transition: border-color 0.25s;
49-
}
50-
button:hover {
51-
border-color: #646cff;
52-
}
53-
button:focus,
54-
button:focus-visible {
55-
outline: 4px auto -webkit-focus-ring-color;
56-
}
57-
58-
@media (prefers-color-scheme: light) {
59-
:root {
60-
color: #213547;
61-
background-color: #ffffff;
62-
}
63-
a:hover {
64-
color: #747bff;
65-
}
66-
button {
67-
background-color: #f9f9f9;
68-
}
22+
#root {
23+
width: 100%;
24+
height: 100%;
25+
display: flex;
26+
flex-direction: column;
6927
}

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,9 @@
2929
"@types/react": "^19.0.1",
3030
"@types/react-dom": "^19.0.2",
3131
"@wxt-dev/module-react": "^1.1.2",
32+
"autoprefixer": "^10.4.20",
33+
"postcss": "^8.4.49",
34+
"tailwindcss": "^3.4.17",
3235
"typescript": "^5.6.3",
3336
"wxt": "^0.19.13"
3437
},

0 commit comments

Comments
 (0)