create-bhvr
Version:
Create a new bhvr project
53 lines (52 loc) • 1.86 kB
JavaScript
import { useState } from "react";
import beaver from "@/assets/beaver.svg";
import { Button } from "@/components/ui/button";
import { hcWithType } from "server/dist/client";
import { useMutation } from "@tanstack/react-query";
import ClientOnly from "./ClientOnly";
const SERVER_URL = import.meta.env.DEV ? "http://localhost:3000" : "/api";
const client = hcWithType(SERVER_URL);
function Home() {
const [data, setData] = useState();
const { mutate: sendRequest } = useMutation({
mutationFn: async () => {
try {
const res = await client.hello.$get();
if (!res.ok) {
console.log("Error fetching data");
return;
}
const data = await res.json();
setData(data);
}
catch (error) {
console.log(error);
}
},
});
return (<div className="max-w-xl mx-auto flex flex-col gap-6 items-center justify-center min-h-screen">
<a href="https://github.com/stevedylandev/bhvr" target="_blank" rel="noopener">
<img src={beaver} className="w-16 h-16 cursor-pointer" alt="beaver logo"/>
</a>
<h1 className="text-5xl font-black">bhvr</h1>
<h2 className="text-2xl font-bold">Bun + Hono + Vite + React</h2>
<p>A typesafe fullstack monorepo</p>
<ClientOnly>
<div className="flex items-center gap-4">
<Button onClick={() => sendRequest()}>Call API</Button>
<Button variant="secondary" asChild>
<a target="_blank" href="https://bhvr.dev" rel="noopener">
Docs
</a>
</Button>
</div>
{data && (<pre className="bg-gray-100 p-4 rounded-md">
<code>
Message: {data.message} <br />
Success: {data.success.toString()}
</code>
</pre>)}
</ClientOnly>
</div>);
}
export default Home;