Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-08 06:25:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

💫 Add animations to the PingModule

Browse Source
This commit is contained in:
ajnart
2022-05-18 23:11:58 +02:00
parent dc5ee3bdf3
commit c182397dd9
1 changed files with 13 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/modules/ping/PingModule.tsx
View File

@@ -1,5 +1,6 @@
import { Indicator, Tooltip } from '@mantine/core'; import { Indicator, Tooltip } from '@mantine/core';
import axios from 'axios'; import axios from 'axios';
import { motion } from 'framer-motion';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { Plug } from 'tabler-icons-react'; import { Plug } from 'tabler-icons-react';
import { useConfig } from '../../../tools/state'; import { useConfig } from '../../../tools/state';
@@ -40,12 +41,19 @@ export default function PingComponent(props: any) {
style={{ position: 'absolute', bottom: 20, right: 20 }} style={{ position: 'absolute', bottom: 20, right: 20 }}
label={isOnline === 'loading' ? 'Loading...' : isOnline === 'online' ? 'Online' : 'Offline'} label={isOnline === 'loading' ? 'Loading...' : isOnline === 'online' ? 'Online' : 'Offline'}
> >
<Indicator <motion.div
size={13} animate={{
color={isOnline === 'online' ? 'green' : isOnline === 'down' ? 'red' : 'yellow'} scale: isOnline === 'online' ? [1, 0.8, 1] : 1,
}}
transition={{ repeat: Infinity, duration: 2.5, ease: 'easeInOut' }}
> >
{null} <Indicator
</Indicator> size={13}
color={isOnline === 'online' ? 'green' : isOnline === 'down' ? 'red' : 'yellow'}
>
{null}
</Indicator>
</motion.div>
</Tooltip> </Tooltip>
); );
} }