diff --git a/src/components/sections/InstancesSection/InstancesTable/InstanceRow/InstanceRow.module.scss b/src/components/sections/InstancesSection/InstancesTable/InstanceRow/InstanceRow.module.scss
new file mode 100644
index 0000000..a0f956a
--- /dev/null
+++ b/src/components/sections/InstancesSection/InstancesTable/InstanceRow/InstanceRow.module.scss
@@ -0,0 +1,4 @@
+.operators {
+ display: flex;
+ gap: .5rem;
+}
\ No newline at end of file
diff --git a/src/components/sections/InstancesSection/InstancesTable/InstanceRow/index.tsx b/src/components/sections/InstancesSection/InstancesTable/InstanceRow/index.tsx
new file mode 100644
index 0000000..c56eb9d
--- /dev/null
+++ b/src/components/sections/InstancesSection/InstancesTable/InstanceRow/index.tsx
@@ -0,0 +1,33 @@
+import type { Instance } from "@/lib/interfaces/instance";
+import styles from "./InstanceRow.module.scss";
+
+const InstanceRow = ({ instance }: { instance: Instance }) => {
+ const domain = new URL(instance.url).hostname;
+
+ return (
+
+ |
+
+ {domain}
+
+ |
+ {instance.regions.join(", ")} |
+
+
+ |
+
+ );
+};
+
+export default InstanceRow;
diff --git a/src/components/sections/InstancesSection/InstancesTable/index.tsx b/src/components/sections/InstancesSection/InstancesTable/index.tsx
index f45a380..3427100 100644
--- a/src/components/sections/InstancesSection/InstancesTable/index.tsx
+++ b/src/components/sections/InstancesSection/InstancesTable/index.tsx
@@ -1,5 +1,9 @@
+import { useEffect, useState } from "react";
import styles from "./InstancesTable.module.scss";
import { Inter } from "next/font/google";
+import type { Instance } from "@/lib/interfaces/instance";
+import { fetchInstances } from "@/lib/instances";
+import InstanceRow from "./InstanceRow";
const inter = Inter({
weight: ["400", "500", "600", "700"],
@@ -7,6 +11,21 @@ const inter = Inter({
});
const InstancesTable = () => {
+ const [instances, setInstances] = useState([]);
+
+ useEffect(() => {
+ init();
+ }, []);
+
+ const init = async () => {
+ try {
+ const instances = await fetchInstances();
+ setInstances(instances);
+ } catch (e) {
+ console.error(e);
+ }
+ };
+
return (
@@ -18,11 +37,9 @@ const InstancesTable = () => {
-
- | Instance 1 |
- United States |
- Admin 1 |
-
+ {instances.map((instance, i) => (
+
+ ))}
diff --git a/src/lib/instances.ts b/src/lib/instances.ts
new file mode 100644
index 0000000..1b813ee
--- /dev/null
+++ b/src/lib/instances.ts
@@ -0,0 +1,13 @@
+import { Instance } from "./interfaces/instance";
+
+export const fetchInstances = async () => {
+ const instanceManifestUrl =
+ process.env.NEXT_PUBLIC_INSTANCE_MANIFEST_URL ||
+ "https://raw.githubusercontent.com/httpjamesm/AnonymousOverflow/main/instances.json";
+
+ const res = await fetch(instanceManifestUrl);
+
+ const data: Instance[] = await res.json();
+
+ return data;
+};
diff --git a/src/lib/interfaces/instance.ts b/src/lib/interfaces/instance.ts
new file mode 100644
index 0000000..916f6bb
--- /dev/null
+++ b/src/lib/interfaces/instance.ts
@@ -0,0 +1,5 @@
+export interface Instance {
+ url: string;
+ regions: string[];
+ operators: string[];
+}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 05a8a74..5211404 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -8,4 +8,12 @@ body,
body {
background-color: #1B1F26;
+}
+
+a {
+ color: #92adff;
+ text-decoration: none;
+ cursor: pointer;
+ display: inline-block;
+ font-weight: bold;
}
\ No newline at end of file