feat: add clerk to vite-template

This commit is contained in:
afiqzudinhadi 2025-06-23 14:50:04 +08:00
parent da8aaa1db6
commit 14ef2719c7
4 changed files with 65 additions and 31 deletions

View file

@ -10,33 +10,54 @@ import {
CardHeader,
CardTitle,
} from "@repo/ui/components/card";
import {
SignedIn,
SignedOut,
SignInButton,
UserButton,
} from "@clerk/clerk-react";
function App() {
return (
<div className="container">
<h1 className="title">
Admin <br />
<span>Kitchen Sink</span>
</h1>
<CounterButton />
<Card className="my-6">
<CardHeader>
<CardTitle>shadcn/ui Card Example</CardTitle>
</CardHeader>
<CardContent>
<Button>shadcn/ui Button</Button>
</CardContent>
</Card>
<p className="description">
Built With{" "}
<Link href="https://turborepo.com" newTab>
Turborepo
</Link>
{" & "}
<Link href="https://vitejs.dev/" newTab>
Vite
</Link>
</p>
<div>
<header className="flex items-center justify-end py-4 px-6 bg-white shadow-sm mb-6">
<div>
<SignedOut>
<SignInButton mode="modal">
<Button variant="outline">Sign In</Button>
</SignInButton>
</SignedOut>
<SignedIn>
<UserButton afterSignOutUrl="/" />
</SignedIn>
</div>
</header>
<div className="container">
<h1 className="title">
Admin <br />
<span>Kitchen Sink</span>
</h1>
<CounterButton />
<Card className="my-6">
<CardHeader>
<CardTitle>shadcn/ui Card Example</CardTitle>
</CardHeader>
<CardContent>
<Button>shadcn/ui Button</Button>
</CardContent>
</Card>
<p className="description">
Built With{" "}
<Link href="https://turborepo.com" newTab>
Turborepo
</Link>
{" & "}
<Link href="https://vitejs.dev/" newTab>
Vite
</Link>
</p>
</div>
</div>
);
}