added Services.tsx with sample data
This commit is contained in:
271
app/components/Services.tsx
Normal file
271
app/components/Services.tsx
Normal file
@@ -0,0 +1,271 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
import Box from '@mui/material/Box';
|
||||||
|
import Button from '@mui/material/Button';
|
||||||
|
import Card from '@mui/material/Card';
|
||||||
|
import MuiChip from '@mui/material/Chip';
|
||||||
|
import Container from '@mui/material/Container';
|
||||||
|
import Typography from '@mui/material/Typography';
|
||||||
|
import { styled } from '@mui/material/styles';
|
||||||
|
|
||||||
|
import DevicesRoundedIcon from '@mui/icons-material/DevicesRounded';
|
||||||
|
import EdgesensorHighRoundedIcon from '@mui/icons-material/EdgesensorHighRounded';
|
||||||
|
import ViewQuiltRoundedIcon from '@mui/icons-material/ViewQuiltRounded';
|
||||||
|
|
||||||
|
const services = {
|
||||||
|
media: [
|
||||||
|
{ name: "Jellyseerr", url: "http://jellyseerr.aetoskia.com", desc: "Summon films and series from the digital void.", external: true },
|
||||||
|
{ name: "Sonarr", url: "http://sonarr.aetoskia.com", desc: "Keep the endless chronicles of TV under iron control.", external: true },
|
||||||
|
{ name: "Radarr", url: "http://radarr.aetoskia.com", desc: "Command the legions of cinema, enforce cinematic order.", external: true },
|
||||||
|
{ name: "qBit", url: "http://qbit.aetoskia.com", desc: "Torrent war engine, fetching data across the nether realms.", external: true },
|
||||||
|
],
|
||||||
|
codebase: [
|
||||||
|
{ name: "Gitea", url: "http://gitea.aetoskia.com", desc: "Forge and safeguard code like a sacred relic.", external: true },
|
||||||
|
{ name: "Registry", url: "http://registry.aetoskia.com", desc: "Monitor core constructs of the digital empire.", external: true },
|
||||||
|
{ name: "Drone", url: "http://drone.aetoskia.com", desc: "Automaton architect, building pipelines of perfection.", external: true },
|
||||||
|
],
|
||||||
|
monitoring: [
|
||||||
|
{ name: "Portainer", url: "http://portainer.aetoskia.com", desc: "Oversee the fleet of containers with unyielding vigilance.", external: true },
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const items = [
|
||||||
|
{
|
||||||
|
icon: <ViewQuiltRoundedIcon />,
|
||||||
|
title: 'Dashboard',
|
||||||
|
description:
|
||||||
|
'This item could provide a snapshot of the most important metrics or data points related to the product.',
|
||||||
|
imageLight: "url('/extended_sigil.png')",
|
||||||
|
imageDark: "url('/extended_sigil.png')",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <EdgesensorHighRoundedIcon />,
|
||||||
|
title: 'Mobile integration',
|
||||||
|
description:
|
||||||
|
'This item could provide information about the mobile app version of the product.',
|
||||||
|
imageLight: "url('/extended_sigil.png')",
|
||||||
|
imageDark: "url('/extended_sigil.png')",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <DevicesRoundedIcon />,
|
||||||
|
title: 'Available on all platforms',
|
||||||
|
description:
|
||||||
|
'This item could let users know the product is available on all platforms, such as web, mobile, and desktop.',
|
||||||
|
imageLight: "url('/extended_sigil.png')",
|
||||||
|
imageDark: "url('/extended_sigil.png')",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
interface ChipProps {
|
||||||
|
selected?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Chip = styled(MuiChip)<ChipProps>(({ theme }) => ({
|
||||||
|
variants: [
|
||||||
|
{
|
||||||
|
props: ({ selected }) => !!selected,
|
||||||
|
style: {
|
||||||
|
background:
|
||||||
|
'linear-gradient(to bottom right, hsl(210, 98%, 48%), hsl(210, 98%, 35%))',
|
||||||
|
color: 'hsl(0, 0%, 100%)',
|
||||||
|
borderColor: (theme.vars || theme).palette.primary.light,
|
||||||
|
'& .MuiChip-label': {
|
||||||
|
color: 'hsl(0, 0%, 100%)',
|
||||||
|
},
|
||||||
|
...theme.applyStyles('dark', {
|
||||||
|
borderColor: (theme.vars || theme).palette.primary.dark,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}));
|
||||||
|
|
||||||
|
interface MobileLayoutProps {
|
||||||
|
selectedItemIndex: number;
|
||||||
|
handleItemClick: (index: number) => void;
|
||||||
|
selectedFeature: (typeof items)[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function MobileLayout({
|
||||||
|
selectedItemIndex,
|
||||||
|
handleItemClick,
|
||||||
|
selectedFeature,
|
||||||
|
}: MobileLayoutProps) {
|
||||||
|
if (!items[selectedItemIndex]) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: { xs: 'flex', sm: 'none' },
|
||||||
|
flexDirection: 'column',
|
||||||
|
gap: 2,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box sx={{ display: 'flex', gap: 2, overflow: 'auto' }}>
|
||||||
|
{items.map(({ title }, index) => (
|
||||||
|
<Chip
|
||||||
|
size="medium"
|
||||||
|
key={index}
|
||||||
|
label={title}
|
||||||
|
onClick={() => handleItemClick(index)}
|
||||||
|
selected={selectedItemIndex === index}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</Box>
|
||||||
|
<Card variant="outlined">
|
||||||
|
<Box
|
||||||
|
sx={(theme) => ({
|
||||||
|
mb: 2,
|
||||||
|
backgroundSize: 'cover',
|
||||||
|
backgroundPosition: 'center',
|
||||||
|
minHeight: 280,
|
||||||
|
backgroundImage: 'var(--items-imageLight)',
|
||||||
|
...theme.applyStyles('dark', {
|
||||||
|
backgroundImage: 'var(--items-imageDark)',
|
||||||
|
}),
|
||||||
|
})}
|
||||||
|
style={
|
||||||
|
items[selectedItemIndex]
|
||||||
|
? ({
|
||||||
|
'--items-imageLight': items[selectedItemIndex].imageLight,
|
||||||
|
'--items-imageDark': items[selectedItemIndex].imageDark,
|
||||||
|
} as any)
|
||||||
|
: {}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Box sx={{ px: 2, pb: 2 }}>
|
||||||
|
<Typography
|
||||||
|
gutterBottom
|
||||||
|
sx={{ color: 'text.primary', fontWeight: 'medium' }}
|
||||||
|
>
|
||||||
|
{selectedFeature.title}
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="body2" sx={{ color: 'text.secondary', mb: 1.5 }}>
|
||||||
|
{selectedFeature.description}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
</Card>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Services() {
|
||||||
|
const [selectedItemIndex, setSelectedItemIndex] = React.useState(0);
|
||||||
|
|
||||||
|
const handleItemClick = (index: number) => {
|
||||||
|
setSelectedItemIndex(index);
|
||||||
|
};
|
||||||
|
|
||||||
|
const selectedFeature = items[selectedItemIndex];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Container id="features" sx={{ bgcolor: "#1a1a1a", borderRadius: 3, p: 3, boxShadow: 6 }}>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: { xs: 'column', md: 'row-reverse' },
|
||||||
|
gap: 2,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: { xs: 'none', sm: 'flex' },
|
||||||
|
flexDirection: 'column',
|
||||||
|
gap: 2,
|
||||||
|
height: '100%',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{items.map(({ icon, title, description }, index) => (
|
||||||
|
<Box
|
||||||
|
key={index}
|
||||||
|
component={Button}
|
||||||
|
onClick={() => handleItemClick(index)}
|
||||||
|
sx={[
|
||||||
|
(theme) => ({
|
||||||
|
p: 2,
|
||||||
|
height: '100%',
|
||||||
|
width: '100%',
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: (theme.vars || theme).palette.action.hover,
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
selectedItemIndex === index && {
|
||||||
|
backgroundColor: 'action.selected',
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
sx={[
|
||||||
|
{
|
||||||
|
width: '100%',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'left',
|
||||||
|
gap: 1,
|
||||||
|
textAlign: 'left',
|
||||||
|
textTransform: 'none',
|
||||||
|
color: 'text.secondary',
|
||||||
|
},
|
||||||
|
selectedItemIndex === index && {
|
||||||
|
color: 'text.primary',
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
{icon}
|
||||||
|
|
||||||
|
<Typography variant="h6">{title}</Typography>
|
||||||
|
<Typography variant="body2">{description}</Typography>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
))}
|
||||||
|
</Box>
|
||||||
|
<MobileLayout
|
||||||
|
selectedItemIndex={selectedItemIndex}
|
||||||
|
handleItemClick={handleItemClick}
|
||||||
|
selectedFeature={selectedFeature}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: { xs: 'none', sm: 'flex' },
|
||||||
|
width: { xs: '100%', md: '70%' },
|
||||||
|
height: 'var(--items-image-height)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Card
|
||||||
|
variant="outlined"
|
||||||
|
sx={{
|
||||||
|
height: '100%',
|
||||||
|
width: '100%',
|
||||||
|
display: { xs: 'none', sm: 'flex' },
|
||||||
|
pointerEvents: 'none',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
sx={(theme) => ({
|
||||||
|
m: 'auto',
|
||||||
|
width: 420,
|
||||||
|
height: 500,
|
||||||
|
backgroundSize: 'contain',
|
||||||
|
backgroundImage: 'var(--items-imageLight)',
|
||||||
|
...theme.applyStyles('dark', {
|
||||||
|
backgroundImage: 'var(--items-imageDark)',
|
||||||
|
}),
|
||||||
|
})}
|
||||||
|
style={
|
||||||
|
items[selectedItemIndex]
|
||||||
|
? ({
|
||||||
|
'--items-imageLight': items[selectedItemIndex].imageLight,
|
||||||
|
'--items-imageDark': items[selectedItemIndex].imageDark,
|
||||||
|
} as any)
|
||||||
|
: {}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -5,6 +5,7 @@ import Box from "@mui/material/Box";
|
|||||||
import Link from "@mui/material/Link";
|
import Link from "@mui/material/Link";
|
||||||
import Grid from "@mui/material/Grid";
|
import Grid from "@mui/material/Grid";
|
||||||
import Paper from "@mui/material/Paper";
|
import Paper from "@mui/material/Paper";
|
||||||
|
import Services from "~/components/Services";
|
||||||
|
|
||||||
export function meta() {
|
export function meta() {
|
||||||
return [
|
return [
|
||||||
@@ -49,7 +50,8 @@ export default function Home() {
|
|||||||
>
|
>
|
||||||
<Box sx={{ flex: 1 }} />
|
<Box sx={{ flex: 1 }} />
|
||||||
|
|
||||||
<Box sx={{ height: "40vh", overflowY: "auto", p: 2 }}>
|
<Box sx={{ height: "60vh", overflowY: "auto", p: 2 }}>
|
||||||
|
<Services />
|
||||||
<Container
|
<Container
|
||||||
maxWidth="lg"
|
maxWidth="lg"
|
||||||
sx={{ bgcolor: "#1a1a1a", borderRadius: 3, p: 3, boxShadow: 6 }}
|
sx={{ bgcolor: "#1a1a1a", borderRadius: 3, p: 3, boxShadow: 6 }}
|
||||||
|
|||||||
Reference in New Issue
Block a user