62 lines · 1.9 KB
| 1 | --- |
| 2 | import Base from './Base.astro'; |
| 3 | |
| 4 | interface Props { |
| 5 | owner: string; |
| 6 | repo: string; |
| 7 | activeTab?: 'code' | 'commits' | 'branches' | 'merge-requests' | 'settings'; |
| 8 | ref?: string; |
| 9 | } |
| 10 | |
| 11 | const { owner, repo, activeTab = 'code', ref } = Astro.props; |
| 12 | const repoPath = `/${owner}/${repo}`; |
| 13 | |
| 14 | const tabs = [ |
| 15 | { id: 'code', label: 'Code', href: repoPath }, |
| 16 | { id: 'merge-requests', label: 'Merge Requests', href: `${repoPath}/merge-requests` }, |
| 17 | { id: 'commits', label: 'Commits', href: `${repoPath}/commits${ref ? `/${ref}` : ''}` }, |
| 18 | { id: 'branches', label: 'Branches', href: `${repoPath}/branches` }, |
| 19 | { id: 'settings', label: 'Settings', href: `${repoPath}/settings` }, |
| 20 | ]; |
| 21 | --- |
| 22 | |
| 23 | <Base title={`${owner}/${repo}`}> |
| 24 | <div class="repo-header" style="background: var(--bg-secondary); border-bottom: 1px solid var(--border); padding: 16px 0 0;"> |
| 25 | <div class="container"> |
| 26 | <h1 style="font-size: 1.25rem; margin-bottom: 12px;"> |
| 27 | <a href={`/${owner}`} style="color: var(--text-link);">{owner}</a> |
| 28 | <span style="color: var(--text-muted); padding: 0 4px;">/</span> |
| 29 | <a href={repoPath} style="color: var(--text-link); font-weight: 600;">{repo}</a> |
| 30 | </h1> |
| 31 | |
| 32 | <div style="display: flex; gap: 0; border-bottom: none; margin-bottom: -1px;"> |
| 33 | {tabs.map((tab) => ( |
| 34 | <a |
| 35 | href={tab.href} |
| 36 | style={` |
| 37 | padding: 8px 16px; |
| 38 | font-size: 0.875rem; |
| 39 | color: ${activeTab === tab.id ? 'var(--text)' : 'var(--text-muted)'}; |
| 40 | font-weight: ${activeTab === tab.id ? '600' : '400'}; |
| 41 | border-bottom: 2px solid ${activeTab === tab.id ? '#f78166' : 'transparent'}; |
| 42 | text-decoration: none; |
| 43 | `} |
| 44 | > |
| 45 | {tab.label} |
| 46 | </a> |
| 47 | ))} |
| 48 | </div> |
| 49 | </div> |
| 50 | </div> |
| 51 | |
| 52 | <div class="container" style="padding-top: 20px;"> |
| 53 | <slot /> |
| 54 | </div> |
| 55 | </Base> |
| 56 | |
| 57 | <style> |
| 58 | .repo-header a:hover { |
| 59 | text-decoration: none !important; |
| 60 | } |
| 61 | </style> |
| 62 |