Aetos Hideout

app/routes/home.tsx

@@ -1,42 +1,156 @@
-import * as React from 'react';
-import Container from '@mui/material/Container';
-import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
-import Link from '@mui/material/Link';
-import { Link as ReactRouterLink } from 'react-router';
-import ProTip from '~/components/ProTip';
-import Copyright from '~/components/Copyright';
+import * as React from "react";
+import Container from "@mui/material/Container";
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
+import Link from "@mui/material/Link";
+import Grid from "@mui/material/Grid";
+import Paper from "@mui/material/Paper";
+import { Link as ReactRouterLink } from "react-router";
+import ProTip from "~/components/ProTip";
+import Copyright from "~/components/Copyright";
+
 
 export function meta() {
   return [
-    { title: 'Material UI - React Router example in TypeScript' },
+    { title: "Material UI - React Router example in TypeScript" },
     {
-      name: 'description',
-      content: 'Welcome to Material UI - React Router example in TypeScript!',
+      name: "description",
+      content:
+        "Welcome to Material UI - React Router example in TypeScript!",
     },
   ];
 }
 
+const services = {
+  media: [
+    {
+      name: "Jellyseerr",
+      url: "http://jellyseerr.aetoskia.com",
+      desc: "Request movies & TV shows",
+    },
+    // {
+    //   name: "Ombi",
+    //   url: "http://ombi.aetoskia.com",
+    //   desc: "Request movies & TV shows",
+    // },
+    {
+      name: "Sonarr",
+      url: "http://sonarr.aetoskia.com",
+      desc: "TV series management",
+    },
+    {
+      name: "Radarr",
+      url: "http://radarr.aetoskia.com",
+      desc: "Movie management",
+    },
+    {
+      name: "Prowlarr",
+      url: "http://prowlarr.aetoskia.com",
+      desc: "Indexer management",
+    },
+    {
+      name: "qBittorrent",
+      url: "http://qbit.aetoskia.com",
+      desc: "Download client & torrent manager",
+      external: true,
+    },
+  ],
+  core: [
+    {
+      name: "Gitea",
+      url: "http://gitea.aetoskia.com",
+      desc: "Hosted on Core Server",
+      external: true,
+    },
+  ],
+};
+
 export default function Home() {
-  return (
+  // @ts-ignore
+    return (
     <Container maxWidth="lg">
-      <Box
-        sx={{
-          my: 4,
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}
-      >
-        <Typography variant="h4" component="h1" sx={{ mb: 2 }}>
-          Material UI - Next.js App Router example in TypeScript
+      {/* Dashboard section */}
+      <Box sx={{ py: 6 }}>
+        <Typography
+          variant="h3"
+          align="center"
+          gutterBottom
+          sx={{ color: "success.main" }}
+        >
+          Aetos Hideout
         </Typography>
-        <Link to="/about" color="secondary" component={ReactRouterLink}>
-          Go to the about page
-        </Link>
-        <ProTip />
-        <Copyright />
+
+        <Typography
+          variant="h5"
+          align="center"
+          sx={{ color: "warning.main", mt: 4, mb: 2 }}
+        >
+          Core Services
+        </Typography>
+        <Grid container spacing={3} justifyContent="center">
+          {services.core.map((s) => (
+            <Grid item xs={12} sm={6} md={4} key={s.name}>
+              <Paper
+                elevation={3}
+                sx={{
+                  p: 2,
+                  textAlign: "center",
+                  bgcolor: "#2d2d2d",
+                  borderRadius: 2,
+                }}
+              >
+                <Link
+                  href={s.url}
+                  target={s.external ? "_blank" : undefined}
+                  rel="noopener"
+                  underline="none"
+                  sx={{ fontSize: 18, fontWeight: "bold", color: "success.main" }}
+                >
+                  {s.name}
+                </Link>
+                <Typography variant="body2" sx={{ mt: 1, color: "#ccc" }}>
+                  {s.desc}
+                </Typography>
+              </Paper>
+            </Grid>
+          ))}
+        </Grid>
+
+        <Typography
+          variant="h5"
+          align="center"
+          sx={{ color: "warning.main", mt: 4, mb: 2 }}
+        >
+          Media Services
+        </Typography>
+        <Grid container spacing={3} justifyContent="center">
+          {services.media.map((s) => (
+            <Grid component="div" item xs={12} sm={6} md={4} key={s.name}>
+              <Paper
+                elevation={3}
+                sx={{
+                  p: 2,
+                  textAlign: "center",
+                  bgcolor: "#2d2d2d",
+                  borderRadius: 2,
+                }}
+              >
+                <Link
+                  href={s.url}
+                  target={s.external ? "_blank" : undefined}
+                  rel="noopener"
+                  underline="none"
+                  sx={{ fontSize: 18, fontWeight: "bold", color: "success.main" }}
+                >
+                  {s.name}
+                </Link>
+                <Typography variant="body2" sx={{ mt: 1, color: "#ccc" }}>
+                  {s.desc}
+                </Typography>
+              </Paper>
+            </Grid>
+          ))}
+        </Grid>
       </Box>
     </Container>
   );