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

Update AppShelf component

Browse Source
This commit is contained in:
Aj - Thomas
2022-04-27 03:11:35 +02:00
parent 4d6d6dcfee
commit 172520f8a5
1 changed files with 10 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
components/AppShelf/AppShelf.tsx
View File

@@ -4,6 +4,9 @@ import { Grid, Group, Text, Image, Anchor, Box, AspectRatio, createStyles } from
import { serviceItem } from './AppShelf.d'; import { serviceItem } from './AppShelf.d';
import AppShelfMenu from './AppShelfMenu'; import AppShelfMenu from './AppShelfMenu';
import AddItemShelfItem from './AddAppShelfItem'; import AddItemShelfItem from './AddAppShelfItem';
import { showNotification } from '@mantine/notifications';
import { AlertCircle, Cross, X } from 'tabler-icons-react';
import { useServices } from '../../tools/state';
const useStyles = createStyles((theme) => ({ const useStyles = createStyles((theme) => ({
main: { main: {
@@ -18,28 +21,18 @@ const useStyles = createStyles((theme) => ({
}, },
})); }));
const AppShelf = () => { const AppShelf = (props: any) => {
const [services, setServices] = useState<serviceItem[]>([]); const { services, addService, removeService, setServicesState } = useServices();
const { classes } = useStyles(); const { classes } = useStyles();
const [hovering, setHovering] = useState('none'); const [hovering, setHovering] = useState('none');
useEffect(() => { useEffect(() => {
const localServices: serviceItem[] = JSON.parse(localStorage.getItem('services') || '[]'); const localServices = localStorage.getItem('services');
if (localServices) { if (localServices) {
setServices(localServices); setServicesState(JSON.parse(localServices));
} }
}, []); }, []);
function addItem(item: serviceItem) {
setServices([...services, item]);
localStorage.setItem('services', JSON.stringify([...services, item]));
}
function removeItem(name: string) {
setServices(services.filter((s) => s.name !== name));
localStorage.setItem('services', JSON.stringify(services.filter((s) => s.name !== name)));
}
return ( return (
<Grid m={'xl'} gutter={'xl'}> <Grid m={'xl'} gutter={'xl'}>
{services.map((service, i) => ( {services.map((service, i) => (
@@ -55,7 +48,7 @@ const AppShelf = () => {
<AspectRatio ratio={4 / 3}> <AspectRatio ratio={4 / 3}>
<Box className={classes.main}> <Box className={classes.main}>
<motion.div animate={{ opacity: hovering == service.name ? 1 : 0 }}> <motion.div animate={{ opacity: hovering == service.name ? 1 : 0 }}>
<AppShelfMenu removeitem={removeItem} name={service.name} /> <AppShelfMenu removeitem={removeService} name={service.name} />
</motion.div> </motion.div>
<Group direction="column" position="center"> <Group direction="column" position="center">
<Anchor href={service.url} target="_blank"> <Anchor href={service.url} target="_blank">
@@ -70,7 +63,7 @@ const AppShelf = () => {
</motion.div> </motion.div>
</Grid.Col> </Grid.Col>
))} ))}
<AddItemShelfItem additem={addItem} /> <AddItemShelfItem additem={addService} />
</Grid> </Grid>
); );
}; };