Skynet/misc_pterodactyl-panel
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

React 18 and Vite (#4510)

Browse source
This commit is contained in:
Matthew Penner 2022-11-25 13:25:03 -07:00 • committed by GitHub
parent 1bb1b13f6d
commit 21613fa602
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
244 changed files with 4547 additions and 8933 deletions
Download patch file Download diff file Expand all files Collapse all files

36
resources/scripts/components/elements/Button.tsx
View file

@ -1,5 +1,5 @@
import React from 'react';
import styled, { css } from 'styled-components/macro';
import * as React from 'react';
import styled, { css } from 'styled-components';
import tw from 'twin.macro';
import Spinner from '@/components/elements/Spinner';
@ -13,17 +13,17 @@ interface Props {
const ButtonStyle = styled.button<Omit<Props, 'isLoading'>>`
${tw`relative inline-block rounded p-2 uppercase tracking-wide text-sm transition-all duration-150 border`};
${(props) =>
${props =>
((!props.isSecondary && !props.color) || props.color === 'primary') &&
css<Props>`
${(props) => !props.isSecondary && tw`bg-primary-500 border-primary-600 border text-primary-50`};
${props => !props.isSecondary && tw`bg-primary-500 border-primary-600 border text-primary-50`};
&:hover:not(:disabled) {
${tw`bg-primary-600 border-primary-700`};
}
`};
${(props) =>
${props =>
props.color === 'grey' &&
css`
${tw`border-neutral-600 bg-neutral-500 text-neutral-50`};
@ -33,7 +33,7 @@ const ButtonStyle = styled.button<Omit<Props, 'isLoading'>>`
}
`};
${(props) =>
${props =>
props.color === 'green' &&
css<Props>`
${tw`border-green-600 bg-green-500 text-green-50`};
@ -42,7 +42,7 @@ const ButtonStyle = styled.button<Omit<Props, 'isLoading'>>`
${tw`bg-green-600 border-green-700`};
}
${(props) =>
${props =>
props.isSecondary &&
css`
&:active:not(:disabled) {
@ -51,7 +51,7 @@ const ButtonStyle = styled.button<Omit<Props, 'isLoading'>>`
`};
`};
${(props) =>
${props =>
props.color === 'red' &&
css<Props>`
${tw`border-red-600 bg-red-500 text-red-50`};
@ -60,7 +60,7 @@ const ButtonStyle = styled.button<Omit<Props, 'isLoading'>>`
${tw`bg-red-600 border-red-700`};
}
${(props) =>
${props =>
props.isSecondary &&
css`
&:active:not(:disabled) {
@ -69,21 +69,21 @@ const ButtonStyle = styled.button<Omit<Props, 'isLoading'>>`
`};
`};
${(props) => props.size === 'xsmall' && tw`px-2 py-1 text-xs`};
${(props) => (!props.size || props.size === 'small') && tw`px-4 py-2`};
${(props) => props.size === 'large' && tw`p-4 text-sm`};
${(props) => props.size === 'xlarge' && tw`p-4 w-full`};
${props => props.size === 'xsmall' && tw`px-2 py-1 text-xs`};
${props => (!props.size || props.size === 'small') && tw`px-4 py-2`};
${props => props.size === 'large' && tw`p-4 text-sm`};
${props => props.size === 'xlarge' && tw`p-4 w-full`};
${(props) =>
${props =>
props.isSecondary &&
css<Props>`
${tw`border-neutral-600 bg-transparent text-neutral-200`};
&:hover:not(:disabled) {
${tw`border-neutral-500 text-neutral-100`};
${(props) => props.color === 'red' && tw`bg-red-500 border-red-600 text-red-50`};
${(props) => props.color === 'primary' && tw`bg-primary-500 border-primary-600 text-primary-50`};
${(props) => props.color === 'green' && tw`bg-green-500 border-green-600 text-green-50`};
${props => props.color === 'red' && tw`bg-red-500 border-red-600 text-red-50`};
${props => props.color === 'primary' && tw`bg-primary-500 border-primary-600 text-primary-50`};
${props => props.color === 'green' && tw`bg-green-500 border-green-600 text-green-50`};
}
`};
@ -108,7 +108,7 @@ const Button: React.FC<ComponentProps> = ({ children, isLoading, ...props }) =>
type LinkProps = Omit<JSX.IntrinsicElements['a'], 'ref' | keyof Props> & Props;
const LinkButton: React.FC<LinkProps> = (props) => <ButtonStyle as={'a'} {...props} />;
const LinkButton: React.FC<LinkProps> = props => <ButtonStyle as={'a'} {...props} />;
export { LinkButton, ButtonStyle };
export default Button;