gbanyan/blog-nextjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Apply accent-based tag styling to sidebar hot tags for better dark-mode readability

Browse Source
This commit is contained in:
gbanyan
2025-11-17 23:11:25 +08:00
parent 834ee6838d
commit 6033d9f58a
1 changed files with 2 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
components/right-sidebar.tsx
View File

@@ -92,26 +92,16 @@ export function RightSidebar() {
熱門標籤 熱門標籤
</h2> </h2>
<div className="mt-2 flex flex-wrap gap-2 text-xs"> <div className="mt-2 flex flex-wrap gap-2 text-xs">
{tags.map(({ tag, slug, count }, index) => { {tags.map(({ tag, slug, count }) => {
let sizeClass = 'text-[11px]'; let sizeClass = 'text-[11px]';
if (count >= 5) sizeClass = 'text-sm font-semibold'; if (count >= 5) sizeClass = 'text-sm font-semibold';
else if (count >= 3) sizeClass = 'text-xs font-medium'; else if (count >= 3) sizeClass = 'text-xs font-medium';
const colorClasses = [
'bg-rose-100 text-rose-700 dark:bg-rose-900/60 dark:text-rose-200',
'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/60 dark:text-emerald-200',
'bg-sky-100 text-sky-700 dark:bg-sky-900/60 dark:text-sky-200',
'bg-amber-100 text-amber-700 dark:bg-amber-900/60 dark:text-amber-200',
'bg-violet-100 text-violet-700 dark:bg-violet-900/60 dark:text-violet-200'
];
const color =
colorClasses[index % colorClasses.length];
return ( return (
<Link <Link
key={tag} key={tag}
href={`/tags/${slug}`} href={`/tags/${slug}`}
className={`${sizeClass} rounded-full px-2 py-0.5 transition ${color}`} className={`${sizeClass} rounded-full bg-accent-soft px-2 py-0.5 text-accent-textLight transition hover:bg-accent dark:text-accent-textDark`}
> >
{tag} {tag}
</Link> </Link>