174 lines
6.3 KiB
TypeScript
174 lines
6.3 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";
|
|
|
|
|
|
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">
|
|
<Box
|
|
sx={{
|
|
minHeight: "120vh",
|
|
backgroundImage: "url('/extended_sigil.png')",
|
|
backgroundSize: "cover",
|
|
backgroundRepeat: "no-repeat",
|
|
backgroundPosition: "center",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
}}
|
|
>
|
|
{/* Spacer pushes bottom part down */}
|
|
<Box sx={{flex: 1}}/>
|
|
|
|
{/* Bottom dashboard: only 50% height of viewport */}
|
|
<Box
|
|
sx={{
|
|
height: "60vh", // 50% of viewport height
|
|
overflowY: "auto", // scroll if content overflows
|
|
p: 2,
|
|
}}
|
|
>
|
|
<Container
|
|
maxWidth="lg"
|
|
sx={{
|
|
bgcolor: "#1a1a1a", // dark background
|
|
borderRadius: 3,
|
|
p: 3,
|
|
boxShadow: 6,
|
|
}}
|
|
>
|
|
<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) => (
|
|
<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>
|
|
|
|
<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) => (
|
|
<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>
|
|
</Container>
|
|
</Box>
|
|
</Box>
|
|
</Container>
|
|
|
|
);
|
|
}
|