10000 rudimentary toggle UI · githubocto/flat-viewer@c66c2a2 · GitHub
[go: up one dir, main page]
Skip to content

Commit c66c2a2

Browse files
author
Matt Rothenberg
committed
rudimentary toggle UI
1 parent abc4d0b commit c66c2a2

File tree

4 files changed

+311
-224
lines changed

4 files changed

+311
-224
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
"@types/react-dom": "^17.0.0",
5656
"@types/react-portal": "^4.0.2",
5757
"@types/react-router-dom": "^5.1.7",
58-
"@vitejs/plugin-react-refresh": "^1.3.1",
58+
"@vitejs/plugin-react": "^1.3.2",
5959
"autoprefixer": "^10.2.5",
6060
"postcss": "^8.2.8",
6161
"tailwindcss": "^3.0.24",

‎src/components/repo-detail.tsx

Lines changed: 42 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from "react";
1+
import React, { useState } from "react";
22
import { RouteComponentProps } from "react-router-dom";
33
import { GoThreeBars, GoX } from "react-icons/go";
44
import { BsArrowRightShort } from "react-icons/bs";
@@ -37,6 +37,7 @@ interface RepoDetailProps extends RouteComponentProps<Repo> {}
3737
export function RepoDetail(props: RepoDetailProps) {
3838
const { match } = props;
3939
const { owner, name } = match.params;
40+
const [showSql, setShowSql] = useState(false);
4041
const [filename, setFilename] = useQueryParam("filename", StringParam);
4142
const [selectedSha, setSelectedSha] = useQueryParam("sha", StringParam);
4243
const disclosure = useDisclosureState();
@@ -226,6 +227,26 @@ export function RepoDetail(props: RepoDetailProps) {
226227
</a>
227228
</div>
228229
)}
230+
231+
{Boolean(filename) && (
232+
<div className="min-w-0 space-y-2">
233+
<div className="mt-6 flex items-center bg-indigo-700 hover:bg-indigo-800 focus:bg-indigo-800 h-9 p-2 rounded text-white text-xs focus:outline-none focus:ring-2 focus:ring-indigo-400 w-full lg:max-w-md">
234+
<label className="flex items-center space-x-2 w-full">
235+
<input
236+
checked={showSql}
237+
onChange={(e) => {
238+
setShowSql(e.target.checked);
239+
}}
240+
className="text-indigo-700 hover:text-indigo-800 focus:text-indigo-800"
241+
type="checkbox"
242+
/>
243+
<span className="text-xs font-medium text-indigo-200 select-none">
244+
Show SQL UI
245+
</span>
246+
</label>
247+
</div>
248+
</div>
249+
)}
229250
</div>
230251
);
231252

@@ -277,22 +298,26 @@ export function RepoDetail(props: RepoDetailProps) {
277298
</div>
278299

279300
<React.Fragment>
280-
{selectedSha && Boolean(filename) && filesStatus !== "error" && (
281-
<DBExplorer
282-
sha={selectedSha}
283-
filename={filename || ""}
284-
owner={owner as string}
285-
name={name as string}
286-
/>
287-
// <JSONDetail
288-
// key={selectedSha}
289-
// filename={filename || ""}
290-
// owner={owner as string}
291-
// name={name as string}
292-
// previousSha={selectedShaPrevious}
293-
// sha={selectedSha}
294-
// />
295-
)}
301+
{selectedSha &&
302+
Boolean(filename) &&
303+
filesStatus !== "error" &&
304+
(showSql ? (
305+
<DBExplorer
306+
sha={selectedSha}
307+
filename={filename || ""}
308+
owner={owner as string}
309+
name={name as string}
310+
/>
311+
) : (
312+
<JSONDetail
313+
key={selectedSha}
314+
filename={filename || ""}
315+
owner={owner as string}
316+
name={name as string}
317+
previousSha={selectedShaPrevious}
318+
sha={selectedSha}
319+
/>
320+
))}
296321
</React.Fragment>
297322
{match &&
298323
!(files || []).length &&

‎vite.config.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { defineConfig } from "vite";
2-
import reactRefresh from "@vitejs/plugin-react-refresh";
2+
import react from "@vitejs/plugin-react";
33
import pluginRewriteAll from "vite-plugin-rewrite-all";
44

55
// https://vitejs.dev/config/
66
export default defineConfig({
7-
plugins: [reactRefresh(), pluginRewriteAll()],
7+
plugins: [react(), pluginRewriteAll()],
88
});

0 commit comments

Comments
 (0)
0