Files
homepage/app/routes/home.tsx

158 lines
4.1 KiB
TypeScript

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" },
{
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() {
// @ts-ignore
return (
<Container maxWidth="lg">
{/* Dashboard section */}
<Box sx={{ py: 6 }}>
<Typography
variant="h3"
align="center"
gutterBottom
sx={{ color: "success.main" }}
>
Aetos Hideout
</Typography>
<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>
);
}