feat: consistent ExternalLink on all channel names — Facebook + OtherChannels

Facebook pageName now links to facebook.com/{url} with ExternalLink icon.
OtherChannels: moved ExternalLink from right-end to inline with channel
name, matching the Instagram/YouTube pattern.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
claude/bold-hawking
Haewon Kam 2026-04-04 16:23:29 +09:00
parent 2a35108149
commit 4928d24ace
2 changed files with 26 additions and 12 deletions

View File

@ -59,7 +59,19 @@ function PageCard({ page, index }: { key?: string | number; page: FacebookPage;
)} )}
</div> </div>
<h3 className="font-bold text-lg text-[#0A1128] mb-1">{page.pageName}</h3> <h3 className="font-bold text-lg text-[#0A1128] mb-1">
{page.url ? (
<a
href={page.url.startsWith('http') ? page.url : `https://www.facebook.com/${page.url}`}
target="_blank"
rel="noopener noreferrer"
className="hover:text-[#6C5CE7] inline-flex items-center gap-1"
>
{page.pageName}
<ExternalLink size={13} className="text-[#6C5CE7]" />
</a>
) : page.pageName}
</h3>
<p className="text-xs text-slate-500 mb-4">{page.category}</p> <p className="text-xs text-slate-500 mb-4">{page.category}</p>
{/* Metrics grid */} {/* Metrics grid */}

View File

@ -44,20 +44,22 @@ export default function OtherChannels({ channels, website }: OtherChannelsProps)
> >
<StatusIcon size={20} className={cfg.color} /> <StatusIcon size={20} className={cfg.color} />
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<p className="text-sm font-semibold text-[#0A1128]">{ch.name}</p> {ch.url ? (
<a
href={ch.url.startsWith('http') ? ch.url : `https://${ch.url}`}
target="_blank"
rel="noopener noreferrer"
className="text-sm font-semibold text-[#0A1128] hover:text-[#6C5CE7] inline-flex items-center gap-1"
>
{ch.name}
<ExternalLink size={12} className="text-[#6C5CE7] shrink-0" />
</a>
) : (
<p className="text-sm font-semibold text-[#0A1128]">{ch.name}</p>
)}
<p className="text-sm text-slate-500">{ch.details}</p> <p className="text-sm text-slate-500">{ch.details}</p>
</div> </div>
<span className={`text-xs font-medium ${cfg.color}`}>{cfg.label}</span> <span className={`text-xs font-medium ${cfg.color}`}>{cfg.label}</span>
{ch.url && (
<a
href={ch.url}
target="_blank"
rel="noopener noreferrer"
className="text-[#6C5CE7] hover:underline"
>
<ExternalLink size={16} />
</a>
)}
</motion.div> </motion.div>
); );
})} })}