Skip to content

Commit a8a4cd0

Browse files
Boshenclaude
Boshen
and
claude
committed
refactor: clean up GitHub Dependents page UI
- Remove four stats cards (Repositories, Packages, Top Stars, Total Dependents) - Remove badge from top-right corner - Make tab switcher more prominent and centered below header - Increase button size, text size, and visual prominence of tab switcher - Simplify header subtitle to be view-agnostic - Clean up unused imports and code 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
1 parent caf196b commit a8a4cd0

File tree

1 file changed

+36
-99
lines changed

1 file changed

+36
-99
lines changed

‎apps/dashboard/src/pages/DependentsPage.tsx‎

Lines changed: 36 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { PageHeader } from '@vibe/shared';
2-
import { Badge, Card, CardGrid } from '@vibe/ui';
3-
import { GitBranch, Star, Package, Users, ExternalLink, Clock, TrendingUp } from 'lucide-react';
2+
import { Card } from '@vibe/ui';
3+
import { GitBranch, ExternalLink, Clock, TrendingUp, Star } from 'lucide-react';
44
import { useState } from 'react';
55
import dependentsData from '../../../../data/dependents.json';
66
import { PageContainer } from '../components/layout/PageContainer';
@@ -57,110 +57,47 @@ function DependentsPage() {
5757
});
5858
});
5959

60-
// Calculate stats based on current view mode
61-
const totalRepos = Object.keys(data).length;
62-
const totalPackages = allPackages.length;
63-
64-
const currentDependents = viewMode === 'top' ? 'topDependents' : 'latestDependents';
65-
const totalDependents = allPackages.reduce((sum, pkg) => sum + pkg[currentDependents].length, 0);
66-
67-
// Get top dependent across all packages for current view
68-
const allDependents: Array<Dependent & { package: string; repo: string }> = [];
69-
allPackages.forEach(({ repo, package: pkg, topDependents, latestDependents }) => {
70-
const deps = viewMode === 'top' ? topDependents : latestDependents;
71-
deps.forEach(dep => {
72-
allDependents.push({ ...dep, package: pkg, repo });
73-
});
74-
});
75-
const topDependent = allDependents.sort((a, b) => b.stars - a.stars)[0];
60+
// No stats calculation needed since we removed the cards
7661

7762
return (
7863
<PageContainer>
7964
<PageHeader
8065
icon={<GitBranch className='text-purple-600 dark:text-purple-400' />}
8166
title='GitHub Dependents'
82-
subtitle={viewMode === 'top' ? 'Top repositories by stars that depend on our projects' : 'Most recent repositories that depend on our projects'}
83-
action={
84-
<div className='flex items-center gap-4'>
85-
<div className='flex rounded-lg bg-slate-100 dark:bg-slate-800 p-1'>
86-
<button
87-
onClick={() => setViewMode('top')}
88-
className={`px-3 py-1 rounded-md text-sm font-medium transition-all ${
89-
viewMode === 'top'
90-
? 'bg-white dark:bg-slate-700 text-purple-600 dark:text-purple-400 shadow-sm'
91-
: 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200'
92-
}`}
93-
>
94-
<span className='flex items-center gap-1'>
95-
<TrendingUp className='w-3.5 h-3.5' />
96-
Top by Stars
97-
</span>
98-
</button>
99-
<button
100-
onClick={() => setViewMode('latest')}
101-
className={`px-3 py-1 rounded-md text-sm font-medium transition-all ${
102-
viewMode === 'latest'
103-
? 'bg-white dark:bg-slate-700 text-purple-600 dark:text-purple-400 shadow-sm'
104-
: 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200'
105-
}`}
106-
>
107-
<span className='flex items-center gap-1'>
108-
<Clock className='w-3.5 h-3.5' />
109-
Most Recent
110-
</span>
111-
</button>
112-
</div>
113-
<Badge variant='info' size='md'>
114-
{totalDependents} {viewMode === 'top' ? 'Top' : 'Latest'} Dependents
115-
</Badge>
116-
</div>
117-
}
67+
subtitle='Repositories and packages that depend on our projects'
11868
/>
11969

120-
{/* Stats Cards */}
121-
<CardGrid className='grid-cols-1 md:grid-cols-4 mb-8'>
122-
<Card className='bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/20 border-purple-200 dark:border-purple-800'>
123-
<div className='flex items-center justify-between'>
124-
<div>
125-
<p className='text-sm font-medium text-purple-600 dark:text-purple-300'>Repositories</p>
126-
<p className='text-2xl font-bold text-purple-900 dark:text-white'>{totalRepos}</p>
127-
</div>
128-
<GitBranch className='w-8 h-8 text-purple-500' />
129-
</div>
130-
</Card>
131-
132-
<Card className='bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 border-blue-200 dark:border-blue-800'>
133-
<div className='flex items-center justify-between'>
134-
<div>
135-
<p className='text-sm font-medium text-blue-600 dark:text-blue-300'>Packages</p>
136-
<p className='text-2xl font-bold text-blue-900 dark:text-white'>{totalPackages}</p>
137-
</div>
138-
<Package className='w-8 h-8 text-blue-500' />
139-
</div>
140-
</Card>
141-
142-
<Card className='bg-gradient-to-br from-amber-50 to-amber-100 dark:from-amber-900/20 dark:to-amber-800/20 border-amber-200 dark:border-amber-800'>
143-
<div className='flex items-center justify-between'>
144-
<div>
145-
<p className='text-sm font-medium text-amber-600 dark:text-amber-300'>Top Stars</p>
146-
<p className='text-2xl font-bold text-amber-900 dark:text-white'>
147-
{topDependent ? topDependent.stars.toLocaleString() : '0'}
148-
</p>
149-
</div>
150-
<Star className='w-8 h-8 text-amber-500' />
151-
</div>
152-
</Card>
153-
154-
<Card className='bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/20 border-green-200 dark:border-green-800'>
155-
<div className='flex items-center justify-between'>
156-
<div>
157-
<p className='text-sm font-medium text-green-600 dark:text-green-300'>Total Dependents</p>
158-
<p className='text-2xl font-bold text-green-900 dark:text-white'>{totalDependents}</p>
159-
</div>
160-
<Users className='w-8 h-8 text-green-500' />
161-
</div>
162-
</Card>
163-
</CardGrid>
70+
{/* Tab Switcher */}
71+
<div className='mb-8 flex justify-center'>
72+
<div className='flex rounded-lg bg-slate-100 dark:bg-slate-800 p-1.5 shadow-sm'>
73+
<button
74+
onClick={() => setViewMode('top')}
75+
className={`px-6 py-3 rounded-md text-base font-semibold transition-all ${
76+
viewMode === 'top'
77+
? 'bg-white dark:bg-slate-700 text-purple-600 dark:text-purple-400 shadow-md'
78+
: 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200'
79+
}`}
80+
>
81+
<span className='flex items-center gap-2'>
82+
<TrendingUp className='w-5 h-5' />
83+
Top by Stars
84+
</span>
85+
</button>
86+
<button
87+
onClick={() => setViewMode('latest')}
88+
className={`px-6 py-3 rounded-md text-base font-semibold transition-all ${
89+
viewMode === 'latest'
90+
? 'bg-white dark:bg-slate-700 text-purple-600 dark:text-purple-400 shadow-md'
91+
: 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200'
92+
}`}
93+
>
94+
<span className='flex items-center gap-2'>
95+
<Clock className='w-5 h-5' />
96+
Most Recent
97+
</span>
98+
</button>
99+
</div>
100+
</div>
164101

165102
{/* All Packages in 2 Column Grid */}
166103
<div className='grid grid-cols-1 lg:grid-cols-2 gap-6'>
@@ -170,7 +107,7 @@ function DependentsPage() {
170107
<Card key={`${repo}/${pkg}`} className='p-6'>
171108
<div className='mb-4 flex items-center justify-between'>
172109
<div className='flex items-center gap-2'>
173-
<Package className='w-4 h-4' />
110+
<GitBranch className='w-4 h-4' />
174111
<span className='text-sm text-slate-600 dark:text-slate-400'>{repo}</span>
175112
</div>
176113
<h3 className='text-lg font-semibold'>

0 commit comments

Comments
 (0)