hope/dog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

icons

Browse Source
This commit is contained in:
Peter Hoppe
2023-02-25 00:10:25 +01:00
parent a4455f7450
commit bbb3fd7c45
11 changed files with 127 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/DogNavbar.tsx
View File

@ -1,6 +1,7 @@
import { Button, Navbar, Text } from '@mantine/core'
import { Button, Navbar, Text, ThemeIcon } from '@mantine/core'
import React, { useState } from 'react'
import { Link } from 'react-router-dom'
import { IconGrid, IconUser, IconUserMinus } from '../services/Icons';
import { logOut } from '../services/PhpApi'
import Footer2 from './Footer2'
@ -22,17 +23,22 @@ function DogNavbar({hasUser, onLogout}:{hasUser: boolean, onLogout: () => void})
<div style={{display: 'flex', flexDirection:'column' }}>
{!hasUser && <Text component={Link} variant='link' to='/login'>Login</Text>}
{!hasUser && <Text component={Link} variant='link' to='/reg'>Register</Text>}
{!hasUser && <Text component={Link} variant='link' to='/wantnewpw'>PW neu</Text>}
{hasUser && <Text component={Link} variant='link' to='/profil'>Profil</Text>}
{hasUser && <Text component={Link} variant='link' to='/qr'>QrCode</Text>}
{hasUser && <>
<IconUser/>
<Text component={Link} variant='link' to='/profil'>Profil</Text></>}
{hasUser && <Text component={Link} variant='link' to='/wantnewpw'>PW neu</Text>}
{hasUser && <>
<IconGrid/>
<Text component={Link} variant='link' to='/qr'>QrCode</Text></>}
</div>
</Navbar.Section>
<Navbar.Section className='InputForm' >
{hasUser && <Button sx = {{ padding: '0px 6px;'}} onClick={(e)=>{onLogout()}}>Logout</Button>}
</Navbar.Section>
<div style={{height: '10%' }}></div>
<Navbar.Section className='InputForm' >
{hasUser && <Button sx = {{ padding: '0px 6px;'}} onClick={(e)=>{}}>Account löschen</Button>}
</Navbar.Section>
<Navbar.Section className='InputForm' >
{hasUser && <Button sx = {{ padding: '0px 6px;'}} onClick={(e)=>{onLogout()}}>Logout</Button>}
</Navbar.Section>
<Navbar.Section> </Navbar.Section>
<Navbar.Section><Text component={Link} variant='link' to='/impressum'>Impressum</Text></Navbar.Section>
</Navbar> )

105
src/services/Icons.tsx Normal file
View File

@ -0,0 +1,105 @@
import React from 'react'
const WWW_ROOT: string = process.env.REACT_APP_WWW_ROOT!;
export type TIcon =
{
name: string,
icon: JSX.Element
};
const IconArray: TIcon[] =
[
{
name: "user",
icon:
<img style={{background: 'none'}}
src = {WWW_ROOT+'uploads/user.svg'}
width='32px'
height='32px'
/>
},
{
name: "grid",
icon:
<img style={{background: 'none'}}
src = {WWW_ROOT+'uploads/grid.svg'}
width='32px'
height='32px'
/>
},
{
name: "user-minus",
icon:
<img style={{background: 'none'}}
src = {WWW_ROOT+'uploads/user-minus.svg'}
width='32px'
height='32px'
/>
},
{
name: "log-in",
icon:
<img style={{background: 'none'}}
src = {WWW_ROOT+'uploads/log-in.svg'}
width='32px'
height='32px'
/>
},
{
name: "log-out",
icon:
<img style={{background: 'none'}}
src = {WWW_ROOT+'uploads/log-out.svg'}
width='32px'
height='32px'
/>
},
{
name: "lock",
icon:
<img style={{background: 'none'}}
src = {WWW_ROOT+'uploads/lock.svg'}
width='32px'
height='32px'
/>
}
];
export function IconUser()
{
return (
IconArray.find((i) => i.name === 'user')!.icon )
}
export function IconUserMinus()
{
return (
IconArray.find((i) => i.name === 'user-minus')!.icon )
}
export function IconLogIn()
{
return (
IconArray.find((i) => i.name === 'log-in')!.icon )
}
export function IconLogOut()
{
return (
IconArray.find((i) => i.name === 'log-out')!.icon )
}
export function IconLock()
{
return (
IconArray.find((i) => i.name === 'lock')!.icon )
}
export function IconGrid()
{
return (
IconArray.find((i) => i.name === 'grid')!.icon )
}