Install ChakraUI and begin to use it for styling

Time will tell if this is a good choice! Removes tailwindcss since that seems like it may conflict.
tdooner · Jul 3, 2024 · 1a2078b · 1a2078b
1 parent 150db66
commit 1a2078b
Show file tree

Hide file tree

Showing 9 changed files with 2,076 additions and 541 deletions.
diff --git a/app/fonts.tsx b/app/fonts.tsx
@@ -0,0 +1,10 @@
+import { Rubik } from 'next/font/google'
+
+const rubik = Rubik({
+  subsets: ['latin'],
+  variable: '--font-rubik',
+})
+
+export const fonts = {
+  rubik,
+}
diff --git a/app/globals.css b/app/globals.css
@@ -1,31 +1,3 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
 .system__interval {
   position: relative;
 }
@@ -37,9 +9,3 @@ body {
   top: 0px;
   width: 5px;
 }
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,8 +1,7 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
 import "./globals.css";
-
-const inter = Inter({ subsets: ["latin"] });
+import { fonts } from "./fonts";
+import { Providers } from "./providers";
 
 export const metadata: Metadata = {
   title: "Create Next App",
@@ -15,8 +14,12 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
+    <html lang="en" className={fonts.rubik.variable}>
+      <body>
+        <Providers>
+          {children}
+        </Providers>
+      </body>
     </html>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -4,6 +4,7 @@ import { ReactNode } from "react";
 import { GetObjectCommand, S3Client } from '@aws-sdk/client-s3'
 import { fromEnv } from "@aws-sdk/credential-providers";
 import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
+import { Card, CardBody, CardHeader, Center, Heading, SimpleGrid } from "@chakra-ui/react";
 
 const prisma = new PrismaClient({ log: [{ emit: 'stdout', level: 'query' }] });
 const s3 = new S3Client({ region: "us-west-2", credentials: fromEnv() })
@@ -178,15 +179,28 @@ export default async function Home() {
 
   return (
     <main>
-      {systems.map(system => {
-        const intervals = uptimeBySystem[system.id].intervals
-        const screenshots = screenshotsBySystem[system.id] || []
-
-        return <div key={system.id}>
-          <div>{system.jurisdiction} {system.name}</div>
-          <div>{renderIntervals(intervals, screenshots)}</div>
-        </div>
-      })}
+      <Center>
+        <Heading>Can I Apply?</Heading>
+      </Center>
+
+      <SimpleGrid columns={[1, 2, 4]} spacing={10}>
+        {systems.map(system => {
+          const intervals = uptimeBySystem[system.id].intervals
+          const screenshots = screenshotsBySystem[system.id] || []
+
+          return (
+            <Card key={system.id}>
+              <CardHeader>
+                {system.jurisdiction} {system.name}
+              </CardHeader>
+
+              <CardBody>
+                <div>{renderIntervals(intervals, screenshots)}</div>
+              </CardBody>
+            </Card>
+          )
+        })}
+      </SimpleGrid>
     </main>
   );
 }

diff --git a/app/providers.tsx b/app/providers.tsx
@@ -0,0 +1,11 @@
+'use client'
+
+import { ChakraProvider } from '@chakra-ui/react'
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <ChakraProvider>
+      {children}
+    </ChakraProvider>
+  )
+}