feat: apps page (will fix formatting)

src/main.tsx

@@ -16,6 +16,7 @@ declare global {
     __$ampere: any;
   }
 }
+
 export default function App() {
   useEffect(() => {
     if ("serviceWorker" in navigator) {
@@ -42,6 +43,7 @@ export default function App() {
           <Route path="/view/:url" Component={View} />
           <Route path="/settings" Component={Settings} />
           <Route path="/apps" Component={Apps} />
+          <Route path="/app/:url" Component={App} /> 
           <Route path="/~/*" Component={ServiceWorkerError} />
           <Route path="*" Component={PageNotFound} />
         </Routes>

src/pages/App.tsx

@@ -0,0 +1,12 @@
+import { useParams } from "react-router-dom";
+
+export default function App() {
+  const { url } = useParams();
+  return (
+    <>
+      <iframe
+        src={`../apps/${url}`}
+      />
+    </>
+  );
+}

src/pages/Apps.tsx

@@ -1,15 +1,18 @@
 import Navbar from "@/components/Navbar";
 import Header from "@/components/Header";
-/*
 import {
     Card,
     CardContent,
     CardDescription,
-    CardFooter,
     CardHeader,
     CardTitle,
   } from "@/components/ui/card";
-*/
+import { apps } from "./apps/apps";
+
+export function open() {
+
+}
+
 export default function Apps() {
   return (
     <>
@@ -20,23 +23,21 @@ export default function Apps() {
           Apps
         </div>
         <div className="w-full h-[calc(100%_-_5rem)] translate-y-20">
-          <iframe
-            width="100%"
-            height="100%"
-            src="https://example.com"
-          ></iframe>
-        {/*
         {apps.map((app) => (
           <div>
-            <Card>
-              <CardHeader>
-                <CardTitle></CardTitle>
-                <CardDescription></CardDescription>
-              </CardHeader>
-            </Card>
-          </div>
-        ))}
-        */}
+            <a href={`../../apps/${app.path}`}>
+              <Card>
+                <CardHeader>
+                  <CardTitle>{app.name}</CardTitle>
+                  <CardDescription>{app.desc}</CardDescription>
+                </CardHeader>
+                  <CardContent>
+                    <img src={`../../apps/${app.path}/icon.png`}></img>
+                  </CardContent>
+                </Card>
+              </a>
+            </div>
+          ))}
         </div>
       </div>
     </>

src/pages/apps/apps.ts

@@ -1,3 +1,9 @@
-// import list from "apps.json";
+import list from "./apps.json";
 
-// export const apps = list as [];
+export type Application = {
+  name: string;
+  desc: string;
+  path: string;
+}
+
+export const apps = list as Application[];

tsconfig.json

@@ -24,6 +24,6 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
   },
-  "include": ["src"],
+  "include": ["src", "src/pages/apps"],
   "references": [{ "path": "./tsconfig.node.json" }],
 }