cphipps/jellyseerr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: PWA Support (#1488)

Browse Source
This commit is contained in:
sct
2021-04-25 20:44:12 +09:00
committed by GitHub
parent e6e5ad221a
commit 28830d4ef8
88 changed files with 2022 additions and 650 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/components/Toast/index.tsx
View File

@@ -7,41 +7,57 @@ import {
import { XIcon } from '@heroicons/react/solid';
import React from 'react';
import type { ToastProps } from 'react-toast-notifications';
import Transition from '../Transition';
const Toast: React.FC<ToastProps> = ({ appearance, children, onDismiss }) => {
const Toast: React.FC<ToastProps> = ({
appearance,
children,
onDismiss,
transitionState,
}) => {
return (
<div className="flex items-end justify-center px-2 py-2 pointer-events-none toast sm:items-start sm:justify-end">
<div className="w-full max-w-sm bg-gray-700 rounded-lg shadow-lg pointer-events-auto">
<div className="overflow-hidden rounded-lg ring-1 ring-black ring-opacity-5">
<div className="p-4">
<div className="flex items-start">
<div className="flex-shrink-0">
{appearance === 'success' && (
<CheckCircleIcon className="w-6 h-6 text-green-400" />
)}
{appearance === 'error' && (
<ExclamationCircleIcon className="w-6 h-6 text-red-500" />
)}
{appearance === 'info' && (
<InformationCircleIcon className="w-6 h-6 text-indigo-500" />
)}
{appearance === 'warning' && (
<ExclamationIcon className="w-6 h-6 text-orange-400" />
)}
</div>
<div className="flex-1 w-0 ml-3 text-white">{children}</div>
<div className="flex flex-shrink-0 ml-4">
<button
onClick={() => onDismiss()}
className="inline-flex text-gray-400 transition duration-150 ease-in-out focus:outline-none focus:text-gray-500"
>
<XIcon className="w-5 h-5" />
</button>
<Transition
show={transitionState === 'entered'}
enter="transition duration-300 transform-gpu"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="transition duration-150 transform-gpu"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-90"
>
<div className="w-full max-w-sm bg-gray-800 rounded-lg shadow-lg pointer-events-auto ring-1 ring-gray-500">
<div className="overflow-hidden rounded-lg ring-1 ring-black ring-opacity-5">
<div className="p-4">
<div className="flex items-start">
<div className="flex-shrink-0">
{appearance === 'success' && (
<CheckCircleIcon className="w-6 h-6 text-green-400" />
)}
{appearance === 'error' && (
<ExclamationCircleIcon className="w-6 h-6 text-red-500" />
)}
{appearance === 'info' && (
<InformationCircleIcon className="w-6 h-6 text-indigo-500" />
)}
{appearance === 'warning' && (
<ExclamationIcon className="w-6 h-6 text-orange-400" />
)}
</div>
<div className="flex-1 w-0 ml-3 text-white">{children}</div>
<div className="flex flex-shrink-0 ml-4">
<button
onClick={() => onDismiss()}
className="inline-flex text-gray-400 transition duration-150 ease-in-out focus:outline-none focus:text-gray-500"
>
<XIcon className="w-5 h-5" />
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</Transition>
</div>
);
};