feat: add clerk to vite-template
This commit is contained in:
parent
da8aaa1db6
commit
14ef2719c7
4 changed files with 65 additions and 31 deletions
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue