Files
awesome-app/components/layout/app-footer.tsx

38 lines
1.4 KiB
TypeScript
Raw Normal View History

feat: implement comprehensive UI/UX improvements This commit implements 7 requested improvements: 1. Add footer component to all pages - Created reusable AppFooter component - Added to layout.tsx with flex-1 main container - Includes links to Legal, Disclaimer, Imprint, GitHub 2. Change search highlight from yellow to more discreet color - Updated mark styling with purple theme colors - Uses color-mix for theme-aware transparency - Added subtle border-bottom for better visibility 3. Strip markdown from search results - Created stripMarkdown function - Removes HTML tags, markdown links, images, formatting - Shows clean text descriptions only 4. Add page number links to pagination - Created getPageNumbers function with smart ellipsis - Shows current page ±2 pages with first/last always visible - Example: 1 ... 5 6 [7] 8 9 ... 20 5. Adjust README badge display to be inline - Custom marked renderer detects badges (shields.io, badgen, etc.) - Applies inline-block with !my-0 !mx-1 align-middle classes - Badges now display inline in paragraph flow 6. Fix relative image URLs in READMEs - Custom image renderer converts relative to absolute GitHub URLs - Handles ./path and path patterns - Converts to raw.githubusercontent.com URLs - Also handles /blob/ URLs conversion 7. Fix command menu highlight contrast - Reuses mark styling from search highlights - Consistent purple theme colors across app 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-29 09:27:01 +01:00
import Link from 'next/link'
export function AppFooter() {
return (
<footer className="border-t border-border/40 bg-background/80 backdrop-blur-sm px-6 py-12 lg:px-8">
feat: implement comprehensive UI/UX improvements This commit implements 7 requested improvements: 1. Add footer component to all pages - Created reusable AppFooter component - Added to layout.tsx with flex-1 main container - Includes links to Legal, Disclaimer, Imprint, GitHub 2. Change search highlight from yellow to more discreet color - Updated mark styling with purple theme colors - Uses color-mix for theme-aware transparency - Added subtle border-bottom for better visibility 3. Strip markdown from search results - Created stripMarkdown function - Removes HTML tags, markdown links, images, formatting - Shows clean text descriptions only 4. Add page number links to pagination - Created getPageNumbers function with smart ellipsis - Shows current page ±2 pages with first/last always visible - Example: 1 ... 5 6 [7] 8 9 ... 20 5. Adjust README badge display to be inline - Custom marked renderer detects badges (shields.io, badgen, etc.) - Applies inline-block with !my-0 !mx-1 align-middle classes - Badges now display inline in paragraph flow 6. Fix relative image URLs in READMEs - Custom image renderer converts relative to absolute GitHub URLs - Handles ./path and path patterns - Converts to raw.githubusercontent.com URLs - Also handles /blob/ URLs conversion 7. Fix command menu highlight contrast - Reuses mark styling from search highlights - Consistent purple theme colors across app 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-29 09:27:01 +01:00
<div className="mx-auto max-w-7xl">
<div className="flex flex-col items-center justify-between gap-4 sm:flex-row">
<div className="text-center sm:text-left">
<div className="gradient-text mb-2 text-xl font-bold">Awesome</div>
<p className="text-sm text-muted-foreground">
Built with 💜💗💛 and maximum awesomeness
</p>
</div>
<div className="flex flex-wrap justify-center gap-6 text-sm">
<Link href="/legal" className="text-muted-foreground hover:text-primary">
Legal
</Link>
<Link href="/disclaimer" className="text-muted-foreground hover:text-primary">
Disclaimer
</Link>
<Link href="/imprint" className="text-muted-foreground hover:text-primary">
Imprint
</Link>
<a
href="https://github.com/sindresorhus/awesome"
target="_blank"
rel="noopener noreferrer"
className="text-muted-foreground hover:text-primary"
>
GitHub
</a>
</div>
</div>
</div>
</footer>
)
}