Skip to content

Commit 5103bab

Browse files
GrayHat12GrayHat12
committed
added browser db, made dark mode the default, changed homepage ui, and a few bugfixes and improvements here and there
1 parent f1d38b1 commit 5103bab

File tree

13 files changed

+442
-180
lines changed

13 files changed

+442
-180
lines changed

‎custom.css

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
#left-pane div[data-path="%2Fa%2F%5B0%5D"],
2+
#left-pane div[data-path="%2Fa"],
3+
#left-pane div[data-path="%2Fa%2F%5B1%5D"],
4+
#left-pane div[data-path="%2Fb%2Fc%2Fd"],
5+
#left-pane div[data-path="%2Fb%2Fc"],
6+
#left-pane div[data-path="%2Fb"] {
7+
--background-color-custom: #F6D283
8+
}
9+
10+
#left-pane div[data-path="%2Fa%2F%5B0%5D"]>div:first-child>div,
11+
#left-pane div[data-path="%2Fa"]>div:first-child>div,
12+
#left-pane div[data-path="%2Fa%2F%5B1%5D"]>div:first-child>div,
13+
#left-pane div[data-path="%2Fb%2Fc%2Fd"]>div:first-child>div,
14+
#left-pane div[data-path="%2Fb%2Fc"]>div:first-child>div,
15+
#left-pane div[data-path="%2Fb"]>div:first-child>div {
16+
color: #292D1C !important;
17+
--jse-key-color: #292D1C !important;
18+
background-color: var(--background-color-custom) !important
19+
}
20+
21+
#left-pane div[data-path="%2Fa%2F%5B0%5D"]:first-child,
22+
#left-pane div[data-path="%2Fa"]:first-child,
23+
#left-pane div[data-path="%2Fa%2F%5B1%5D"]:first-child,
24+
#left-pane div[data-path="%2Fb%2Fc%2Fd"]:first-child,
25+
#left-pane div[data-path="%2Fb%2Fc"]:first-child,
26+
#left-pane div[data-path="%2Fb"]:first-child {
27+
color: #292D1C !important;
28+
--jse-selection-background-inactive-color: var(--background-color-custom) !important
29+
}
30+
31+
#right-pane div[data-path="%2Fa%2F%5B0%5D"],
32+
#right-pane div[data-path="%2Fa"],
33+
#right-pane div[data-path="%2Fa%2F%5B1%5D"],
34+
#right-pane div[data-path="%2Fb%2Fc%2Fd"],
35+
#right-pane div[data-path="%2Fb%2Fc"],
36+
#right-pane div[data-path="%2Fb"] {
37+
--background-color-custom: #F6D283
38+
}
39+
40+
#right-pane div[data-path="%2Fa%2F%5B0%5D"]>div:first-child>div,
41+
#right-pane div[data-path="%2Fa"]>div:first-child>div,
42+
#right-pane div[data-path="%2Fa%2F%5B1%5D"]>div:first-child>div,
43+
#right-pane div[data-path="%2Fb%2Fc%2Fd"]>div:first-child>div,
44+
#right-pane div[data-path="%2Fb%2Fc"]>div:first-child>div,
45+
#right-pane div[data-path="%2Fb"]>div:first-child>div {
46+
color: #292D1C !important;
47+
--jse-key-color: #292D1C !important;
48+
background-color: var(--background-color-custom) !important
49+
}
50+
51+
#right-pane div[data-path="%2Fa%2F%5B0%5D"]:first-child,
52+
#right-pane div[data-path="%2Fa"]:first-child,
53+
#right-pane div[data-path="%2Fa%2F%5B1%5D"]:first-child,
54+
#right-pane div[data-path="%2Fb%2Fc%2Fd"]:first-child,
55+
#right-pane div[data-path="%2Fb%2Fc"]:first-child,
56+
#right-pane div[data-path="%2Fb"]:first-child {
57+
color: #292D1C !important;
58+
--jse-selection-background-inactive-color: var(--background-color-custom) !important
59+
}

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@
1515
"dependencies": {
1616
"@nextui-org/react": "1.0.0-beta.13",
1717
"dequal": "^2.0.3",
18+
"dexie": "^3.2.4",
19+
"dexie-react-hooks": "^1.1.6",
1820
"isoworker": "^0.2.4",
1921
"jsonabc": "github:GrayHat12/jsonabc",
2022
"localforage": "^1.10.0",

‎pnpm-lock.yaml

Lines changed: 23 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App.tsx

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import { lazy, Suspense, LazyExoticComponent } from "react";
22
import { createHashRouter, RouterProvider } from "react-router-dom";
33
import Loading from "./pages/Loading";
4-
import { AppProvider } from "./context/AppContext";
54
import Header from "./components/Header";
6-
import Drawer from "./components/Drawer";
5+
// import Drawer from "./components/Drawer";
76
import { Outlet } from "react-router-dom";
87
import { Grid } from "@nextui-org/react";
98

@@ -22,10 +21,10 @@ export function RootApp() {
2221
return (
2322
<>
2423
<Header>
25-
<Grid.Container gap={2} justify="start">
26-
<Grid sm={1}>
24+
<Grid.Container gap={1} justify="start">
25+
{/* <Grid sm={1} style={{borderRight: '5px solid white'}}>
2726
<Drawer />
28-
</Grid>
27+
</Grid> */}
2928
<Grid sm>
3029
<Outlet />
3130
</Grid>
@@ -62,8 +61,6 @@ const router = createHashRouter([
6261

6362
export default function App() {
6463
return (
65-
<AppProvider>
66-
<RouterProvider router={router}></RouterProvider>
67-
</AppProvider>
64+
<RouterProvider router={router}></RouterProvider>
6865
);
6966
}

‎src/components/ComparisonCard/index.tsx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { Card, Container, Text } from "@nextui-org/react";
2+
import { ComparisonMetaData } from "../../context/AppContext";
3+
import { useNavigate } from "react-router-dom";
4+
5+
export interface ComparsionCardProps {
6+
metadata?: ComparisonMetaData;
7+
};
8+
9+
export default function ComparisonCard(props: ComparsionCardProps) {
10+
const navigate = useNavigate();
11+
12+
function onClick() {
13+
if (props.metadata) {
14+
navigate(`compare/${props.metadata.id}`)
15+
}
16+
else {
17+
navigate("compare/new");
18+
}
19+
}
20+
21+
return (
22+
<Container>
23+
<Card onClick={onClick} isPressable css={{ w: "inherit", h: "inherit", $$cardColor: props.metadata ? '$colors$primary' : '$colors$secondary' }}>
24+
<Card.Body>
25+
<Container css={{ display: "flex", w: "$50", h: "$50", maxH: "$100", maxW: "$100", wordWrap: "break-word" }}>
26+
<Text color="white" h4>{props.metadata?.title || "New Comparison"}</Text>
27+
</Container>
28+
</Card.Body>
29+
</Card>
30+
</Container>
31+
);
32+
}

‎src/components/Drawer/Drawer.module.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.card {
2+
width: 100px;
3+
height: 100px;
4+
margin: auto;
5+
border-radius: 10px;
6+
background: #212121;
7+
box-shadow: 1.5px 1.5px 3px rgb(25, 25, 25),
8+
-1.5px -1.5px 3px rgb(60, 60, 60);
9+
}

‎src/components/Drawer/index.tsx

Lines changed: 30 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import { Card, Container, Text } from "@nextui-org/react";
2-
import { ComparisonMetaData, useAppContext } from "../../context/AppContext";
2+
import { ComparisonMetaData } from "../../context/AppContext";
33
import { useNavigate } from "react-router-dom";
4+
import { db as database } from "../../context/db";
5+
import { useLiveQuery } from "dexie-react-hooks";
6+
import styles from "./Drawer.module.css";
47

58
function generateMockData(items: number) {
69
const data = [];
@@ -18,30 +21,40 @@ export interface ComparisonMetaProps {
1821
}
1922

2023
export function CompareMetaCard(props: ComparisonMetaProps) {
24+
console.log('props', props);
2125
let navigate = useNavigate();
2226
function navigateToCompare() {
2327
navigate(`compare/${props.metadata.id}`);
2428
}
2529

30+
// return (
31+
// <Card
32+
// onPress={navigateToCompare}
33+
// isPressable
34+
// isHoverable
35+
// variant="bordered"
36+
// css={{ mw: "400px", marginBottom: 20 }}
37+
// >
38+
// <Card.Body css={{ textAlign: "justify" }}>
39+
// <Text>{props.metadata.title}</Text>
40+
// </Card.Body>
41+
// </Card>
42+
// );
2643
return (
27-
<Card
28-
onPress={navigateToCompare}
29-
isPressable
30-
isHoverable
31-
variant="bordered"
32-
css={{ mw: "400px", marginBottom: 20 }}
33-
>
34-
<Card.Body css={{ textAlign: "justify" }}>
35-
<Text>{props.metadata.title}</Text>
36-
</Card.Body>
37-
</Card>
38-
);
44+
<div className={styles.card}>
45+
<Text>{props.metadata.title}</Text>
46+
</div>
47+
)
3948
}
4049

4150
export default function Drawer() {
42-
const { savedComparisons } = useAppContext();
51+
// const { savedComparisons } = useAppContext();
52+
// console.log('saved comparisons', savedComparisons);
4353
// const savedComparisonsList = savedComparisons.length ? savedComparisons : generateMockData(10);
4454

55+
const savedComparisons = useLiveQuery(() => database.comparisons.toArray());
56+
console.log(savedComparisons);
57+
4558
const myAvlHeight = 1152;
4659
const usableHeight = 870;
4760
const usablePercentage = usableHeight / myAvlHeight;
@@ -61,10 +74,10 @@ export default function Drawer() {
6174
<Text h5>Saved Comparisons</Text>
6275
</Container>
6376
<div style={{ maxHeight: currentAvlHeight, overflowX: "hidden", overflowY: "auto" }}>
64-
{savedComparisons.map((meta) => (
65-
<CompareMetaCard key={meta.id} metadata={meta} />
77+
{savedComparisons?.map((meta) => (
78+
<CompareMetaCard key={meta.id} metadata={{ id: meta.id as number, title: meta.data.title }} />
6679
))}
67-
{savedComparisons.length === 0 && <Text>No Saved Instances</Text>}
80+
{savedComparisons?.length === 0 && <Text>No Saved Instances</Text>}
6881
</div>
6982
</Container>
7083
);

‎src/components/Header/index.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,18 @@ import { Navbar, Switch, Text } from "@nextui-org/react";
22
import AppLogo from "../../assets/vite.svg";
33
import Layout from "../Layout";
44
import useDarkMode from "use-dark-mode";
5+
import { Link } from "react-router-dom";
56
import { PropsWithChildren } from "react";
67
import { PiMoon, PiSunBold } from "react-icons/pi";
78

8-
interface HeaderProps extends PropsWithChildren {}
9+
interface HeaderProps extends PropsWithChildren { };
910

1011
export default function Header(props: HeaderProps) {
1112
const darkMode = useDarkMode();
1213
return (
1314
<Layout content={props.children}>
1415
<Navbar isCompact isBordered variant="static">
15-
<Navbar.Brand>
16+
<Navbar.Brand as={Link} to="/" href="/">
1617
<img src={AppLogo} alt="Vite Logo" width="32" height="32" />
1718
<Text b color="inherit" hideIn="xs">
1819
JSON Compare

0 commit comments

Comments
 (0)