External/domain-watchdog
1
0
Fork 0
mirror of https://github.com/maelgangloff/domain-watchdog.git synced 2025-12-29 16:15:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: auf Wiedersehen MUI, hallo Ant Design

Browse Source
This commit is contained in:
Maël Gangloff
2024-07-26 16:45:10 +02:00
parent a384140aa7
commit a15c1b2c2f
32 changed files with 923 additions and 1230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
assets/components/AppAppBar.tsx
View File

@@ -1,83 +0,0 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Button from '@mui/material/Button';
import Container from '@mui/material/Container';
import {NavLink} from "react-router-dom";
import ToggleColorMode from "./ToggleColorMode";
import {PaletteMode} from "@mui/material";
import Link from "@mui/material/Link";
import {Pets} from "@mui/icons-material";
interface AppAppBarProps {
mode: PaletteMode;
toggleColorMode: () => void;
isAuthenticated: boolean
}
export default function AppAppBar({mode, toggleColorMode, isAuthenticated}: AppAppBarProps) {
return (
<AppBar
position="fixed"
sx={{boxShadow: 0, bgcolor: 'transparent', backgroundImage: 'none', mt: 2}}
>
<Container maxWidth="lg">
<Toolbar
variant="regular"
sx={(theme) => ({
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
flexShrink: 0,
borderRadius: '999px',
backdropFilter: 'blur(24px)',
maxHeight: 40,
border: '1px solid',
borderColor: 'divider',
bgcolor: 'hsla(220, 60%, 99%, 0.6)',
boxShadow:
'0 1px 2px hsla(210, 0%, 0%, 0.05), 0 2px 12px hsla(210, 100%, 80%, 0.5)',
...theme.applyStyles('dark', {
bgcolor: 'hsla(220, 0%, 0%, 0.7)',
boxShadow:
'0 1px 2px hsla(210, 0%, 0%, 0.5), 0 2px 12px hsla(210, 100%, 25%, 0.3)',
}),
})}
>
<Box sx={{flexGrow: 1, display: 'flex', alignItems: 'center', px: 0}}>
<Pets color="secondary"/>
</Box>
<Box
sx={{
display: {xs: 'none', md: 'flex'},
gap: 0.5,
alignItems: 'center',
}}
>
<ToggleColorMode
data-screenshot="toggle-mode"
mode={mode}
toggleColorMode={toggleColorMode}
/>
{
!isAuthenticated ?
<NavLink to="/login">
<Button color="primary" variant="text" size="small">
Sign in
</Button>
</NavLink>
: <Link href="/logout">
<Button color="primary" variant="text" size="small">
Log out
</Button>
</Link>
}
</Box>
</Toolbar>
</Container>
</AppBar>
)
}

110
assets/components/DrawerBox.tsx
View File

@@ -1,110 +0,0 @@
import Toolbar from "@mui/material/Toolbar";
import IconButton from "@mui/material/IconButton";
import {Bookmark, ChevronLeft, Dns, Explore, LocalPolice, MenuBook, People} from "@mui/icons-material";
import {Divider, List, ListItemButton, ListItemIcon, ListItemText, ListSubheader, styled} from "@mui/material";
import React from "react";
import MuiDrawer from "@mui/material/Drawer";
import {useNavigate} from "react-router-dom";
const Drawer = styled(MuiDrawer, {shouldForwardProp: (prop) => prop !== 'open'})(
({theme, open}) => ({
'& .MuiDrawer-paper': {
position: 'relative',
whiteSpace: 'nowrap',
width: 240,
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
boxSizing: 'border-box',
...(!open && {
overflowX: 'hidden',
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
width: theme.spacing(7),
[theme.breakpoints.up('sm')]: {
width: theme.spacing(9),
},
}),
},
}),
)
export default function DrawerBox() {
const [open, setOpen] = React.useState(true);
const toggleDrawer = () => {
setOpen(!open);
};
const navigate = useNavigate()
return <Drawer variant="permanent" open={open}>
<Toolbar
sx={{
mt: 5,
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
px: [1],
}}
>
<IconButton onClick={toggleDrawer}>
<ChevronLeft/>
</IconButton>
</Toolbar>
<Divider/>
<List component="nav">
<ListSubheader component="div" inset>
Domain names
</ListSubheader>
<ListItemButton onClick={() => navigate('/finder/domain')}>
<ListItemIcon>
<Explore/>
</ListItemIcon>
<ListItemText primary="Domain finder"/>
</ListItemButton>
<ListItemButton onClick={() => navigate('/tld')}>
<ListItemIcon>
<LocalPolice/>
</ListItemIcon>
<ListItemText primary="Top Level Domain"/>
</ListItemButton>
<ListItemButton onClick={() => navigate('/finder/nameserver')}>
<ListItemIcon>
<Dns/>
</ListItemIcon>
<ListItemText primary="Nameserver"/>
</ListItemButton>
<Divider sx={{my: 1}}/>
<ListSubheader component="div" inset>
Entities
</ListSubheader>
<ListItemButton onClick={() => navigate('/finder/entity')}>
<ListItemIcon>
<People/>
</ListItemIcon>
<ListItemText primary="Entity finder"/>
</ListItemButton>
<ListItemButton onClick={() => navigate('/reverse')}>
<ListItemIcon>
<MenuBook/>
</ListItemIcon>
<ListItemText primary="Reverse directory"/>
</ListItemButton>
<Divider sx={{my: 1}}/>
<ListSubheader component="div" inset>
Tracking
</ListSubheader>
<ListItemButton onClick={() => navigate('/watchlist')}>
<ListItemIcon>
<Bookmark/>
</ListItemIcon>
<ListItemText primary="My watchlists"/>
</ListItemButton>
</List>
</Drawer>
}

75
assets/components/Footer.tsx
View File

@@ -1,75 +0,0 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import Container from '@mui/material/Container';
import IconButton from '@mui/material/IconButton';
import Link from '@mui/material/Link';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import {NavLink} from "react-router-dom";
function Copyright() {
return (
<Typography variant="body2" sx={{color: 'text.secondary', mt: 1}}>
{'Copyright © '}
<Link href="https://github.com/maelgangloff/domain-watchdog">Domain Watchdog&nbsp;</Link>
{new Date().getFullYear()}
</Typography>
);
}
export default function Footer() {
return (
<Container
sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: {xs: 4, sm: 8},
py: {xs: 8, sm: 10},
textAlign: {sm: 'center', md: 'left'},
}}
>
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
pt: {xs: 4, sm: 8},
width: '100%',
borderTop: '1px solid',
borderColor: 'divider',
}}
>
<div>
<NavLink to="/privacy">
<Link color="text.secondary" variant="body2">
Privacy Policy
</Link>
</NavLink>
<Typography sx={{display: 'inline', mx: 0.5, opacity: 0.5}}>
&nbsp;•&nbsp;
</Typography>
<NavLink to="/tos">
<Link color="text.secondary" variant="body2">
Terms of Service
</Link>
</NavLink>
<Copyright/>
</div>
<Stack
direction="row"
spacing={1}
useFlexGap
sx={{justifyContent: 'left', color: 'text.secondary'}}
>
<IconButton
color="inherit"
href="https://github.com/maelgangloff/domain-watchdog"
aria-label="GitHub"
sx={{alignSelf: 'center'}}
>
</IconButton>
</Stack>
</Box>
</Container>
);
}

74
assets/components/HeadTable.tsx
View File

@@ -1,74 +0,0 @@
import React from "react";
import {Paper, Table, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow} from "@mui/material";
interface Column {
id: string;
label: string;
minWidth?: number;
align?: 'right';
format?: (value: any) => any;
}
export default function HeadTable({columns, rows}: { rows: any[], columns: Column[] }) {
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(10);
const handleChangePage = (event: unknown, newPage: number) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
setRowsPerPage(+event.target.value);
setPage(0);
};
return (
<Paper sx={{width: '100%', overflow: 'hidden'}}>
<TableContainer>
<Table size="small">
<TableHead>
<TableRow>
{columns.map((column) => (
<TableCell
key={column.id}
align={column.align}
style={{minWidth: column.minWidth}}
>
{column.label}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{rows
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((row: any) => {
return (
<TableRow hover sx={{'&:last-child td, &:last-child th': {border: 0}}}
role="checkbox" tabIndex={-1} key={row.code}>
{columns.map((column) => {
const value = row[column.id as keyof typeof row]
return (
<TableCell key={column.id} align={column.align}>
{column.format ? column.format(value) : value}
</TableCell>
);
})}
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
<TablePagination
rowsPerPageOptions={[10, 25, 100]}
component="div"
count={rows.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
</Paper>
);
}

0
assets/components/Sider.tsx Normal file
View File

33
assets/components/ToggleColorMode.tsx
View File

@@ -1,33 +0,0 @@
import * as React from 'react';
import {PaletteMode} from '@mui/material';
import IconButton, {IconButtonProps} from '@mui/material/IconButton';
import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
interface ToggleColorModeProps extends IconButtonProps {
mode: PaletteMode;
toggleColorMode: () => void;
}
export default function ToggleColorMode({
mode,
toggleColorMode,
...props
}: ToggleColorModeProps) {
return (
<IconButton
onClick={toggleColorMode}
color="primary"
aria-label="Theme toggle button"
size="small"
{...props}
>
{mode === 'dark' ? (
<WbSunnyRoundedIcon fontSize="small"/>
) : (
<ModeNightRoundedIcon fontSize="small"/>
)}
</IconButton>
);
}