aidan/aidxnCC
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat/fix: ai page improvements, bump, update ccusage

Browse source 
add more content on ai, add heatmap, fix header glow, add price to ai tools, fix NowPlaying style issue, new ccombine utility, better claude code usage page w/ model labels+better typing, bump, update ccusage (restore old dates)
This commit is contained in:
Aidan 2025-09-13 02:46:53 -04:00
parent 57dd627ca3
commit 77a6266c71
20 changed files with 1380 additions and 444 deletions
Download patch file Download diff file Expand all files Collapse all files

38
app/ai/components/AIStack.tsx
View file

@ -10,8 +10,8 @@ export default function AIStack({ tools }: AIStackProps) {
const getStatusColor = (status: string) => {
switch (status) {
case 'primary': return 'text-green-400 border-green-400 bg-green-400/10'
case 'active': return 'text-blue-400 border-blue-400 bg-blue-400/10'
case 'occasional': return 'text-yellow-400 border-yellow-400 bg-yellow-400/10'
case 'active': return 'text-green-300 border-green-300 bg-green-300/10'
case 'occasional': return 'text-orange-300 border-orange-300 bg-orange-300/10'
default: return 'text-gray-400 border-gray-400'
}
}
@ -25,6 +25,12 @@ export default function AIStack({ tools }: AIStackProps) {
}
}
const formatPrice = (price: number) => {
if (price === 0) return 'Free'
if (price % 1 === 0) return `$${price}/mo`
return `$${price.toFixed(2)}/mo`
}
return (
<section className="p-4 sm:p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
<div className="flex flex-row justify-between">
@ -38,15 +44,35 @@ export default function AIStack({ tools }: AIStackProps) {
{tools.map((tool, index) => (
<div key={index} className="p-4 border border-gray-700 rounded-lg hover:border-gray-500 transition-all duration-300 flex flex-col">
<div className="flex items-start justify-between mb-3 flex-1">
<div className="flex items-center gap-3">
<div className="flex items-center gap-3 flex-1">
{tool.icon && <tool.icon className="text-2xl text-gray-300" />}
{tool.svg && (
<div className="w-6 h-6 text-gray-300 fill-current">
{tool.svg}
</div>
)}
<div>
<h3 className="font-semibold text-gray-200">{tool.name}</h3>
<div className="flex-1">
<div className="flex items-center justify-between">
<h3 className="font-semibold text-gray-200">{tool.name}</h3>
{tool.price !== undefined && (
<div className="flex items-center gap-2">
{tool.discountedPrice !== undefined ? (
<>
<span className="text-gray-500 line-through">
{formatPrice(tool.price)}
</span>
<span className="text-gray-200">
{formatPrice(tool.discountedPrice)}
</span>
</>
) : (
<span className="text-gray-200">
{formatPrice(tool.price)}
</span>
)}
</div>
)}
</div>
<p className="text-sm text-gray-400">{tool.description}</p>
</div>
</div>
@ -58,7 +84,7 @@ export default function AIStack({ tools }: AIStackProps) {
<span className="flex flex-row items-center gap-4">
{tool.link && (
<Link href={tool.link} className="text-blue-400 hover:text-blue-300 text-sm" target="_blank" rel="noopener noreferrer">
View →
Visit →
</Link>
)}
{tool.usage && (

7
app/ai/components/TopPick.tsx
View file

@ -17,6 +17,9 @@ export default function TopPick() {
<h3 className="text-3xl font-bold text-gray-100">Claude</h3>
<p className="text-gray-400">by Anthropic</p>
<div className="flex items-center gap-2 mt-2">
<Link href="https://claude.ai" className="text-blue-400 hover:text-blue-300 flex items-center gap-1">
Visit <ChevronRight size={16} />
</Link>
<Link href="/ai/claude" className="text-blue-400 hover:text-blue-300 flex items-center gap-1">
My Usage <ChevronRight size={16} />
</Link>
@ -31,8 +34,8 @@ export default function TopPick() {
<div className='flex flex-col items-center gap-y-6 sm:flex-row sm:justify-between'>
<div className="flex gap-2 flex-wrap">
<span className="px-2 py-1 bg-gray-700 rounded text-xs text-gray-300">Top-Tier Tool Calling</span>
<span className="px-2 py-1 bg-gray-700 rounded text-xs text-gray-300">Max Plan is High Value</span>
<span className="px-2 py-1 bg-gray-700 rounded text-xs text-gray-300">Fast Interface</span>
<span className="px-2 py-1 bg-gray-700 rounded text-xs text-gray-300">High-Value Plans</span>
<span className="px-2 py-1 bg-gray-700 rounded text-xs text-gray-300">Good Speed</span>
</div>
</div>
</div>