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>
);
}

44
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>
</div>
<SignInButton mode="modal">
<Button variant="outline">Sign In</Button>
</SignInButton>
</SignedOut>
</CardContent>
</Card>
<SignedIn>
<UserButton />
</SignedIn>
</div>
</header>
<Outlet />
</div>
);
}