Brighter background color, rearranging of elementes + empire count

app/globals.css

@@ -11,8 +11,8 @@
 @media (prefers-color-scheme: dark) {
   :root {
     --foreground: #ffffff;
-    --background-start: #000000;
-    --background-end: #000000;
+    --background-start: #1a1a1a;
+    --background-end: #1a1a1a;
   }
 }
 

app/page.tsx

@@ -1,9 +1,22 @@
+'use client';
+import { useState } from 'react';
 import {RadarChart} from '../components/charts/radar'
+import {EmpireStats} from '../components/tables/empires'
+import { Checkbox } from '@nextui-org/react';
 
 export default function Home() {
+  const [weighted, setWeighted] = useState(true);
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between">
-      <RadarChart />
+    <main className="flex min-h-screen flex-row items-center">
+      <div className='flex flex-row min-h-screen'>
+        <RadarChart weighted={weighted}/>
+        <div className='flex flex-col justify-around'>
+          <EmpireStats />
+          <Checkbox labelColor="primary" defaultSelected={weighted} onChange={() => setWeighted(!weighted)}>Weighted Ethics</Checkbox>
+        </div>
+      </div>
+      
+
     </main>
   )
 }

components/tables/empires.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import useSWR from "swr";
+
+const fetcher = async (url:any) => await fetch(url).then((res) => res.json());
+
+export const EmpireStats = () => {
+  const {data} = useSWR('/api/empires',fetcher);
+  
+  let ret;
+
+  if (data) {
+    ret = (
+      <div className="text-blue-600">{data.empireCount} Empires</div>
+    )
+  }
+  else {
+    ret = (<div></div>)
+  }
+  return ret
+}