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

design/fix/clean: minor design tweaks and improvements, update ccusage, add Perplexity to /ai, ToolReviews -> FavoriteTools for flow

Browse source
This commit is contained in:
Aidan 2025-09-07 18:47:41 -04:00
parent 7121ec926f
commit e706ae8307
7 changed files with 111 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { Bot } from 'lucide-react'
import { TbStack2 } from 'react-icons/tb'
import Link from '@/components/objects/Link'
import type { AITool } from '../types'
@ -27,10 +27,13 @@ export default function AIStack({ tools }: AIStackProps) {
return (
<section className="p-4 sm:p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
<h2 className="text-2xl font-semibold mb-6 text-gray-200 flex items-center gap-2">
<Bot size={24} />
My AI Stack
</h2>
<div className="flex flex-row justify-between">
<h2 className="text-2xl font-semibold mb-6 text-gray-200 flex items-center gap-2">
<TbStack2 size={24} />
My AI Stack
</h2>
<p className="text-muted-foreground">The AI tools I use as a part of my routine and workflow.</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{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">
@ -54,7 +57,7 @@ export default function AIStack({ tools }: AIStackProps) {
</span>
<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">
<Link href={tool.link} className="text-blue-400 hover:text-blue-300 text-sm" target="_blank" rel="noopener noreferrer">
View →
</Link>
)}

13
app/ai/components/FavoriteModels.tsx
View file

@ -1,4 +1,4 @@
import { Star } from 'lucide-react'
import { Brain, Star } from 'lucide-react'
import type { FavoriteModel } from '../types'
interface FavoriteModelsProps {
@ -8,10 +8,13 @@ interface FavoriteModelsProps {
export default function FavoriteModels({ models }: FavoriteModelsProps) {
return (
<section className="p-4 sm:p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
<h2 className="text-2xl font-semibold mb-6 text-gray-200 flex items-center gap-2">
<Star size={24} />
Favorite Models
</h2>
<div className="flex flex-row justify-between">
<h2 className="text-2xl font-semibold mb-6 text-gray-200 flex items-center gap-2">
<Brain size={24} />
Favorite Models
</h2>
<p className="text-muted-foreground italic text-sm">Based on personal preference</p>
</div>
<div className="space-y-4">
{models.map((model, index) => (
<div key={index} className="p-4 bg-gray-800/50 rounded-lg">

18
app/ai/components/ToolReviews.tsx → app/ai/components/FavoriteTools.tsx
View file

@ -1,17 +1,21 @@
import { MessageSquare, Star } from 'lucide-react'
import { Star } from 'lucide-react'
import { TbTool } from 'react-icons/tb'
import type { AIReview } from '../types'
interface ToolReviewsProps {
interface FavoriteToolsProps {
reviews: AIReview[]
}
export default function ToolReviews({ reviews }: ToolReviewsProps) {
export default function FavoriteTools({ reviews }: FavoriteToolsProps) {
return (
<section className="p-4 sm:p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
<h2 className="text-2xl font-semibold mb-6 text-gray-200 flex items-center gap-2">
<MessageSquare size={24} />
Tool Reviews
</h2>
<div className="flex flex-row justify-between">
<h2 className="text-2xl font-semibold mb-6 text-gray-200 flex items-center gap-2">
<TbTool size={24} />
Favorite Tools
</h2>
<p className="text-muted-foreground italic text-sm">Based on personal preference</p>
</div>
<div className="space-y-4">
{reviews.map((review, index) => (
<div key={index} className="p-4 bg-gray-800/50 rounded-lg">

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

@ -6,8 +6,8 @@ export default function TopPick() {
return (
<div className="px-4 mb-4">
<h2 className="text-4xl font-semibold mb-6 text-gray-200 flex items-center gap-2">
<Trophy size={32} />
Top Pick of 2025
<Trophy size={32} className="text-orange-300" />
Top Pick of <i className="-ml-[1.55px]">2025</i>
</h2>
<div className="p-6 sm:p-8 border-2 border-[#c15f3c] rounded-lg bg-orange-500/5">
<div className="grid md:grid-cols-2 gap-6">
@ -18,7 +18,7 @@ export default function TopPick() {
<p className="text-gray-400">by Anthropic</p>
<div className="flex items-center gap-2 mt-2">
<Link href="/ai/claude" className="text-blue-400 hover:text-blue-300 flex items-center gap-1">
View My Usage <ChevronRight size={16} />
My Usage <ChevronRight size={16} />
</Link>
</div>
</div>
@ -30,15 +30,9 @@ export default function TopPick() {
</p>
<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">Claude Code</span>
<span className="px-2 py-1 bg-gray-700 rounded text-xs text-gray-300">Best Tool Calling</span>
<span className="px-2 py-1 bg-gray-700 rounded text-xs text-gray-300">High Value in Max Plan</span>
<span className="px-2 py-1 bg-gray-700 rounded text-xs text-gray-300">Quite Fast Interface</span>
</div>
<div className="flex items-center justify-end">
<span className="px-3 py-1 bg-[#c15f3c]/20 text-[#c15f3c] rounded-full text-sm font-medium">
Top Overall Pick
</span>
<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>
</div>
</div>
</div>