mirror of
https://github.com/ajnart/homarr.git
synced 2025-11-14 17:26:26 +01:00
Refactor
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user