| 1 | /** |
| 2 | * ExternalLinks - 外部链接组件（Docs 和 GitHub） |
| 3 | * 支持桌面端（collapsed/expanded）和移动端样式 |
| 4 | */ |
| 5 | |
| 6 | 'use client' |
| 7 | |
| 8 | import { BookOpen } from 'lucide-react' |
| 9 | import { DOCS_URL, GITHUB_REPO } from '../constants' |
| 10 | import { useGitHubStars } from '../hooks/useGitHubStars' |
| 11 | |
| 12 | /** GitHub SVG 图标 */ |
| 13 | function GitHubIcon({ className }: { className?: string }) { |
| 14 | return ( |
| 15 | <svg className={className} viewBox="0 0 24 24" fill="currentColor"> |
| 16 | <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" /> |
| 17 | </svg> |
| 18 | ) |
| 19 | } |
| 20 | |
| 21 | interface ExternalLinksProps { |
| 22 | /** 桌面端：是否为收缩状态 */ |
| 23 | collapsed?: boolean |
| 24 | /** 是否为移动端样式 */ |
| 25 | isMobile?: boolean |
| 26 | } |
| 27 | |
| 28 | /** |
| 29 | * 外部链接组件 |
| 30 | * - 桌面端 collapsed: 图标垂直排列 |
| 31 | * - 桌面端 expanded: 水平排列，带标签 |
| 32 | * - 移动端: 水平排列，带标签 |
| 33 | */ |
| 34 | export function ExternalLinks({ collapsed = false, isMobile = false }: ExternalLinksProps) { |
| 35 | const starCount = useGitHubStars() |
| 36 | |
| 37 | // 桌面端收缩状态：图标垂直排列 |
| 38 | if (collapsed && !isMobile) { |
| 39 | return ( |
| 40 | <div className="flex flex-col items-center gap-1.5 pt-3 mt-2 border-t border-sidebar-border"> |
| 41 | <a |
| 42 | href={DOCS_URL} |
| 43 | target="_blank" |
| 44 | rel="noopener noreferrer" |
| 45 | className="flex items-center justify-center w-8 h-8 rounded-md text-muted-foreground/70 hover:bg-accent hover:text-foreground transition-colors" |
| 46 | title="Docs" |
| 47 | > |
| 48 | <BookOpen className="w-3.5 h-3.5" /> |
| 49 | </a> |
| 50 | <a |
| 51 | href={`https://github.com/${GITHUB_REPO}`} |
| 52 | target="_blank" |
| 53 | rel="noopener noreferrer" |
| 54 | className="flex items-center justify-center w-8 h-8 rounded-md text-muted-foreground/70 hover:bg-accent hover:text-foreground transition-colors" |
| 55 | title={`GitHub Stars: ${starCount}`} |
| 56 | > |
| 57 | <GitHubIcon className="w-3.5 h-3.5" /> |
| 58 | </a> |
| 59 | </div> |
| 60 | ) |
| 61 | } |
| 62 | |
| 63 | // 移动端样式 |
| 64 | if (isMobile) { |
| 65 | return ( |
| 66 | <div className="flex items-center justify-center gap-3 border-t border-border py-3"> |
| 67 | <a |
| 68 | href={DOCS_URL} |
| 69 | target="_blank" |
| 70 | rel="noopener noreferrer" |
| 71 | className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full border border-border/60 text-xs font-medium text-muted-foreground hover:bg-muted hover:text-foreground transition-all" |
| 72 | > |
| 73 | <BookOpen className="w-3.5 h-3.5" /> |
| 74 | Docs |
| 75 | </a> |
| 76 | <a |
| 77 | href={`https://github.com/${GITHUB_REPO}`} |
| 78 | target="_blank" |
| 79 | rel="noopener noreferrer" |
| 80 | className="inline-flex items-center rounded-full border border-border/60 overflow-hidden hover:border-border transition-all" |
| 81 | > |
| 82 | <span className="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"> |
| 83 | <GitHubIcon className="w-3.5 h-3.5" /> |
| 84 | Star |
| 85 | </span> |
| 86 | <span className="px-2 py-1.5 text-xs font-semibold text-muted-foreground bg-muted/50 border-l border-border/60"> |
| 87 | {starCount} |
| 88 | </span> |
| 89 | </a> |
| 90 | </div> |
| 91 | ) |
| 92 | } |
| 93 | |
| 94 | // 桌面端展开状态：水平排列 |
| 95 | return ( |
| 96 | <div className="flex items-center justify-center gap-3 pt-3 mt-2 border-t border-sidebar-border"> |
| 97 | <a |
| 98 | href={DOCS_URL} |
| 99 | target="_blank" |
| 100 | rel="noopener noreferrer" |
| 101 | className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full border border-border/60 text-[11px] font-medium text-muted-foreground/80 hover:bg-accent hover:text-foreground hover:border-border transition-all" |
| 102 | > |
| 103 | <BookOpen className="w-3 h-3" /> |
| 104 | Docs |
| 105 | </a> |
| 106 | <a |
| 107 | href={`https://github.com/${GITHUB_REPO}`} |
| 108 | target="_blank" |
| 109 | rel="noopener noreferrer" |
| 110 | className="inline-flex items-center rounded-full border border-border/60 overflow-hidden hover:border-border transition-all" |
| 111 | > |
| 112 | <span className="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-[11px] font-medium text-muted-foreground/80 hover:bg-accent hover:text-foreground transition-colors"> |
| 113 | <GitHubIcon className="w-3 h-3" /> |
| 114 | Star |
| 115 | </span> |
| 116 | <span className="px-2 py-1.5 text-[11px] font-semibold text-muted-foreground bg-accent/30 border-l border-border/60"> |
| 117 | {starCount} |
| 118 | </span> |
| 119 | </a> |
| 120 | </div> |
| 121 | ) |
| 122 | } |
| 123 |