Skip to content

Commit ad631ea

Browse files
prosdevprosdev
committed
feat: improve UX and add featured section
- Fix mobile responsiveness (cards, header, overflow issues) - Remove tags from cards for cleaner design - Improve detail page metadata layout (date moved up, horizontal on desktop) - Enhance code blocks with header bar and always-visible copy button - Add featured section to home page with "Start Here" - Add featured field to Velite schema - Change primary buttons to outline variant for better visual hierarchy
1 parent 36c460c commit ad631ea

File tree

13 files changed

+504
-169
lines changed

13 files changed

+504
-169
lines changed

‎app/kits/[slug]/page.tsx‎

Lines changed: 74 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
import { Calendar, ChevronRight, ExternalLink } from "lucide-react";
1+
import {
2+
AlertCircle,
3+
Calendar,
4+
ChevronRight,
5+
ExternalLink,
6+
} from "lucide-react";
27
import Link from "next/link";
38
import { notFound } from "next/navigation";
49
import { MDXContent } from "@/components/mdx-content";
@@ -52,81 +57,113 @@ export default async function KitPage(props: KitPageProps) {
5257

5358
return (
5459
<div className="container px-4 sm:px-6 py-6 sm:py-8 md:py-12">
55-
<article className="mx-auto max-w-3xl">
60+
<article className="mx-auto max-w-3xl min-w-0">
5661
{/* Breadcrumbs */}
57-
<nav className="flex items-center gap-2 text-sm text-muted-foreground mb-6">
58-
<Link href="/" className="hover:text-foreground transition-colors">
62+
<nav className="flex items-center gap-2 text-sm text-muted-foreground mb-6 overflow-x-auto">
63+
<Link
64+
href="/"
65+
className="hover:text-foreground transition-colors whitespace-nowrap"
66+
>
5967
Home
6068
</Link>
61-
<ChevronRight className="h-4 w-4" />
69+
<ChevronRight className="h-4 w-4 shrink-0" />
6270
<Link
6371
href="/kits"
64-
className="hover:text-foreground transition-colors"
72+
className="hover:text-foreground transition-colors whitespace-nowrap"
6573
>
6674
Kits
6775
</Link>
68-
<ChevronRight className="h-4 w-4" />
69-
<span className="text-foreground">{kit.title}</span>
76+
<ChevronRight className="h-4 w-4 shrink-0" />
77+
<span className="text-foreground truncate">{kit.title}</span>
7078
</nav>
7179

7280
<div className="space-y-4 sm:space-y-6">
7381
{/* Header */}
7482
<div className="space-y-3 sm:space-y-4">
75-
<div className="flex items-center gap-2 flex-wrap">
76-
<Badge variant={statusVariant[kit.status]} className="text-xs">
83+
<h1 className="text-2xl font-bold tracking-tight sm:text-3xl md:text-4xl lg:text-5xl">
84+
{kit.title}
85+
</h1>
86+
<div className="flex items-center gap-2 sm:gap-3 flex-wrap">
87+
<Badge
88+
variant={statusVariant[kit.status]}
89+
className="text-sm px-3 py-1"
90+
>
7791
{kit.status}
7892
</Badge>
79-
<Badge variant="outline" className="text-xs">
93+
<Badge variant="outline" className="text-sm px-3 py-1">
8094
{kit.category}
8195
</Badge>
96+
<div className="flex items-center gap-2 text-sm text-muted-foreground">
97+
<Calendar className="h-4 w-4" />
98+
<span>
99+
Updated {new Date(kit.lastUpdated).toLocaleDateString()}
100+
</span>
101+
</div>
82102
</div>
83-
<h1 className="text-2xl font-bold tracking-tight sm:text-3xl md:text-4xl lg:text-5xl">
84-
{kit.title}
85-
</h1>
86103
<p className="text-base sm:text-lg text-muted-foreground leading-relaxed">
87104
{kit.summary}
88105
</p>
89106
</div>
90107

91-
{/* Metadata row */}
92-
<div className="flex flex-wrap gap-3 sm:gap-4 items-center text-sm text-muted-foreground">
93-
<Button asChild variant="default" size="sm">
108+
{/* Experimental Warning */}
109+
{kit.status === "experimental" && (
110+
<div className="rounded-lg border border-amber-200 bg-amber-50 p-4 dark:border-amber-900/50 dark:bg-amber-950/20">
111+
<div className="flex gap-3">
112+
<AlertCircle className="h-5 w-5 text-amber-600 dark:text-amber-500 shrink-0 mt-0.5" />
113+
<div className="space-y-1">
114+
<p className="text-sm font-medium text-amber-900 dark:text-amber-200">
115+
Experimental Release
116+
</p>
117+
<p className="text-sm text-amber-800 dark:text-amber-300">
118+
This kit is under active development. APIs may change
119+
without notice. Not recommended for production use.
120+
</p>
121+
</div>
122+
</div>
123+
</div>
124+
)}
125+
126+
{/* Deprecated Warning */}
127+
{kit.status === "deprecated" && (
128+
<div className="rounded-lg border border-red-200 bg-red-50 p-4 dark:border-red-900/50 dark:bg-red-950/20">
129+
<div className="flex gap-3">
130+
<AlertCircle className="h-5 w-5 text-red-600 dark:text-red-500 shrink-0 mt-0.5" />
131+
<div className="space-y-1">
132+
<p className="text-sm font-medium text-red-900 dark:text-red-200">
133+
Deprecated
134+
</p>
135+
<p className="text-sm text-red-800 dark:text-red-300">
136+
This kit is no longer maintained. Consider migrating to an
137+
alternative solution.
138+
</p>
139+
</div>
140+
</div>
141+
</div>
142+
)}
143+
144+
{/* Metadata */}
145+
<div className="flex flex-col sm:flex-row sm:items-center gap-3">
146+
<Button asChild variant="outline" size="sm">
94147
<a
95148
href={kit.reference.url}
96149
target="_blank"
97150
rel="noopener noreferrer"
151+
className="flex items-center gap-2"
98152
>
99-
<ExternalLink className="mr-2 h-3 w-3 sm:h-4 sm:w-4" />
100-
<span className="text-xs sm:text-sm">
153+
<ExternalLink className="h-4 w-4" />
154+
<span className="text-sm">
101155
{kit.reference.type === "repo"
102156
? "Repository"
103157
: "Documentation"}
104158
</span>
105159
</a>
106160
</Button>
107-
<div className="flex items-center gap-1.5 text-xs sm:text-sm">
108-
<Calendar className="h-3 w-3 sm:h-4 sm:w-4" />
109-
<span>
110-
Updated {new Date(kit.lastUpdated).toLocaleDateString()}
111-
</span>
112-
</div>
113161
</div>
114162

115-
{/* Tags */}
116-
{kit.tags.length > 0 && (
117-
<div className="flex flex-wrap gap-1.5 sm:gap-2">
118-
{kit.tags.map((tag: string) => (
119-
<Badge key={tag} variant="outline" className="text-xs">
120-
{tag}
121-
</Badge>
122-
))}
123-
</div>
124-
)}
125-
126163
<Separator />
127164

128165
{/* MDX Content */}
129-
<div className="max-w-none">
166+
<div className="max-w-full overflow-x-hidden break-words">
130167
<MDXContent code={kit.body} />
131168
</div>
132169
</div>

‎app/kits/page.tsx‎

Lines changed: 79 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,97 @@
1+
"use client";
2+
3+
import { useState } from "react";
14
import { KitCard } from "@/components/kit-card";
5+
import { Button } from "@/components/ui/button";
26
import { kits } from "@/lib/content";
37

8+
type StatusFilter = "all" | "stable" | "experimental" | "deprecated";
9+
410
export default function KitsPage() {
11+
const [filter, setFilter] = useState<StatusFilter>("all");
12+
513
const sortedKits = kits.sort((a, b) => {
614
if (a.order !== b.order) return a.order - b.order;
715
return a.title.localeCompare(b.title);
816
});
917

18+
const filteredKits =
19+
filter === "all"
20+
? sortedKits
21+
: sortedKits.filter((kit) => kit.status === filter);
22+
23+
const counts = {
24+
all: kits.length,
25+
stable: kits.filter((k) => k.status === "stable").length,
26+
experimental: kits.filter((k) => k.status === "experimental").length,
27+
deprecated: kits.filter((k) => k.status === "deprecated").length,
28+
};
29+
1030
return (
11-
<div className="container px-4 sm:px-6 py-6 sm:py-8 md:py-12">
12-
<div className="mx-auto max-w-5xl space-y-6 sm:space-y-8">
13-
<div className="space-y-2">
14-
<h1 className="text-2xl font-bold tracking-tight sm:text-3xl md:text-4xl">
15-
Kits
16-
</h1>
17-
<p className="text-sm text-muted-foreground sm:text-base md:text-lg">
18-
SDKs, runtimes, and development frameworks
19-
</p>
31+
<div className="container px-4 sm:px-6 py-6 sm:py-8 md:py-12 max-w-full">
32+
<div className="mx-auto max-w-5xl space-y-6 sm:space-y-8 min-w-0">
33+
<div className="space-y-4">
34+
<div className="space-y-2">
35+
<h1 className="text-2xl font-bold tracking-tight sm:text-3xl md:text-4xl">
36+
Kits
37+
</h1>
38+
<p className="text-sm text-muted-foreground sm:text-base md:text-lg">
39+
SDKs, runtimes, and development frameworks
40+
</p>
41+
</div>
42+
43+
{/* Filter Pills */}
44+
<div className="flex flex-wrap gap-2">
45+
<Button
46+
variant={filter === "all" ? "default" : "outline"}
47+
size="sm"
48+
onClick={() => setFilter("all")}
49+
className="text-xs sm:text-sm"
50+
>
51+
All ({counts.all})
52+
</Button>
53+
<Button
54+
variant={filter === "stable" ? "default" : "outline"}
55+
size="sm"
56+
onClick={() => setFilter("stable")}
57+
className="text-xs sm:text-sm"
58+
>
59+
Stable ({counts.stable})
60+
</Button>
61+
<Button
62+
variant={filter === "experimental" ? "default" : "outline"}
63+
size="sm"
64+
onClick={() => setFilter("experimental")}
65+
className="text-xs sm:text-sm"
66+
>
67+
Experimental ({counts.experimental})
68+
</Button>
69+
{counts.deprecated > 0 && (
70+
<Button
71+
variant={filter === "deprecated" ? "default" : "outline"}
72+
size="sm"
73+
onClick={() => setFilter("deprecated")}
74+
className="text-xs sm:text-sm"
75+
>
76+
Deprecated ({counts.deprecated})
77+
</Button>
78+
)}
79+
</div>
2080
</div>
2181

22-
<div className="grid gap-3 sm:gap-4 sm:grid-cols-2 lg:grid-cols-3">
23-
{sortedKits.map((kit) => (
82+
<div className="grid gap-3 sm:gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 min-w-0">
83+
{filteredKits.map((kit) => (
2484
<KitCard key={kit.slug} kit={kit} />
2585
))}
2686
</div>
87+
88+
{filteredKits.length === 0 && (
89+
<div className="text-center py-12">
90+
<p className="text-muted-foreground">
91+
No kits found with status: {filter}
92+
</p>
93+
</div>
94+
)}
2795
</div>
2896
</div>
2997
);

‎app/layout.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,15 @@ export default function RootLayout({
1717
children: React.ReactNode;
1818
}>) {
1919
return (
20-
<html lang="en" suppressHydrationWarning>
21-
<body className={inter.className}>
20+
<html lang="en" suppressHydrationWarning className="overflow-x-hidden">
21+
<body className={`${inter.className} overflow-x-hidden`}>
2222
<ThemeProvider
2323
attribute="class"
2424
defaultTheme="system"
2525
enableSystem
2626
disableTransitionOnChange
2727
>
28-
<div className="relative flex min-h-screen flex-col">
28+
<div className="relative flex min-h-screen flex-col overflow-x-hidden">
2929
<SiteHeader />
3030
<main className="flex-1">{children}</main>
3131
</div>

0 commit comments

Comments
 (0)