Add skeleton pages for user dashboard routes

app/components/header.tsx

@@ -0,0 +1,11 @@
+import { Text, Center } from '@chakra-ui/react';
+
+export default function Header() {
+ return (
+ <header>
+ <Center>
+ <Text fontSize="2xl">Hi! I am the header</Text>
+ </Center>
+ </header>
+ );
+}

app/routes/__index.tsx

@@ -0,0 +1,14 @@
+import { Box } from '@chakra-ui/react';
+import { Outlet } from '@remix-run/react';
+import Header from '~/components/header';
+
+export default function Index() {
+ return (
+ <Box>
+ <Header />
+ <main>
+ <Outlet />
+ </main>
+ </Box>
+ );
+}

app/routes/__index/certificate/index.tsx

@@ -0,0 +1,11 @@
+import { Heading } from '@chakra-ui/react';
+
+export default function CertificateIndexRoute() {
+ return (
+ <div>
+ <Heading as="h1" size="3xl">
+ Certificate Info or option to request a certificate
+ </Heading>
+ </div>
+ );
+}

app/routes/__index/certificate/instructions.tsx

@@ -0,0 +1,21 @@
+import { Heading, Text, Link } from '@chakra-ui/react';
+
+export default function CertificateInstructionsRoute() {
+ return (
+ <div>
+ <Heading as="h1" size="3xl">
+ Certificate Instructions Page
+ </Heading>
+ <Text fontSize="2xl">
+ For information about this page, click{' '}
+ <Link
+ href="https:/Seneca-CDOT/starchart/issues/114"
+ isExternal={true}
+ color="blue.500"
+ >
+ here
+ </Link>
+ </Text>
+ </div>
+ );
+}

app/routes/__index/domains/$domainId.tsx

@@ -0,0 +1,11 @@
+import { Heading } from '@chakra-ui/react';
+
+export default function DomainRoute() {
+ return (
+ <div>
+ <Heading as="h1" size="3xl">
+ Domain Edit Page
+ </Heading>
+ </div>
+ );
+}

app/routes/__index/domains/index.tsx

@@ -0,0 +1,11 @@
+import { Heading } from '@chakra-ui/react';
+
+export default function DomainsIndexRoute() {
+ return (
+ <div>
+ <Heading as="h1" size="3xl">
+ Domains List
+ </Heading>
+ </div>
+ );
+}

app/routes/__index/domains/new.tsx

@@ -0,0 +1,11 @@
+import { Heading } from '@chakra-ui/react';
+
+export default function NewDomainRoute() {
+ return (
+ <div>
+ <Heading as="h1" size="3xl">
+ New Domain Form
+ </Heading>
+ </div>
+ );
+}

app/routes/index.tsx → app/routes/__index/index.tsx

@@ -11,11 +11,11 @@ export const loader = async ({ request }: LoaderArgs) => {
  return json({ username });
 };
 
-export default function Index() {
+export default function IndexRoute() {
  const data = useLoaderData<typeof loader>();
 
  return (
- <main>
+ <div>
  <Heading as="h1" size="3xl" noOfLines={1}>
  Starchart
  </Heading>
@@ -24,6 +24,6 @@ export default function Index() {
  <Form action="/logout" method="post">
  <Button type="submit">Logout</Button>
  </Form>
- </main>
+ </div>
  );
 }