StarMC/Astral-nook
StarMC/Astral-nook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Use new two-step configuration modal

Browse source
This commit is contained in:
DaneEveritt 2022-07-02 18:53:03 -04:00
parent 870a964050
commit 822949408f
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
7 changed files with 219 additions and 182 deletions
Download patch file Download diff file Expand all files Collapse all files

14
resources/scripts/components/elements/CopyOnClick.tsx
View file

@ -4,7 +4,13 @@ import Portal from '@/components/elements/Portal';
import copy from 'copy-to-clipboard';
import classNames from 'classnames';
const CopyOnClick: React.FC<{ text: string | number | null | undefined }> = ({ text, children }) => {
interface CopyOnClickProps {
text: string | number | null | undefined;
showInNotification?: boolean;
children: React.ReactNode;
}
const CopyOnClick = ({ text, showInNotification = true, children }: CopyOnClickProps) => {
const [copied, setCopied] = useState(false);
useEffect(() => {
@ -43,7 +49,11 @@ const CopyOnClick: React.FC<{ text: string | number | null | undefined }> = ({ t
<Fade in appear timeout={250} key={copied ? 'visible' : 'invisible'}>
<div className={'fixed z-50 bottom-0 right-0 m-4'}>
<div className={'rounded-md py-3 px-4 text-gray-200 bg-neutral-600/95 shadow'}>
<p>Copied &quot;{text}&quot; to clipboard.</p>
<p>
{showInNotification
? `Copied "${String(text)}" to clipboard.`
: 'Copied text to clipboard.'}
</p>
</div>
</div>
</Fade>

18
resources/scripts/components/elements/alert/Alert.tsx
View file

@ -1,22 +1,30 @@
import { ExclamationIcon } from '@heroicons/react/outline';
import { ExclamationIcon, ShieldExclamationIcon } from '@heroicons/react/outline';
import React from 'react';
import classNames from 'classnames';
interface AlertProps {
type: 'warning';
type: 'warning' | 'danger';
className?: string;
children: React.ReactNode;
}
export default ({ className, children }: AlertProps) => {
export default ({ type, className, children }: AlertProps) => {
return (
<div
className={classNames(
'flex items-center border-l-8 border-yellow-500 text-gray-50 bg-yellow-500/25 rounded-md shadow px-4 py-3',
'flex items-center border-l-8 text-gray-50 rounded-md shadow px-4 py-3',
{
['border-red-500 bg-red-500/25']: type === 'danger',
['border-yellow-500 bg-yellow-500/25']: type === 'warning',
},
className
)}
>
<ExclamationIcon className={'w-6 h-6 text-yellow-500 mr-2'} />
{type === 'danger' ? (
<ShieldExclamationIcon className={'w-6 h-6 text-red-400 mr-2'} />
) : (
<ExclamationIcon className={'w-6 h-6 text-yellow-500 mr-2'} />
)}
{children}
</div>
);