Skip to content

Commit e19baa0

Browse files
ankushKunankushKun
committed
ui updates
1 parent 7531e69 commit e19baa0

13 files changed

Lines changed: 262 additions & 180 deletions

File tree

‎frontend/src/components/comment-card.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ interface CommentCardProps {
1111
showPage?: boolean;
1212
pageTitle?: string | null;
1313
pageSlug?: string;
14+
siteName?: string;
1415
selected?: boolean;
1516
onSelect?: (id: number) => void;
1617
onApprove?: (id: number) => void;
@@ -25,6 +26,7 @@ export function CommentCard({
2526
showPage = false,
2627
pageTitle,
2728
pageSlug,
29+
siteName,
2830
selected = false,
2931
onSelect,
3032
onApprove,
@@ -47,7 +49,7 @@ export function CommentCard({
4749
"transition-all hover:shadow-md border-slate-200",
4850
selected && "ring-2 ring-blue-500 ring-offset-2"
4951
)}>
50-
<CardContent className="p-5">
52+
<CardContent className="p-4">
5153
<div className="flex gap-4">
5254
{/* Selection Checkbox */}
5355
{onSelect && (
@@ -107,6 +109,14 @@ export function CommentCard({
107109
</div>
108110
)}
109111

112+
{/* Site Name Badge (if enabled) */}
113+
{siteName && (
114+
<div className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-blue-50 text-blue-700 w-fit">
115+
<span className="font-semibold">Site:</span>
116+
<span>{siteName}</span>
117+
</div>
118+
)}
119+
110120
{/* Comment Text */}
111121
<div className="prose prose-sm max-w-none">
112122
<p className="text-slate-700 leading-relaxed">

‎frontend/src/components/dashboard-layout.tsx‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { useAuth } from '@/lib/auth-context';
22
import { useSite } from '@/lib/site-context';
33
import { Button } from '@/components/ui/button';
4-
import { SiteSwitcher } from '@/components/site-switcher';
54
import { Avatar } from '@/components/ui/avatar';
65
import {
76
Home,
@@ -20,6 +19,7 @@ import {
2019
DropdownMenuSeparator,
2120
DropdownMenuTrigger,
2221
} from "@/components/ui/dropdown-menu"
22+
import { BookOpen } from "lucide-react";
2323

2424
export type TabType = 'overview' | 'sites' | 'settings';
2525

@@ -87,9 +87,19 @@ export function DashboardLayout({ children, activeTab, onTabChange }: DashboardL
8787

8888
{/* Right Section */}
8989
<div className="flex items-center gap-4">
90-
{/* Site Switcher */}
91-
<div className="hidden md:block min-w-[200px]">
92-
<SiteSwitcher />
90+
91+
{/* Resources Links */}
92+
<div className="hidden lg:flex items-center gap-2">
93+
<Button
94+
variant="ghost"
95+
className="text-slate-600 gap-2 h-9 px-3 text-sm hover:text-slate-900"
96+
asChild
97+
>
98+
<a href="/docs" target="_blank">
99+
<BookOpen className="h-4 w-4" />
100+
Docs
101+
</a>
102+
</Button>
93103
</div>
94104

95105
<div className="h-6 w-px bg-slate-200" />

‎frontend/src/components/login-form.tsx‎

Lines changed: 35 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ import {
1313
Mail,
1414
CheckCircle2,
1515
ArrowRight,
16-
Globe
16+
Globe,
17+
BookOpen
1718
} from 'lucide-react';
1819
import logo from "../../icon.png"
1920

@@ -69,7 +70,7 @@ export function LoginForm() {
6970
};
7071

7172
const loginCard = sent ? (
72-
<Card className="w-full border-slate-200 shadow-lg">
73+
<Card className="w-full border-slate-200 shadow-lg py-4">
7374
<CardHeader className="text-center pb-2">
7475
<div className="h-16 w-16 rounded-full bg-green-50 flex items-center justify-center mx-auto mb-4">
7576
<Mail className="h-8 w-8 text-green-600" />
@@ -101,7 +102,7 @@ export function LoginForm() {
101102
</CardContent>
102103
</Card>
103104
) : (
104-
<Card className="w-full border-slate-200 shadow-lg">
105+
<Card className="w-full border-slate-200 shadow-lg py-4">
105106
<CardHeader className="text-center pb-4">
106107
{/* <div className="h-14 w-14 rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center mx-auto mb-4 shadow-lg shadow-blue-500/25">
107108
<MessageSquare className="h-7 w-7 text-white" />
@@ -182,14 +183,31 @@ export function LoginForm() {
182183
{loginCard}
183184

184185
{/* Social Proof / Trust */}
185-
<div className="mt-4 sm:mt-6 text-center">
186+
<div className="mt-2 mb-4 text-center">
186187
<div className="flex items-center justify-center gap-1 text-slate-400">
187188
<CheckCircle2 className="h-4 w-4 text-green-500" />
188189
<span className="text-sm">Free to get started</span>
189190
</div>
190191
</div>
192+
{/* Example CTA */}
193+
<a href="https://commentkit.ankush.one/example" target="_blank" rel="noopener noreferrer">
194+
<div className="text-center bg-white p-4 py-2.5 rounded-xl border border-slate-100 shadow-sm flex items-center justify-between gap-4">
195+
<div className="text-left">
196+
<h3 className="text-slate-900 font-semibold">See it in action</h3>
197+
<p className="text-slate-500 text-sm">Check out our live demo to see how comment threads work.</p>
198+
</div>
199+
<a
200+
href="https://commentkit.ankush.one/example"
201+
target="_blank"
202+
className=" inline-flex aspect-square h-full items-center gap-2 bg-blue-50 text-blue-600 hover:bg-blue-100 px-4 py-2 rounded-lg font-medium text-sm transition-colors"
203+
>
204+
<ArrowRight className="h-5 w-5" />
205+
</a>
206+
</div>
207+
</a>
191208
</div>
192209

210+
193211
{/* Features - Left Side */}
194212
<div className="lg:col-span-3 lg:order-1 space-y-6 md:space-y-8">
195213
{/* Feature Cards */}
@@ -217,7 +235,7 @@ export function LoginForm() {
217235
</div>
218236

219237
{/* How it Works */}
220-
<div className="bg-white rounded-2xl border border-slate-100 p-4 sm:p-6 shadow-sm">
238+
{/* <div className="bg-white rounded-2xl border border-slate-100 p-4 sm:p-6 shadow-sm">
221239
<h2 className="text-base sm:text-lg font-bold text-slate-800 mb-4 sm:mb-5 flex items-center gap-2">
222240
<Globe className="h-5 w-5 text-blue-600" />
223241
Get started in minutes
@@ -239,7 +257,7 @@ export function LoginForm() {
239257
description="Moderate comments, view activity, and keep your community healthy."
240258
/>
241259
</div>
242-
</div>
260+
</div> */}
243261

244262
{/* Code Preview */}
245263
<div className="bg-slate-900 rounded-xl p-3 sm:p-5 shadow-lg overflow-hidden">
@@ -274,9 +292,19 @@ export function LoginForm() {
274292

275293
{/* Footer */}
276294
<div className="mt-12 md:mt-16 pt-6 md:pt-8 border-t border-slate-200 text-center">
277-
<p className="text-xs sm:text-sm text-slate-400">
295+
<p className="text-xs sm:text-sm text-slate-400 mb-2">
278296
Built with Cloudflare Workers, D1, and Hono
279297
</p>
298+
<div className="flex items-center justify-center gap-4 text-sm font-medium">
299+
<a href="/docs" target="_blank" className="text-slate-500 hover:text-blue-600 flex items-center gap-1 transition-colors">
300+
<BookOpen className="h-4 w-4" />
301+
Documentation
302+
</a>
303+
<a href="https://commentkit.ankush.one/example" target="_blank" className="text-slate-500 hover:text-blue-600 flex items-center gap-1 transition-colors">
304+
<Globe className="h-4 w-4" />
305+
View Example
306+
</a>
307+
</div>
280308
</div>
281309
</div>
282310
);

0 commit comments

Comments
 (0)