Fix Shlink versions alignment in server error pages

This commit is contained in:
Alejandro Celaya
2024-04-11 09:19:32 +02:00
parent b9fb398d3b
commit 734ff22499
3 changed files with 27 additions and 38 deletions

View File

@@ -1,7 +1,6 @@
import { clsx } from 'clsx';
import { useMemo } from 'react';
import { useLocation } from 'react-router-dom';
import type { SelectedServer } from '../servers/data';
import { isReachableServer } from '../servers/data';
import { ShlinkVersions } from './ShlinkVersions';
import './ShlinkVersionsContainer.scss';
@@ -9,19 +8,12 @@ export type ShlinkVersionsContainerProps = {
selectedServer: SelectedServer;
};
const SHLINK_CONTAINER_PATH_PATTERN = /^\/server\/[a-zA-Z0-9-]*\/(?!edit)/;
export const ShlinkVersionsContainer = ({ selectedServer }: ShlinkVersionsContainerProps) => {
const { pathname } = useLocation();
const withPadding = useMemo(() => SHLINK_CONTAINER_PATH_PATTERN.test(pathname), [pathname]);
const classes = clsx('text-center', {
'shlink-versions-container--with-sidebar': withPadding,
});
return (
<div className={classes}>
<ShlinkVersions selectedServer={selectedServer} />
</div>
);
};
export const ShlinkVersionsContainer = ({ selectedServer }: ShlinkVersionsContainerProps) => (
<div
className={clsx('text-center', {
'shlink-versions-container--with-sidebar': isReachableServer(selectedServer),
})}
>
<ShlinkVersions selectedServer={selectedServer} />
</div>
);