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:19 +00:00
parent 3a56fd256e
commit bec41ccccb
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Search.tsx
+4 -4
View File
@@ -99,7 +99,7 @@ export default function SearchPage() {
key={chip} key={chip}
variant={activeFilter === chip ? "default" : "outline"} variant={activeFilter === chip ? "default" : "outline"}
size="sm" size="sm"
className={`rounded-full active:scale-[0.98] \${ className={`rounded-full active:scale-[0.98] ${
activeFilter === chip activeFilter === chip
? "bg-emerald-600 hover:bg-emerald-700 text-white" ? "bg-emerald-600 hover:bg-emerald-700 text-white"
: "border-stone-200 text-stone-600 hover:border-emerald-300 hover:text-emerald-700" : "border-stone-200 text-stone-600 hover:border-emerald-300 hover:text-emerald-700"
@@ -115,14 +115,14 @@ export default function SearchPage() {
{filtered.length > 0 ? ( {filtered.length > 0 ? (
<div className="space-y-4"> <div className="space-y-4">
{filtered.map((article) => ( {filtered.map((article) => (
<Link to={`/article/\${article.slug}`} key={article.id} className="group block"> <Link to={`/article/${article.slug}`} key={article.id} className="group block">
<div className="flex gap-5 p-5 bg-white rounded-xl border border-stone-100 hover:shadow-md hover:border-stone-200 hover:-translate-y-0.5 transition-all duration-300"> <div className="flex gap-5 p-5 bg-white rounded-xl border border-stone-100 hover:shadow-md hover:border-stone-200 hover:-translate-y-0.5 transition-all duration-300">
<div className={`hidden sm:flex w-28 h-20 flex-shrink-0 rounded-lg bg-gradient-to-br \${article.gradient} items-center justify-center relative overflow-hidden`}> <div className={`hidden sm:flex w-28 h-20 flex-shrink-0 rounded-lg bg-gradient-to-br ${article.gradient} items-center justify-center relative overflow-hidden`}>
<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> </div>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-1"> <div className="flex items-center gap-2 mb-1">
<Badge className={`border-0 text-[10px] px-2 py-0 hover:bg-primary hover:text-primary-foreground transition-colors \${categoryColors[article.category]}`}> <Badge className={`border-0 text-[10px] px-2 py-0 hover:bg-primary hover:text-primary-foreground transition-colors ${categoryColors[article.category]}`}>
{article.category} {article.category}
</Badge> </Badge>
</div> </div>