This commit is contained in:
Tagaishi
2023-07-17 01:21:39 +02:00
parent 24e645b029
commit 201afa79db

View File

@@ -1,4 +1,4 @@
import { Badge, Box, Button, Card, Group, Image, Stack, Text, SimpleGrid, Space } from '@mantine/core'; import { Badge, Box, Button, Card, Group, Image, Stack, Text, SimpleGrid } from '@mantine/core';
import { useElementSize } from '@mantine/hooks'; import { useElementSize } from '@mantine/hooks';
import { useTranslation } from 'next-i18next'; import { useTranslation } from 'next-i18next';
import { IconDeviceGamepad, IconPlayerPlay, IconPlayerStop } from '@tabler/icons-react'; import { IconDeviceGamepad, IconPlayerPlay, IconPlayerStop } from '@tabler/icons-react';
@@ -43,8 +43,8 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
} }
return ( return (
<Stack justify="space-between" h={"100%"} style={{ gap:"0.25rem", }}> <Stack justify="space-between" h={"100%"} spacing="0.25rem">
<SimpleGrid ref={ref} cols={ (width > 275)? 2 : 1 } verticalSpacing="0.25rem" spacing="0.25rem"> <SimpleGrid ref={ref} cols={ width > 275? 2 : 1 } verticalSpacing="0.25rem" spacing="0.25rem">
<Button <Button
onClick={async () => { onClick={async () => {
await mutateAsync({ await mutateAsync({
@@ -56,9 +56,7 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
leftIcon={<IconPlayerPlay size={20} />} leftIcon={<IconPlayerPlay size={20} />}
variant="light" variant="light"
color="green" color="green"
style={{ h="2rem"
height:"2rem",
}}
> >
{t('enableAll')} {t('enableAll')}
</Button> </Button>
@@ -73,15 +71,13 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
leftIcon={<IconPlayerStop size={20} />} leftIcon={<IconPlayerStop size={20} />}
variant="light" variant="light"
color="red" color="red"
style={{ h="2rem"
height:"2rem",
}}
> >
{t('disableAll')} {t('disableAll')}
</Button> </Button>
</SimpleGrid> </SimpleGrid>
<Stack style={{ gap:"0.25rem", }}> <Stack spacing="0.25rem">
{data.status.map((status, index) => { {data.status.map((status, index) => {
const app = config?.apps.find((x) => x.id === status.appId); const app = config?.apps.find((x) => x.id === status.appId);
@@ -103,7 +99,7 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
> >
<Image src={app.appearance.iconUrl} width={40} height={40} fit="contain" /> <Image src={app.appearance.iconUrl} width={40} height={40} fit="contain" />
</Box> </Box>
<Stack style={{ gap: "0rem", }}> <Stack spacing="0rem">
<Text>{app.name}</Text> <Text>{app.name}</Text>
<StatusBadge status={status.status} /> <StatusBadge status={status.status} />
</Stack> </Stack>