rpserver.tsx

import {
  Button,
  Container,
  Heading,
  Input,
  Link,
  Text,
  Textarea,
} from "@chakra-ui/react";
import { useLoaderData } from "@remix-run/react";

export function meta() {
  return [
    {
      title: "RP Server List Application",
    },
  ];
}

export async function loader({ context }: { context: RequestContext }) {
  if (!context.data.current_user)
    throw new Response(null, {
      status: 401,
    });

  return null;
}

export default function () {
  useLoaderData<typeof loader>();

  return (
    <Container maxW="container.md" pt="4vh" textAlign="start">
      <Heading size="xl">RP Server List Application</Heading>
      <br />
      <br />
      <Text>
        In order to apply, your server will be reviewed and must meet our
        standards. This means:
        <br />
        <ul>
          <li>Racism and/or discrimination is not tolerated</li>
          <li>No adult content</li>
          <li>
            The server must otherwise be compliant with Discord's Terms of
            Service
          </li>
          <li>The server must have a minimum of 30 members</li>
          <li>
            The server must be active, we do not directly disclose our criteria
            for what we consider to be active
          </li>
        </ul>
        <br />
        As the owner of your server, you are expected to maintain a good image
        within our server. This means:
        <br />
        <ul>
          <li>You must own the server you are applying for</li>
          <li>
            You must have a clean (meaning, no punishments within the last 90
            days [automutes generally don't count]) moderation history in our
            server
          </li>
          <li>
            You agree to notify us before making any major rule or general
            server changes
          </li>
          <li>You must have 2FA enabled on your Discord account</li>
          <li>You must follow Discord's Terms of Service</li>
        </ul>
        <br />
        We expect a somewhat decent application. Give us enough writing for us
        to understand your server, but don't give us a wall of text. Anyone
        submitting a wall of text for their application should expect their
        application to be thrown in the trash and not responded to, so please
        don't give us a calculus textbook.
      </Text>
      <br />
      <br />
      <Text fontSize="md">What is your Roblox username?</Text>
      <br />
      <Input maxLength={20} placeholder="builderman" />
      <br />
      <br />
      <Text fontSize="md">What is your Discord username?</Text>
      <br />
      <Input maxLength={32} placeholder="clyde" />
      <br />
      <br />
      <Text fontSize="md">What is your Discord user ID?</Text>
      <br />
      <Input maxLength={19} placeholder="1234567890987654321" />
      <br />
      <br />
      <Text fontSize="md">Introduce yourself to us!</Text>
      <br />
      <Textarea
        maxLength={1000}
        placeholder="Introduce yourself to us, we want to know who we will be working with."
      />
      <br />
      <br />
      <Text fontSize="md">Permanent invite link to your server</Text>
      <br />
      <Input maxLength={30} placeholder="https://discord.gg/abcdef123456" />
      <br />
      <br />
      <Text fontSize="md">How many members does your server have?</Text>
      <br />
      <Input maxLength={10} placeholder="123" />
      <br />
      <br />
      <Text fontSize="md">What is the RP/server about?</Text>
      <br />
      <Textarea
        maxLength={1000}
        placeholder="Please explain what you are doing in detail"
        rows={5}
      />
      <br />
      <br />
      <Text fontSize="md">Any comments or extra information?</Text>
      <br />
      <Textarea
        maxLength={1000}
        rows={5}
        placeholder="Any extras here, not required"
      />
      <br />
      <br />
      <Text>
        By submitting this application, you agree to the{" "}
        <Link color="#646cff" href="/terms">
          Terms of Service
        </Link>{" "}
        and
        <Link color="#646cff" href="/privacy">
          Privacy Policy
        </Link>
      </Text>
      <br />
      <br />
      <Button colorScheme="blue" loadingText="Submitting">
        Submit
      </Button>
    </Container>
  );
}