chore(sandbox): minor changes

rhinobase · Mar 23, 2024 · f4803e0 · f4803e0
1 parent 96f6090
commit f4803e0
Show file tree

Hide file tree

Showing 8 changed files with 253 additions and 154 deletions.
diff --git a/apps/sandbox/.env b/apps/sandbox/.env
diff --git a/apps/sandbox/api/Card.tsx b/apps/sandbox/api/Card.tsx
@@ -1,54 +1,52 @@
-import { css } from "hono/css";
-import type { FC } from "hono/jsx";
-
-const cardLayout = css`
-  padding: 1rem;
-  border-radius: 0.5rem;
-  border: 1px solid transparent;
-  text-align: center;
-  &:hover {
-    border: 1px solid rgb(209 213 219);
-    background-color: rgb(243 244 246);
-    transition: all;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  }
-  @media (prefers-color-scheme: dark) {
-    &:hover {
-      background-color: rgba(38, 38, 38, 0.3);
-      border: 1px solid rgb(38 38 38);
-    }
-  }
-  @media screen and (min-width: 1024px) {
-    text-align: left;
-  }
-`;
-
-const labelClass = css`
-  font-size: 24px;
-  font-weight: 600;
-  margin-bottom: 0.75rem;
-  @media (prefers-color-scheme: dark) {
-    color: white;
-  }
-`;
-
-const valueClass = css`
-  font-size: 14px;
-  opacity: 0.5;
-  @media (prefers-color-scheme: dark) {
-    color: white;
-  }
-`;
-
-export type Card = { label: string; value?: string | number };
-
-const Card: FC<Card> = ({ label, value }: Card) => {
-  return (
-    <div class={cardLayout}>
-      <div class={labelClass}>{label}</div>
-      <div class={valueClass}>{value}</div>
-    </div>
-  );
-};
-
-export default Card;
+import { css } from "hono/css";
+import type { FC } from "hono/jsx";
+
+const cardLayout = css`
+  padding: 1rem;
+  border-radius: 0.5rem;
+  border: 1px solid transparent;
+  text-align: center;
+  &:hover {
+    border: 1px solid rgb(209 213 219);
+    background-color: rgb(243 244 246);
+    transition: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  @media (prefers-color-scheme: dark) {
+    &:hover {
+      background-color: rgba(38, 38, 38, 0.3);
+      border: 1px solid rgb(38 38 38);
+    }
+  }
+  @media screen and (min-width: 1024px) {
+    text-align: left;
+  }
+`;
+
+const labelClass = css`
+  font-size: 24px;
+  font-weight: 600;
+  margin-bottom: 0.75rem;
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
+`;
+
+const valueClass = css`
+  font-size: 14px;
+  opacity: 0.5;
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
+`;
+
+export type Card = { label: string; value?: string | number };
+
+export const Card: FC<Card> = ({ label, value }: Card) => {
+  return (
+    <div class={cardLayout}>
+      <div class={labelClass}>{label}</div>
+      <div class={valueClass}>{value}</div>
+    </div>
+  );
+};
diff --git a/apps/sandbox/api/Layout.tsx b/apps/sandbox/api/Layout.tsx
@@ -1,54 +1,52 @@
-import { Style, css } from "hono/css";
-import type { FC, PropsWithChildren } from "hono/jsx";
-
-const globalClasses = css`
-  font-family: "Inter", sans-serif;
-  font-optical-sizing: auto;
-  font-weight: 400;
-  font-style: normal;
-  font-variation-settings: "slnt" 0;
-  background: linear-gradient(to bottom, transparent, rgb(255, 255, 255))
-    rgb(214, 219, 220);
-  margin: 0;
-  @media (prefers-color-scheme: dark) {
-    background: linear-gradient(to bottom, transparent, rgb(0, 0, 0))
-      rgb(0, 0, 0);
-  }
-`;
-
-const mainClass = css`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  max-width: 1024;
-  margin: 0 auto;
-  flex-direction: column;
-  height: 79vh;
-  padding: 3rem;
-  @media screen and (min-width: 1024px) {
-    padding: 6rem;
-  }
-`;
-
-const Layout: FC<PropsWithChildren> = (props: PropsWithChildren) => {
-  return (
-    <html lang="en">
-      <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin />
-        <link
-          href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap"
-          rel="stylesheet"
-        />
-        <Style />
-      </head>
-      <body class={globalClasses}>
-        <main class={mainClass}>{props.children}</main>
-      </body>
-    </html>
-  );
-};
-
-export default Layout;
+import { Style, css } from "hono/css";
+import type { FC, PropsWithChildren } from "hono/jsx";
+
+const globalClasses = css`
+  font-family: "Inter", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+  font-variation-settings: "slnt" 0;
+  background: linear-gradient(to bottom, transparent, rgb(255, 255, 255))
+    rgb(214, 219, 220);
+  margin: 0;
+  @media (prefers-color-scheme: dark) {
+    background: linear-gradient(to bottom, transparent, rgb(0, 0, 0))
+      rgb(0, 0, 0);
+  }
+`;
+
+const mainClass = css`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 1024;
+  margin: 0 auto;
+  flex-direction: column;
+  height: 79vh;
+  padding: 3rem;
+  @media screen and (min-width: 1024px) {
+    padding: 6rem;
+  }
+`;
+
+export const Layout: FC<PropsWithChildren> = (props: PropsWithChildren) => {
+  return (
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap"
+          rel="stylesheet"
+        />
+        <Style />
+      </head>
+      <body class={globalClasses}>
+        <main class={mainClass}>{props.children}</main>
+      </body>
+    </html>
+  );
+};
diff --git a/apps/sandbox/api/Page.tsx b/apps/sandbox/api/Page.tsx
@@ -1,8 +1,8 @@
 // import type { RateLimitInfo } from "hono-rate-limiter";
 import { css } from "hono/css";
 import type { FC } from "hono/jsx";
-import Card from "./Card.js";
-import Layout from "./Layout.js";
+import { Card } from "./Card.js";
+import { Layout } from "./Layout.js";
 
 const checkOut = css`
   font-family: monospace;
@@ -67,7 +67,9 @@ export type Page = {
   info: { limit: number; used: number; remaining: number; resetTime: Date };
 };
 
-const Page: FC<Page> = ({ info: { limit, remaining, resetTime } }: Page) => {
+export const Page: FC<Page> = ({
+  info: { limit, remaining, resetTime },
+}: Page) => {
   const isSuccessful = remaining > 0;
 
   const cards = [
@@ -117,5 +119,3 @@ const Page: FC<Page> = ({ info: { limit, remaining, resetTime } }: Page) => {
     </Layout>
   );
 };
-
-export default Page;
diff --git a/apps/sandbox/api/index.tsx b/apps/sandbox/api/index.tsx
@@ -1,7 +1,7 @@
 import { handle } from "@hono/node-server/vercel";
 import { Hono } from "hono";
 import { logger } from "hono/logger";
-import Page from "./Page.js";
+import { Page } from "./Page.js";
 
 const app = new Hono();
 

diff --git a/apps/sandbox/package.json b/apps/sandbox/package.json
@@ -1,9 +1,11 @@
 {
+  "version": "0.0.0",
   "type": "module",
   "scripts": {
     "vercel-build": "echo 🔥"
   },
   "dependencies": {
+    "@hono/node-server": "^1.8.2",
     "hono": "^4.1.3"
   }
 }
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
     "hono": "^4.1.3"
   },
   "devDependencies": {
-    "@biomejs/biome": "^1.6.1",
+    "@biomejs/biome": "^1.6.2",
     "@jscutlery/semver": "^5.2.0",
     "@nx/devkit": "18.1.2",
     "@nx/eslint": "18.1.2",