afiqzudinhadi/ecommerce-template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: cleanup and make ui looks nicer

Browse source
This commit is contained in:
afiqzudinhadi 2025-06-23 19:45:53 +08:00
parent a5faf21953
commit 3fcf8da406
3 changed files with 67 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

40
apps/remix-template/app/routes/clerk._index.tsx Normal file
View file

@ -0,0 +1,40 @@
import { SignInButton, UserButton, SignedIn, SignedOut } from "@clerk/remix";
import {
Card,
CardContent,
CardHeader,
CardTitle,
} from "@repo/ui/components/card";
import { Button } from "@repo/ui/components/button";
export default function Index() {
return (
<div className="flex min-h-screen items-center justify-center">
<Card className="w-full max-w-md shadow-lg">
<CardHeader>
<CardTitle className="text-center">Welcome</CardTitle>
</CardHeader>
<CardContent>
<SignedIn>
<div className="flex flex-col items-center gap-4">
<p className="text-green-700 font-medium">
You are signed in!
</p>
<UserButton />
</div>
</SignedIn>
<SignedOut>
<div className="flex flex-col items-center gap-4">
<p className="text-red-700 font-medium">
You are signed out
</p>
<SignInButton mode="modal">
<Button variant="default">Sign In</Button>
</SignInButton>
</div>
</SignedOut>
</CardContent>
</Card>
</div>
);
}

42
apps/remix-template/app/routes/clerk.tsx
View file

@ -1,40 +1,24 @@
import { SignInButton, UserButton, SignedIn, SignedOut } from "@clerk/remix";
import {
Card,
CardContent,
CardHeader,
CardTitle,
} from "@repo/ui/components/card";
import { Button } from "@repo/ui/components/button";
import { Outlet } from "@remix-run/react";
export default function Index() {
return (
<div className="flex min-h-screen items-center justify-center bg-muted">
<Card className="w-full max-w-md shadow-lg">
<CardHeader>
<CardTitle className="text-center">Welcome</CardTitle>
</CardHeader>
<CardContent>
<SignedIn>
<div className="flex flex-col items-center gap-4">
<p className="text-green-700 font-medium">
You are signed in!
</p>
<UserButton />
</div>
</SignedIn>
<div>
<header className="flex items-center justify-end py-4 px-6 bg-white shadow-sm mb-6">
<div>
<SignedOut>
<div className="flex flex-col items-center gap-4">
<p className="text-red-700 font-medium">
You are signed out
</p>
<SignInButton>
<Button variant="default">Sign In</Button>
<SignInButton mode="modal">
<Button variant="outline">Sign In</Button>
</SignInButton>
</div>
</SignedOut>
</CardContent>
</Card>
<SignedIn>
<UserButton />
</SignedIn>
</div>
</header>
<Outlet />
</div>
);
}

14
apps/vite-template/src/app/index.tsx
View file

@ -28,7 +28,7 @@ function App() {
</SignInButton>
</SignedOut>
<SignedIn>
<UserButton afterSignOutUrl="/" />
<UserButton />
</SignedIn>
</div>
</header>
@ -39,6 +39,7 @@ function App() {
<span>Kitchen Sink</span>
</h1>
<CounterButton />
<Card className="my-6">
<CardHeader>
<CardTitle>shadcn/ui Card Example</CardTitle>
@ -47,6 +48,17 @@ function App() {
<Button>shadcn/ui Button</Button>
</CardContent>
</Card>
<Card className="my-6">
<CardHeader>
<CardTitle>Clerk Authentication Example</CardTitle>
</CardHeader>
<CardContent>
<SignedOut>You are signed out!</SignedOut>
<SignedIn>You are signed in!</SignedIn>
</CardContent>
</Card>
<p className="description">
Built With{" "}
<Link href="https://turborepo.com" newTab>