85 lines
2.4 KiB
TypeScript
85 lines
2.4 KiB
TypeScript
import React, { forwardRef } from 'react';
|
|
import { Form } from 'formik';
|
|
import styled from 'styled-components/macro';
|
|
import { breakpoint } from '@/theme';
|
|
import FlashMessageRender from '@/components/FlashMessageRender';
|
|
import tw from 'twin.macro';
|
|
|
|
const Wrapper = styled.div`
|
|
${breakpoint('sm')`
|
|
${tw`w-4/5 mx-auto`}
|
|
`};
|
|
|
|
${breakpoint('md')`
|
|
${tw`p-10`}
|
|
`};
|
|
|
|
${breakpoint('lg')`
|
|
${tw`w-3/5`}
|
|
`};
|
|
|
|
${breakpoint('xl')`
|
|
${tw`w-full`}
|
|
max-width: 700px;
|
|
`};
|
|
`;
|
|
|
|
const Inner = ({ children }: { children: React.ReactNode }) => (
|
|
<div css={tw`md:flex w-full bg-white shadow-lg rounded-lg p-6 md:pl-0 mx-1`}>
|
|
<div css={tw`flex-none select-none mb-6 md:mb-0 self-center`}>
|
|
<img src={'/assets/svgs/pterodactyl.svg'} css={tw`block w-48 md:w-64 mx-auto`}/>
|
|
</div>
|
|
<div css={tw`flex-1`}>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const Container = ({ title, children }: { title?: string, children: React.ReactNode }) => (
|
|
<Wrapper>
|
|
{title &&
|
|
<h2 css={tw`text-3xl text-center text-neutral-100 font-medium py-4`}>
|
|
{title}
|
|
</h2>
|
|
}
|
|
<FlashMessageRender css={tw`mb-2 px-1`}/>
|
|
{children}
|
|
<p css={tw`text-center text-neutral-500 text-xs mt-4`}>
|
|
© 2015 - {(new Date()).getFullYear()}
|
|
<a
|
|
rel={'noopener nofollow noreferrer'}
|
|
href={'https://pterodactyl.io'}
|
|
target={'_blank'}
|
|
css={tw`no-underline text-neutral-500 hover:text-neutral-300`}
|
|
>
|
|
Pterodactyl Software
|
|
</a>
|
|
</p>
|
|
</Wrapper>
|
|
);
|
|
|
|
type FormContainerProps = React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement> & {
|
|
title?: string;
|
|
}
|
|
|
|
const FormContainer = forwardRef<HTMLFormElement, FormContainerProps>(({ title, ...props }, ref) => (
|
|
<Container title={title}>
|
|
<Form {...props} ref={ref}>
|
|
<Inner>{props.children}</Inner>
|
|
</Form>
|
|
</Container>
|
|
));
|
|
|
|
type DivContainerProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
|
|
title?: string;
|
|
}
|
|
|
|
export const DivContainer = ({ title, ...props }: DivContainerProps) => (
|
|
<Container title={title}>
|
|
<div {...props}>
|
|
<Inner>{props.children}</Inner>
|
|
</div>
|
|
</Container>
|
|
);
|
|
|
|
export default FormContainer;
|