Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-13 17:05:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

✨ Improve management landing page

Browse Source
This commit is contained in:
Manuel
2023-07-29 15:32:17 +02:00
parent 5cac368926
commit 76e3bc28e5
2 changed files with 151 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/layout/admin/main-admin.layout.tsx
View File

@@ -1,6 +1,7 @@
import { import {
AppShell, AppShell,
Avatar, Avatar,
Box,
Flex, Flex,
Footer, Footer,
Group, Group,
@@ -15,6 +16,7 @@ import {
UnstyledButton, UnstyledButton,
} from '@mantine/core'; } from '@mantine/core';
import { import {
IconAlertTriangle,
IconBook2, IconBook2,
IconBrandDiscord, IconBrandDiscord,
IconBrandGithub, IconBrandGithub,
@@ -94,17 +96,46 @@ export const MainLayout = ({ children }: MainLayoutProps) => {
</ThemeIcon> </ThemeIcon>
} }
> >
<NavLink icon={<IconBook2 size="1rem" />} label="Documentation" /> <NavLink
<NavLink icon={<IconBrandGithub size="1rem" />} label="Report an issue / bug" /> icon={<IconBook2 size="1rem" />}
<NavLink icon={<IconBrandDiscord size="1rem" />} label="Ask a question" /> component="a"
<NavLink icon={<IconGitFork size="1rem" />} label="Contribute" /> href="https://homarr.dev/docs/about"
label="Documentation"
/>
<NavLink
icon={<IconBrandGithub size="1rem" />}
component="a"
href="https://github.com/ajnart/homarr/issues/new/choose"
label="Report an issue / bug"
/>
<NavLink
icon={<IconBrandDiscord size="1rem" />}
component="a"
href="https://discord.com/invite/aCsmEV5RgA"
label="Community Discord"
/>
<NavLink
icon={<IconGitFork size="1rem" />}
component="a"
href="https://github.com/ajnart/homarr"
label="Contribute"
/>
</NavLink> </NavLink>
</Navbar.Section> </Navbar.Section>
</Navbar> </Navbar>
} }
header={ header={
<Header height={60} p="sm" pt="xs"> <Header height={60 + 30} pb="sm" pt={0}>
<Group spacing="xl" position="apart" noWrap> <Box bg="red" h={30} p={3} px={6}>
<Flex h="100%" align="center" columnGap={7}>
<IconAlertTriangle color="white" size="1rem" />
<Text color="white">
This is an experimental feature of Homarr. Please report any issues to the official
Homarr team.
</Text>
</Flex>
</Box>
<Group spacing="xl" mt="xs" px="md" position="apart" noWrap>
<UnstyledButton component={Link} href="/manage"> <UnstyledButton component={Link} href="/manage">
<Logo /> <Logo />
</UnstyledButton> </UnstyledButton>

123
src/pages/manage/index.tsx
View File

@@ -1,12 +1,117 @@
import { Title } from "@mantine/core"; import {
import { MainLayout } from "~/components/layout/admin/main-admin.layout"; Box,
Card,
Group,
SimpleGrid,
Stack,
Text,
Title,
UnstyledButton,
createStyles,
} from '@mantine/core';
import { IconArrowRight } from '@tabler/icons-react';
import Image from 'next/image';
import { MainLayout } from '~/components/layout/admin/main-admin.layout';
const ManagementPage = () => { const ManagementPage = () => {
return ( const { classes } = useStyles();
<MainLayout> return (
<Title>Good morning, Manicraft1001</Title> <MainLayout>
</MainLayout> <Box className={classes.box} w="100%" h={150} p="xl" mb={50}>
) <Group position="apart">
} <Stack spacing={15}>
<Title className={classes.boxTitle} order={2}>
Welcome back, Manicraft1001
</Title>
<Text>
Are you ready to organize?
<br />
You currently have 3 dashboards with 39 apps on them.
</Text>
</Stack>
<Box bg="blue" w={100} h="100%" pos="relative">
<Box pos="absolute" bottom={-100} right={0}>
<Image src="/imgs/logo/logo.png" width={200} height={150} alt="" />
</Box>
</Box>
</Group>
</Box>
export default ManagementPage; <Text weight="bold" mb="md">
Quick actions
</Text>
<SimpleGrid
cols={3}
spacing="xl"
breakpoints={[
{ maxWidth: '62rem', cols: 2, spacing: 'lg' },
{ maxWidth: '48rem', cols: 1, spacing: 'md' },
]}
>
<UnstyledButton>
<Card className={classes.quickActionCard}>
<Group spacing={30} noWrap>
<Stack spacing={0}>
<Text weight="bold">New dashboard</Text>
<Text>Create a new dashboard</Text>
</Stack>
<IconArrowRight />
</Group>
</Card>
</UnstyledButton>
<UnstyledButton>
<Card className={classes.quickActionCard}>
<Group spacing={30} noWrap>
<Stack spacing={0}>
<Text weight="bold">Your dasboards</Text>
<Text>Show a list of all your dashboards</Text>
</Stack>
<IconArrowRight />
</Group>
</Card>
</UnstyledButton>
<UnstyledButton>
<Card className={classes.quickActionCard}>
<Group spacing={30} noWrap>
<Stack spacing={0}>
<Text weight="bold">Invite a new user</Text>
<Text>Create and send an invitation for registration</Text>
</Stack>
<IconArrowRight />
</Group>
</Card>
</UnstyledButton>
<UnstyledButton>
<Card className={classes.quickActionCard}>
<Group spacing={30} noWrap>
<Stack spacing={0}>
<Text weight="bold">Your preferences</Text>
<Text>Adjust language, colors and more</Text>
</Stack>
<IconArrowRight />
</Group>
</Card>
</UnstyledButton>
</SimpleGrid>
</MainLayout>
);
};
export default ManagementPage;
const useStyles = createStyles((theme) => ({
box: {
borderRadius: theme.radius.md,
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.red[4] : theme.colors.red[1],
},
boxTitle: {
color: theme.colors.red[6],
},
quickActionCard: {
height: "100%",
backgroundColor: theme.colors.gray[2],
'&:hover': {
backgroundColor: theme.colors.gray[3],
},
},
}));