Kind of get account stuff working; IDE is throwing a fit right now

resources/scripts/components/elements/Button.tsx

@@ -1,20 +1,97 @@
 import React from 'react';
-import classNames from 'classnames';
+import styled, { css } from 'styled-components/macro';
+import tw from 'twin.macro';
 
-type Props = { isLoading?: boolean } & React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+interface Props {
+    isLoading?: boolean;
+    size?: 'xsmall' | 'small' | 'large' | 'xlarge';
+    color?: 'green' | 'red' | 'primary' | 'grey';
+    isSecondary?: boolean;
+    disabled?: boolean;
+}
 
-export default ({ isLoading, children, className, ...props }: Props) => (
-    <button
-        {...props}
-        className={classNames('btn btn-sm relative', className)}
-    >
+const StyledButton = styled.button<Props>`
+    ${tw`rounded p-2 uppercase tracking-wide text-sm transition-all duration-150`};
+    
+        ${props => props.isSecondary && css<Props>`
+        ${tw`border 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 === 'green' && tw`bg-green-500 border-green-600 text-green-50`};
+        }
+    `};
+    
+    ${props => (!props.color || props.color === 'primary') && css<Props>`
+        ${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.color === 'grey' && css`
+        ${tw`border border-neutral-600 bg-neutral-500 text-neutral-50`};
+        
+        &:hover:not(:disabled) {
+            ${tw`bg-neutral-600 border-neutral-700`};
+        }
+    `};
+    
+    ${props => props.color === 'green' && css<Props>`
+        ${tw`border border-green-600 bg-green-500 text-green-50`};
+        
+        &:hover:not(:disabled) {
+            ${tw`bg-green-600 border-green-700`};
+        }
+        
+        ${props => props.isSecondary && css`
+            &:active:not(:disabled) {
+                ${tw`bg-green-600 border-green-700`};
+            }
+        `};
+    `};
+    
+    ${props => props.color === 'red' && css<Props>`
+        ${tw`border border-red-600 bg-red-500 text-red-50`};
+        
+        &:hover:not(:disabled) {
+            ${tw`bg-red-600 border-red-700`};
+        }
+        
+        ${props => props.isSecondary && css`
+            &:active:not(:disabled) {
+                ${tw`bg-red-600 border-red-700`};
+            }
+        `};
+    `};
+    
+    ${props => props.size === 'xsmall' && tw`p-2 text-xs`};
+    ${props => (!props.size || props.size === 'small') && tw`p-3`};
+    ${props => props.size === 'large' && tw`p-4 text-sm`};
+    ${props => props.size === 'xlarge' && tw`p-4 w-full`};
+    
+    &:disabled { opacity: 0.55; cursor: default }
+    
+    ${props => props.disabled && css`opacity: 0.55; cursor: default`};
+
+`;
+
+type ComponentProps = Props &
+    Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof Props>;
+
+const Button: React.FC<ComponentProps> = ({ children, isLoading, ...props }) => (
+    <StyledButton {...props}>
         {isLoading &&
-        <div className={'w-full flex absolute justify-center'} style={{ marginLeft: '-0.75rem' }}>
+        <div css={tw`w-full flex absolute justify-center`} style={{ marginLeft: '-0.75rem' }}>
             <div className={'spinner-circle spinner-white spinner-sm'}/>
         </div>
         }
-        <span className={isLoading ? 'text-transparent' : undefined}>
+        <span css={isLoading && tw`text-transparent`}>
             {children}
         </span>
-    </button>
+    </StyledButton>
 );
+
+export default Button;