vibeasite-templates/template-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Seed: blog template (17 files)

Browse Source
This commit is contained in:
jyswee
2026-07-23 22:56:17 +00:00
parent 1895bc12ed
commit 3f7551ca38
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Category.tsx
+7 -7
View File
@@ -54,7 +54,7 @@ export default function CategoryPage() {
<span className="text-stone-600">{categoryName}</span> <span className="text-stone-600">{categoryName}</span>
</nav> </nav>
<div className="animate-fade-up"> <div className="animate-fade-up">
<Badge className={`mb-4 border-0 hover:bg-primary hover:text-primary-foreground transition-colors \${categoryColors[categoryName] || "bg-emerald-100 text-emerald-700"}`}> <Badge className={`mb-4 border-0 hover:bg-primary hover:text-primary-foreground transition-colors ${categoryColors[categoryName] || "bg-emerald-100 text-emerald-700"}`}>
{categoryName} {categoryName}
</Badge> </Badge>
<div className="flex items-start justify-between flex-wrap gap-4"> <div className="flex items-start justify-between flex-wrap gap-4">
@@ -85,9 +85,9 @@ export default function CategoryPage() {
<div className="lg:col-span-3"> <div className="lg:col-span-3">
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 stagger"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 stagger">
{articles.map((article) => ( {articles.map((article) => (
<Link to={`/article/\${article.slug}`} key={article.id} className="group"> <Link to={`/article/${article.slug}`} key={article.id} className="group">
<Card className="overflow-hidden border-0 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 bg-white"> <Card className="overflow-hidden border-0 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 bg-white">
<div className={`relative aspect-video bg-gradient-to-br \${article.gradient}`}> <div className={`relative aspect-video bg-gradient-to-br ${article.gradient}`}>
<div className="absolute inset-0" style={{ backgroundImage: "radial-gradient(circle at 25% 25%, rgba(255,255,255,0.15) 1px, transparent 1px)", backgroundSize: "20px 20px" }} /> <div className="absolute inset-0" style={{ backgroundImage: "radial-gradient(circle at 25% 25%, rgba(255,255,255,0.15) 1px, transparent 1px)", backgroundSize: "20px 20px" }} />
<div className="absolute top-1/3 left-1/4 w-24 h-24 rounded-full bg-white/10 blur-2xl" /> <div className="absolute top-1/3 left-1/4 w-24 h-24 rounded-full bg-white/10 blur-2xl" />
</div> </div>
@@ -123,7 +123,7 @@ export default function CategoryPage() {
key={page} key={page}
variant={page === 1 ? "default" : "outline"} variant={page === 1 ? "default" : "outline"}
size="icon" size="icon"
className={`h-9 w-9 rounded-full \${page === 1 ? "bg-emerald-600 hover:bg-emerald-700" : ""}`} className={`h-9 w-9 rounded-full ${page === 1 ? "bg-emerald-600 hover:bg-emerald-700" : ""}`}
> >
{page} {page}
</Button> </Button>
@@ -143,14 +143,14 @@ export default function CategoryPage() {
{allCategories.map((cat) => ( {allCategories.map((cat) => (
<li key={cat}> <li key={cat}>
<Link <Link
to={`/category/\${cat.toLowerCase()}`} to={`/category/${cat.toLowerCase()}`}
className={`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors \${ className={`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors ${
cat === categoryName cat === categoryName
? "bg-emerald-50 text-emerald-700 font-medium" ? "bg-emerald-50 text-emerald-700 font-medium"
: "text-stone-600 hover:bg-stone-50" : "text-stone-600 hover:bg-stone-50"
}`} }`}
> >
<span className={`h-2 w-2 rounded-full \${ <span className={`h-2 w-2 rounded-full ${
cat === categoryName ? "bg-emerald-500" : "bg-stone-300" cat === categoryName ? "bg-emerald-500" : "bg-stone-300"
}`} /> }`} />
{cat} {cat}