Change website layout (#18)

* Add basic experiments page

* Isolate experiment components

* Fix grid on small screens

* Change nav bar

* Add padding to logo

* Fix linking

* Remove right margin on ExperimentCard flask

* Change favicon

* Use humanize in formatTimePast

* Add TODO

src/pages/experiments/[id].tsx

@@ -15,6 +15,7 @@ import {
   AlertDialogContent,
   AlertDialogOverlay,
   useDisclosure,
+  BreadcrumbLink,
 } from "@chakra-ui/react";
 
 import { useRouter } from "next/router";
@@ -120,9 +121,11 @@ export default function Experiment() {
         <HStack px={4} py={2}>
           <Breadcrumb flex={1}>
             <BreadcrumbItem>
-              <Flex alignItems="center">
-                <Icon as={RiFlaskLine} boxSize={4} mr={2} /> Experiments
-              </Flex>
+              <BreadcrumbLink href="/experiments">
+                <Flex alignItems="center">
+                  <Icon as={RiFlaskLine} boxSize={4} mr={2} /> Experiments
+                </Flex>
+              </BreadcrumbLink>
             </BreadcrumbItem>
             <BreadcrumbItem isCurrentPage>
               <Input

src/pages/experiments/index.tsx

@@ -0,0 +1,40 @@
+import {
+  SimpleGrid,
+  HStack,
+  Icon,
+  VStack,
+  Breadcrumb,
+  BreadcrumbItem,
+  Flex,
+} from "@chakra-ui/react";
+import { RiFlaskLine } from "react-icons/ri";
+import AppShell from "~/components/nav/AppShell";
+import { api } from "~/utils/api";
+import { NewExperimentButton } from "~/components/experiments/NewExperimentButton";
+import { ExperimentCard } from "~/components/experiments/ExperimentCard";
+
+export default function ExperimentsPage() {
+  const experiments = api.experiments.list.useQuery();
+
+  return (
+    <AppShell>
+      <VStack alignItems={"flex-start"} m={4}>
+        <HStack w="full" justifyContent="space-between" mb={4}>
+          <Breadcrumb flex={1}>
+            <BreadcrumbItem>
+              <Flex alignItems="center">
+                <Icon as={RiFlaskLine} boxSize={4} mr={2} /> Experiments
+              </Flex>
+            </BreadcrumbItem>
+          </Breadcrumb>
+          <NewExperimentButton mr={4} borderRadius={8} />
+        </HStack>
+        <SimpleGrid w="full" columns={{ sm: 1, md: 2, lg: 3, xl: 4 }} spacing={8} p="4">
+          {experiments?.data?.map((exp) => (
+            <ExperimentCard key={exp.id} exp={exp} />
+          ))}
+        </SimpleGrid>
+      </VStack>
+    </AppShell>
+  );
+}

src/pages/index.tsx

@@ -1,12 +1,15 @@
-import { Center } from "@chakra-ui/react";
-import AppShell from "~/components/nav/AppShell";
+import { type GetServerSideProps } from 'next';
+
+// eslint-disable-next-line @typescript-eslint/require-await
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  return {
+    redirect: {
+      destination: '/experiments',
+      permanent: false,
+    },
+  }
+}
 
 export default function Home() {
-  return (
-    <AppShell>
-      <Center h="100%">
-        <div>Select an experiment from the sidebar to get started!</div>
-      </Center>
-    </AppShell>
-  );
+  return null;
 }