Skip to content
This repository was archived by the owner on Sep 11, 2025. It is now read-only.

Commit 966e8e9

Browse files
kristencheungkristencheung
authored
Modus specific webpage (#607)
1 parent 8073ca4 commit 966e8e9

File tree

7 files changed

+121
-40
lines changed

7 files changed

+121
-40
lines changed

‎runtime/explorer/content/ModusIcon.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from "react";
2+
3+
const ModusLogo = ({ className }: { className?: string }) => (
4+
<svg
5+
id="Layer_1"
6+
xmlns="http://www.w3.org/2000/svg"
7+
viewBox="0 0 150 150"
8+
className={className}
9+
>
10+
<defs>
11+
<style>
12+
{`
13+
.cls-1{fill:#3fe6a1;}
14+
.cls-2{fill:#299e6e;}
15+
.cls-3{fill:#383838;}
16+
`}
17+
</style>
18+
</defs>
19+
<polygon
20+
className="cls-1"
21+
points="46.95 95.14 39.95 58.84 44.85 36.24 57.65 34.74 78.65 49.54 92.75 41.54 86.05 54.94 90.05 70.74 94.45 73.84 105.55 68.04 102.85 80.04 131.35 68.84 100.05 107.44 87.55 107.74 75.15 99.24 67.85 88.24 60.45 89.24 46.95 95.14"
22+
/>
23+
<polygon
24+
className="cls-2"
25+
points="57.65 34.74 46.95 95.14 39.95 58.84 44.85 36.24 57.65 34.74"
26+
/>
27+
<polygon
28+
className="cls-2"
29+
points="71.43 44.45 60.45 89.24 86.03 55.05 92.75 41.54 78.65 49.54 71.43 44.45"
30+
/>
31+
<polygon
32+
className="cls-2"
33+
points="94.45 73.84 105.55 68.04 102.85 80.04 131.35 68.84 100.05 107.44 102.85 80.04 94.45 73.84"
34+
/>
35+
<polygon
36+
className="cls-2"
37+
points="80.95 73.84 84.25 80.74 90.95 76.64 80.95 73.84"
38+
/>
39+
</svg>
40+
);
41+
42+
export default ModusLogo;

‎runtime/explorer/content/index.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

‎runtime/explorer/content/main.tsx‎

Lines changed: 33 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import React, { useEffect, useState } from "react";
22
import { createRoot } from "react-dom/client";
33
import { ApiExplorer } from "@hypermode/react-api-explorer";
4+
import ModusIcon from "./ModusIcon";
45
import "@hypermode/react-api-explorer/styles.css";
6+
import "./index.css";
57

68
const rootElement = document.getElementById("root");
79
if (!rootElement) {
@@ -10,26 +12,26 @@ if (!rootElement) {
1012
const root = createRoot(rootElement);
1113

1214
function App() {
13-
const sampleTheme = {
14-
background: "224 71.4% 4.1%",
15-
foreground: "210 20% 98%",
16-
card: "224 71.4% 4.1%",
17-
"card-foreground": "210 20% 98%",
18-
popover: "224 71.4% 4.1%",
19-
"popover-foreground": "210 20% 98%",
20-
primary: "263.4 70% 50.4%",
21-
"primary-foreground": "210 20% 98%",
22-
secondary: "215 27.9% 16.9%",
23-
"secondary-foreground": "210 20% 98%",
24-
muted: "215 27.9% 16.9%",
25-
"muted-foreground": "217.9 10.6% 64.9%",
26-
accent: "215 27.9% 16.9%",
27-
"accent-foreground": "210 20% 98%",
28-
destructive: "0 62.8% 30.6%",
29-
"destructive-foreground": "210 20% 98%",
30-
border: "215 27.9% 16.9%",
31-
input: "215 27.9% 16.9%",
32-
ring: "263.4 70% 50.4%",
15+
const modusTheme = {
16+
background: "150 60% 3%",
17+
foreground: "0 0% 100%",
18+
card: "150 55% 8%",
19+
"card-foreground": "0 0% 100%",
20+
popover: "150 60% 4%",
21+
"popover-foreground": "0 0% 100%",
22+
primary: "150 60% 39%",
23+
"primary-foreground": "0 0% 100%",
24+
secondary: "157 73% 57%",
25+
"secondary-foreground": "150 60% 3%",
26+
muted: "200 15% 12%",
27+
"muted-foreground": "200 8% 64%",
28+
accent: "150 35% 17%",
29+
"accent-foreground": "157 73% 57%",
30+
destructive: "0 84% 60%",
31+
"destructive-foreground": "0 0% 100%",
32+
border: "150 35% 17%",
33+
input: "150 35% 17%",
34+
ring: "150 60% 39%",
3335
};
3436
const [endpoints, setEndpoints] = useState<string[]>([
3537
"http://localhost:8686/graphql",
@@ -58,7 +60,17 @@ function App() {
5860
fetchEndpoints();
5961
}, []);
6062

61-
return <ApiExplorer endpoints={endpoints} theme={sampleTheme} />;
63+
return (
64+
<div className="bg-black pb-2 px-2 h-screen flex flex-col">
65+
<div className="w-full flex items-center justify-center p-2 text-sm text-white/60 tracking-wide">
66+
<p>Powered by Modus</p>
67+
<ModusIcon className="w-8 h-8 mt-1 -ml-1" />
68+
</div>
69+
<div className="grow rounded-lg">
70+
<ApiExplorer endpoints={endpoints} theme={modusTheme} />
71+
</div>
72+
</div>
73+
);
6274
}
6375

6476
root.render(<App />);

‎runtime/explorer/content/package-lock.json‎

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

‎runtime/explorer/content/package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,17 @@
99
"preview": "vite preview"
1010
},
1111
"dependencies": {
12-
"@hypermode/react-api-explorer": "1.0.0-alpha.4",
12+
"@hypermode/react-api-explorer": "1.0.0-alpha.8",
1313
"react": "^18.2.0",
1414
"react-dom": "^18.2.0"
1515
},
1616
"devDependencies": {
1717
"@types/react": "^18.2.0",
1818
"@types/react-dom": "^18.2.0",
1919
"@vitejs/plugin-react": "^4.2.0",
20+
"autoprefixer": "^10.4.20",
21+
"postcss": "^8.4.49",
22+
"tailwindcss": "^3.4.15",
2023
"typescript": "^5.0.0",
2124
"vite": "^5.0.0"
2225
}

‎runtime/explorer/content/postcss.config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
};

‎runtime/explorer/content/tailwind.config.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/** @type {import('tailwindcss').Config} */
2+
export default {
3+
content: [
4+
"./index.html",
5+
"./src/**/*.{js,ts,jsx,tsx}",
6+
"./**/*.{js,ts,jsx,tsx}", // since your files are in the root
7+
],
8+
theme: {
9+
extend: {},
10+
},
11+
plugins: [],
12+
};

0 commit comments

Comments
 (0)