forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-04-11 00:56:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate ErrorHandler component to tailwind

Browse Source
This commit is contained in:
Alejandro Celaya
2025-04-01 11:30:15 +02:00
parent ad00e54df8
commit c462bc30e1
3 changed files with 32 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/common/ErrorHandler.tsx
View File

@@ -1,7 +1,7 @@
import { SimpleCard } from '@shlinkio/shlink-frontend-kit'; import { Button } from '@shlinkio/shlink-frontend-kit/tailwind';
import type { PropsWithChildren, ReactNode } from 'react'; import type { PropsWithChildren, ReactNode } from 'react';
import { Component } from 'react'; import { Component } from 'react';
import { Button } from 'reactstrap'; import { ErrorLayout } from './ErrorLayout';
type ErrorHandlerProps = PropsWithChildren<{ type ErrorHandlerProps = PropsWithChildren<{
location?: typeof window.location; location?: typeof window.location;
@@ -33,14 +33,11 @@ export class ErrorHandler extends Component<ErrorHandlerProps, ErrorHandlerState
if (hasError) { if (hasError) {
return ( return (
<div className="home"> <ErrorLayout title="Oops! This is awkward :S">
<SimpleCard className="p-4"> <p>It seems that something went wrong. Try refreshing the page or just click this button.</p>
<h1>Oops! This is awkward :S</h1> <br />
<p>It seems that something went wrong. Try refreshing the page or just click this button.</p> <Button size="lg" onClick={() => location.reload()}>Take me back</Button>
<br /> </ErrorLayout>
<Button outline color="primary" onClick={() => location.reload()}>Take me back</Button>
</SimpleCard>
</div>
); );
} }

15
src/common/ErrorLayout.tsx Normal file
View File

@@ -0,0 +1,15 @@
import { SimpleCard } from '@shlinkio/shlink-frontend-kit/tailwind';
import type { FC, PropsWithChildren } from 'react';
export type ErrorLayoutProps = PropsWithChildren<{
title: string;
}>;
export const ErrorLayout: FC<ErrorLayoutProps> = ({ children, title }) => (
<div className="tw:pt-4">
<SimpleCard className="tw:p-4 tw:w-full tw:lg:w-[65%] tw:m-auto">
<h2>{title}</h2>
{children}
</SimpleCard>
</div>
);

22
src/common/NotFound.tsx
View File

@@ -1,18 +1,16 @@
import { Button, SimpleCard } from '@shlinkio/shlink-frontend-kit/tailwind'; import { Button } from '@shlinkio/shlink-frontend-kit/tailwind';
import type { FC, PropsWithChildren } from 'react'; import type { FC, PropsWithChildren } from 'react';
import { ErrorLayout } from './ErrorLayout';
type NotFoundProps = PropsWithChildren<{ to?: string }>; type NotFoundProps = PropsWithChildren<{ to?: string }>;
export const NotFound: FC<NotFoundProps> = ({ to = '/', children = 'Home' }) => ( export const NotFound: FC<NotFoundProps> = ({ to = '/', children = 'Home' }) => (
<div className="tw:pt-4"> <ErrorLayout title="Oops! We could not find requested route.">
<SimpleCard className="tw:p-4 tw:w-full tw:lg:w-[50%] tw:m-auto"> <p>
<h2>Oops! We could not find requested route.</h2> Use your browser&apos;s back button to navigate to the page you have previously come from, or just press this
<p> button.
Use your browser&apos;s back button to navigate to the page you have previously come from, or just press this </p>
button. <br />
</p> <Button inline to={to} size="lg">{children}</Button>
<br /> </ErrorLayout>
<Button inline to={to} size="lg">{children}</Button>
</SimpleCard>
</div>
); );