refactor(sandbox): improved the app

rhinobase · May 23, 2024 · 8155d33 · 8155d33
1 parent e1dace5
commit 8155d33
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 12 deletions.
diff --git a/apps/sandbox/.gitignore b/apps/sandbox/.gitignore
@@ -1 +1,2 @@
 .vercel
+pnpm-lock.yaml
diff --git a/apps/sandbox/package.json b/apps/sandbox/package.json
@@ -4,7 +4,7 @@
  "build": "echo 🔥"
  },
  "dependencies": {
- "hono-rate-limiter": "^0.2.3",
+ "hono-rate-limiter": "^0.3.0",
  "@hono-rate-limiter/redis": "^0.1.0",
  "@vercel/kv": "^1.0.1",
  "@hono/node-server": "^1.8.2",

diff --git a/apps/sandbox/src/Card.tsx b/apps/sandbox/src/Card.tsx
@@ -2,6 +2,7 @@ import { css } from "hono/css";
 import type { FC } from "hono/jsx";
 
 const cardLayout = css`
+ user-select: none;
  padding: 1rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
@@ -26,14 +27,15 @@ const cardLayout = css`
 const labelClass = css`
  font-size: 24px;
  font-weight: 600;
- margin-bottom: 0.75rem;
+ margin: 0 0 0.75rem;
  @media (prefers-color-scheme: dark) {
  color: white;
  }
 `;
 
 const valueClass = css`
  font-size: 14px;
+ margin: 0;
  opacity: 0.5;
  @media (prefers-color-scheme: dark) {
  color: white;
@@ -45,8 +47,8 @@ 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>
+ <h2 class={labelClass}>{label}</h2>
+ <p class={valueClass}>{value}</p>
  </div>
  );
 };
diff --git a/apps/sandbox/src/Layout.tsx b/apps/sandbox/src/Layout.tsx
@@ -7,12 +7,14 @@ const globalClasses = css`
  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);
+ background: linear-gradient(
+ to bottom,
+ rgb(214, 219, 220),
+ rgb(255, 255, 255)
+ );
  margin: 0;
  @media (prefers-color-scheme: dark) {
- background: linear-gradient(to bottom, transparent, rgb(0, 0, 0))
- rgb(0, 0, 0);
+ background: #000;
  }
 `;
 

diff --git a/apps/sandbox/src/Page.tsx b/apps/sandbox/src/Page.tsx
@@ -6,6 +6,7 @@ import { Layout } from "./Layout";
 
 const checkOut = css`
  font-family: monospace;
+ user-select: none;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid rgb(209 213 219);
@@ -16,7 +17,7 @@ const checkOut = css`
  @media (prefers-color-scheme: dark) {
  color: white;
  border: 1px solid rgb(38 38 38);
- background-color: rgba(39, 39, 42, 0.3);
+ background-color: rgba(39, 39, 42, 0.4);
  }
 `;
 
@@ -61,6 +62,9 @@ const linkClass = css`
  @media (prefers-color-scheme: dark) {
  color: white;
  }
+ &:hover {
+ text-decoration-line: underline;
+ }
 `;
 
 export type Page = {

diff --git a/apps/sandbox/src/index.tsx b/apps/sandbox/src/index.tsx
@@ -2,9 +2,9 @@ import { RedisStore } from "@hono-rate-limiter/redis";
 import { kv } from "@vercel/kv";
 import { Hono } from "hono";
 import {
+ rateLimiter,
  type Promisify,
  type RateLimitInfo,
- rateLimiter,
 } from "hono-rate-limiter";
 import { Page } from "./Page";
 
@@ -29,5 +29,5 @@ app.get(
  }),
  handler: (_, next) => next(),
  }),
- (c) => c.html(<Page info={c.get("rateLimit")} />),
+ (c) => c.html(<Page info={c.get("rateLimit")} />)
 );
diff --git a/package.json b/package.json
@@ -3,7 +3,6 @@
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
- "start": "nx run sandbox:serve --configuration=production",
  "commit": "czg",
  "prepare": "is-ci || husky install",
  "format": "biome check --apply ."