git.stevedylan.dev

chore: Updated default template for App.tsx 6ab8ede7

Steve · 2025-05-05 20:47 2 file(s) · +33 −19

client/src/App.css +26 −0

52	52		max-width: 500px;
53	53		margin: auto;
54	54		}
	55	+
	56	+	.button-container {
	57	+	display: flex;
	58	+	align-items: center;
	59	+	gap: 2rem;
	60	+	}
	61	+
	62	+	.docs-link {
	63	+	border-radius: 8px;
	64	+	border: 1px solid transparent;
	65	+	padding: 0.6em 1.2em;
	66	+	font-size: 1em;
	67	+	font-weight: 500;
	68	+	font-family: inherit;
	69	+	background-color: #1a1a1a;
	70	+	cursor: pointer;
	71	+	transition: border-color 0.25s;
	72	+	color: rgba(255, 255, 255, 0.87);
	73	+	}
	74	+	.docs-link:hover {
	75	+	border-color: #646cff;
	76	+	}
	77	+	.docs-link:focus,
	78	+	.docs-link:focus-visible {
	79	+	outline: 4px auto -webkit-focus-ring-color;
	80	+	}

client/src/App.tsx +7 −19

import { useState } from 'react'
import beaver from './assets/beaver.svg'
import { ApiResponse } from 'shared'
import type { ApiResponse } from 'shared'
import './App.css'

const SERVER_URL = import.meta.env.VITE_SERVER_URL || "http://localhost:3000"

      <h2>Bun + Hono + Vite + React</h2>
      <p>A typesafe fullstack monorepo</p>
      <div className="card">
        <button onClick={sendRequest}>
          Call API
        </button>
        <div className='button-container'>
          <button onClick={sendRequest}>
            Call API
          </button>
          <a className='docs-link' target='_blank' href="https://bhvr.dev">Docs</a>
        </div>
        {data && (
          <pre className='response'>
            <code>

            </code>
          </pre>
        )}
        <pre className='code'>
          <code>
{`
  .
  ├── client/               # React frontend
  ├── server/               # Hono backend
  ├── shared/               # Shared TypeScript definitions
  │   └── src/types/        # Type definitions used by both client and server
  └── package.json          # Root package.json with workspaces
`}
          </code>
        </pre>
      </div>
      <p className="read-the-docs">
        Click the beaver to learn more
      </p>
    </>
  )
}

1	1		import { useState } from 'react'
2	2		import beaver from './assets/beaver.svg'
3		-	import { ApiResponse } from 'shared'
	3	+	import type { ApiResponse } from 'shared'
4	4		import './App.css'
5	5
6	6		const SERVER_URL = import.meta.env.VITE_SERVER_URL \|\| "http://localhost:3000"

29	29		<h2>Bun + Hono + Vite + React</h2>
30	30		<p>A typesafe fullstack monorepo</p>
31	31		<div className="card">
32		-	<button onClick={sendRequest}>
33		-	Call API
34		-	</button>
	32	+	<div className='button-container'>
	33	+	<button onClick={sendRequest}>
	34	+	Call API
	35	+	</button>
	36	+	<a className='docs-link' target='_blank' href="https://bhvr.dev">Docs</a>
	37	+	</div>
35	38		{data && (
36	39		<pre className='response'>
37	40		<code>

40	43		</code>
41	44		</pre>
42	45		)}
43		-	<pre className='code'>
44		-	<code>
45		-	{`
46		-	.
47		-	├── client/ # React frontend
48		-	├── server/ # Hono backend
49		-	├── shared/ # Shared TypeScript definitions
50		-	│ └── src/types/ # Type definitions used by both client and server
51		-	└── package.json # Root package.json with workspaces
52		-	`}
53		-	</code>
54		-	</pre>
55	46		</div>
56		-	<p className="read-the-docs">
57		-	Click the beaver to learn more
58		-	</p>
59	47		</>
60	48		)
61	49		}