main component

src/components/header.jsx

@@ -0,0 +1,92 @@
+import Logo from '../assets/logo.png';
+import { Avatar, createStyles, Header, Group, rem, UnstyledButton, Title, ActionIcon, Tooltip } from '@mantine/core';
+import SwitchToggle from './toggle-colorscheme';
+import { IconUserCheck, IconUserEdit, IconUserOff } from '@tabler/icons-react';
+import { logout, useAuth } from '../tools/auth-provider';
+import { useNavigate } from 'react-router-dom';
+
+const useStyles = createStyles((theme) => ({
+    header: {
+        paddingLeft: theme.spacing.md,
+        paddingRight: theme.spacing.md,
+    },
+
+    inner: {
+        height: rem(56),
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+
+    links: {
+        [theme.fn.smallerThan('md')]: {
+            display: 'none',
+        },
+    },
+
+    search: {
+        [theme.fn.smallerThan('xs')]: {
+            display: 'none',
+        },
+    },
+
+    link: {
+        display: 'block',
+        lineHeight: 1,
+        padding: `${rem(8)} ${rem(12)}`,
+        borderRadius: theme.radius.sm,
+        textDecoration: 'none',
+        color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[7],
+        fontSize: theme.fontSizes.sm,
+        fontWeight: 500,
+
+        '&:hover': {
+            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
+        },
+    },
+}));
+
+const links = [
+    { label: 'Playlists', link: '/playlists' },
+    { label: 'Files', link: '/files' },
+    { label: 'Planning', link: '/planning' },
+];
+
+const HeaderSearch = () => {
+    const { classes } = useStyles();
+    const { role } = useAuth();
+    const navigate = useNavigate();
+
+    const items = links.map((link) => (
+        <UnstyledButton key={link.label} className={classes.link} onClick={() => navigate(link.link)}>
+            <Title order={4}>{link.label}</Title>
+        </UnstyledButton>
+    ));
+
+    return (
+        <Header height={56} className={classes.header}>
+            <div className={classes.inner}>
+                <Group>
+                    <Avatar src={Logo} size={30} />
+                    <UnstyledButton onClick={() => navigate('/')} className={classes.link}>
+                        <Title order={1}>Signage</Title>
+                    </UnstyledButton>
+                </Group>
+
+                <Group>
+                    <Group ml={50} spacing={5} className={classes.links}>
+                        {items}
+                    </Group>
+                    <SwitchToggle />
+                    <Tooltip label={'Connect'} withArrow color={color}>
+                        <ActionIcon variant="light" size="lg" onClick={logout} color={color}>
+                            <IconUserOff size="1.2rem" stroke={1.5} />
+                        </ActionIcon>
+                    </Tooltip>
+                </Group>
+            </div>
+        </Header>
+    );
+};
+
+export default HeaderSearch;

src/components/navbar.jsx

@@ -0,0 +1,25 @@
+import { Title, Button, Group, Input, Paper } from '@mantine/core';
+import { IconSearch } from '@tabler/icons-react';
+
+const NavbarSignage = ({ data }) => {
+    return (
+        <Paper shadow="sm" p="md" withBorder mb="md">
+            <Group position="apart">
+                <Title order={1}>{data.title}</Title>
+                <Group>
+                    <Input
+                        placeholder="Search"
+                        value={data.search}
+                        onChange={(event) => data.handlerChange(event)}
+                        icon={<IconSearch size="1rem" stroke={1.5} />}
+                    />
+                    {data?.buttonCreate && (
+                        <Button onClick={data.buttonCreate.handler}>{data.buttonCreate.text}</Button>
+                    )}
+                </Group>
+            </Group>
+        </Paper>
+    );
+};
+
+export default NavbarSignage;

src/components/select-item.jsx

@@ -0,0 +1,37 @@
+import { Card, Grid, Text, Image, Button, Center } from '@mantine/core';
+import { useState } from 'react';
+
+const SelectorItem = ({ file, clickHandler }) => {
+    const [selected, setSelected] = useState(false);
+    const handleClick = () => {
+        setSelected(!selected);
+        clickHandler(file);
+    };
+    
+    return (
+        <Grid.Col span={1} key={file.id}>
+            <Card shadow="sm">
+                <Card.Section>
+                    <Image
+                        src={"/api/file/"+file.id}
+                        alt={file.name}
+                        height={100}
+                        fit="cover"
+                        radius="md"
+                        withPlaceholder
+                    />
+                </Card.Section>
+                <Center>
+                    <Text order={4} mt="md">
+                        {file.name}
+                    </Text>
+                </Center>
+                <Button mt="sm" color={selected ? 'red' : 'blue'} fullWidth variant="light" onClick={handleClick}>
+                    {selected ? 'Unselect' : 'Select'}
+                </Button>
+            </Card>
+        </Grid.Col>
+    );
+};
+
+export default SelectorItem;

src/pages/errors/error-notification.jsx

@@ -0,0 +1,14 @@
+import { notifications } from '@mantine/notifications';
+import { IconCheck, IconX } from '@tabler/icons-react';
+
+const setNotification = (fail, message) => {
+    notifications.show({
+        title: fail ? 'Error' : 'Success',
+        message: message ?? 'Something went wrong',
+        color: fail ? 'red' : 'green',
+        icon: fail ? <IconX size="1.1rem" /> : <IconCheck size="1.1rem" />,
+        autoClose: 5000,
+    });
+};
+
+export default setNotification;