Skip to content

Commit 5780cb9

Browse files
benderabendera
committed
Setup react router
1 parent 9ab2214 commit 5780cb9

File tree

11 files changed

+106
-187
lines changed

11 files changed

+106
-187
lines changed

‎packages/demo/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta charset="UTF-8" />
66
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
77
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8-
<title>Vite + React + TS</title>
8+
<title>VSCode Elements React Wrappers</title>
99
</head>
1010

1111
<body>

‎packages/demo/package-lock.json‎

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

‎packages/demo/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,12 @@
1010
"preview": "vite preview"
1111
},
1212
"dependencies": {
13+
"@vscode-elements/elements": "^1.7.0",
1314
"@vscode-elements/react-elements": "^0.4.0",
1415
"@vscode-elements/webview-playground": "^1.1.3",
1516
"react": "^18.3.1",
16-
"react-dom": "^18.3.1"
17+
"react-dom": "^18.3.1",
18+
"react-router-dom": "^6.27.0"
1719
},
1820
"devDependencies": {
1921
"@eslint/js": "^9.11.1",

‎packages/demo/src/App.css‎

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

‎packages/demo/src/App.tsx‎

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

‎packages/demo/src/assets/react.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎packages/demo/src/index.css‎

Lines changed: 0 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +0,0 @@
1-
:root {
2-
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;
11-
text-rendering: optimizeLegibility;
12-
-webkit-font-smoothing: antialiased;
13-
-moz-osx-font-smoothing: grayscale;
14-
}
15-
16-
a {
17-
font-weight: 500;
18-
color: #646cff;
19-
text-decoration: inherit;
20-
}
21-
a:hover {
22-
color: #535bf2;
23-
}
24-
25-
body {
26-
margin: 0;
27-
display: flex;
28-
place-items: center;
29-
min-width: 320px;
30-
min-height: 100vh;
31-
}
32-
33-
h1 {
34-
font-size: 3.2em;
35-
line-height: 1.1;
36-
}
37-
38-
button {
39-
border-radius: 8px;
40-
border: 1px solid transparent;
41-
padding: 0.6em 1.2em;
42-
font-size: 1em;
43-
font-weight: 500;
44-
font-family: inherit;
45-
background-color: #1a1a1a;
46-
cursor: pointer;
47-
transition: border-color 0.25s;
48-
}
49-
button:hover {
50-
border-color: #646cff;
51-
}
52-
button:focus,
53-
button:focus-visible {
54-
outline: 4px auto -webkit-focus-ring-color;
55-
}
56-
57-
@media (prefers-color-scheme: light) {
58-
:root {
59-
color: #213547;
60-
background-color: #ffffff;
61-
}
62-
a:hover {
63-
color: #747bff;
64-
}
65-
button {
66-
background-color: #f9f9f9;
67-
}
68-
}

‎packages/demo/src/main.tsx‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,29 @@
11
import { StrictMode } from "react";
22
import { createRoot } from "react-dom/client";
3-
import App from "./App.tsx";
3+
import { createBrowserRouter, RouterProvider } from "react-router-dom";
44
import "./index.css";
5+
import Root from "./routes/Root.tsx";
6+
import BadgePage from "./routes/BadgePage.tsx";
57

68
if (import.meta.env.DEV) {
79
await import("@vscode-elements/webview-playground");
810
}
911

12+
const router = createBrowserRouter([
13+
{
14+
path: "/",
15+
element: <Root />,
16+
children: [
17+
{
18+
path: "/badge",
19+
element: <BadgePage />,
20+
},
21+
],
22+
},
23+
]);
24+
1025
createRoot(document.getElementById("root")!).render(
1126
<StrictMode>
12-
<App />
27+
<RouterProvider router={router} />
1328
</StrictMode>
1429
);

‎packages/demo/src/routes/BadgePage.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { VscodeBadge } from "@vscode-elements/react-elements";
2+
3+
export default function BadgePage() {
4+
return (
5+
<div>
6+
<h1>Badge</h1>
7+
<p><VscodeBadge>2 unsaved</VscodeBadge></p>
8+
<p><VscodeBadge variant="counter">42</VscodeBadge></p>
9+
<p><VscodeBadge variant="activity-bar-counter">42</VscodeBadge></p>
10+
</div>
11+
);
12+
}

‎packages/demo/src/routes/Root.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.Root {
2+
display: flex;
3+
margin: 0 auto;
4+
max-width: 1100px;
5+
}
6+
7+
.Root aside {
8+
flex-basis: 200px;
9+
}

0 commit comments

Comments
 (0)