fix: apply designer agent improvements to src/components/public/PublicFooter.tsx
This commit is contained in:
parent
1aa365177f
commit
6291cc7ffe
|
|
@ -0,0 +1,123 @@
|
|||
import React from 'react'
|
||||
import Link from 'next/link'
|
||||
import { Zap, Github, Twitter, Rss } from 'lucide-react'
|
||||
|
||||
const FOOTER_LINKS = {
|
||||
Content: [
|
||||
{ label: 'Blog', href: '/blog' },
|
||||
{ label: 'About', href: '/about' },
|
||||
],
|
||||
Admin: [
|
||||
{ label: 'Dashboard', href: '/admin' },
|
||||
{ label: 'Posts', href: '/admin/posts' },
|
||||
{ label: 'Pages', href: '/admin/pages' },
|
||||
{ label: 'Settings', href: '/admin/settings' },
|
||||
],
|
||||
}
|
||||
|
||||
const SOCIAL_LINKS = [
|
||||
{ label: 'GitHub', href: 'https://github.com/cupadev', icon: Github },
|
||||
{ label: 'Twitter', href: 'https://twitter.com/cupadev', icon: Twitter },
|
||||
{ label: 'RSS Feed', href: '/rss.xml', icon: Rss },
|
||||
]
|
||||
|
||||
export default function PublicFooter() {
|
||||
const year = new Date().getFullYear()
|
||||
|
||||
return (
|
||||
<footer
|
||||
role="contentinfo"
|
||||
className="border-t border-slate-100 bg-surface-muted"
|
||||
>
|
||||
<div className="section py-12 lg:py-16">
|
||||
<div className="container-cms">
|
||||
<div className="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-4">
|
||||
|
||||
{/* Brand column */}
|
||||
<div className="sm:col-span-2 lg:col-span-2">
|
||||
<Link
|
||||
href="/"
|
||||
aria-label="CupaDev CMS — Home"
|
||||
className="inline-flex items-center gap-2.5 group mb-4
|
||||
focus-visible:outline-none focus-visible:ring-2
|
||||
focus-visible:ring-brand-500 rounded-lg"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="flex h-8 w-8 items-center justify-center rounded-lg
|
||||
bg-brand-600 text-white"
|
||||
>
|
||||
<Zap size={16} strokeWidth={2.5} />
|
||||
</span>
|
||||
<span className="font-display font-semibold text-ink text-sm tracking-tight">
|
||||
CupaDev
|
||||
<span className="text-brand-600 ml-0.5">CMS</span>
|
||||
</span>
|
||||
</Link>
|
||||
<p className="text-sm text-ink-muted leading-relaxed max-w-xs text-pretty">
|
||||
A modern, fast content management system built with Next.js 14,
|
||||
Tailwind CSS, and TypeScript.
|
||||
</p>
|
||||
{/* Social links */}
|
||||
<div className="mt-5 flex items-center gap-2">
|
||||
{SOCIAL_LINKS.map(({ label, href, icon: Icon }) => (
|
||||
<a
|
||||
key={label}
|
||||
href={href}
|
||||
aria-label={label}
|
||||
target={href.startsWith('http') ? '_blank' : undefined}
|
||||
rel={href.startsWith('http') ? 'noopener noreferrer' : undefined}
|
||||
className="flex h-9 w-9 items-center justify-center rounded-xl
|
||||
text-ink-subtle hover:text-ink hover:bg-surface-subtle
|
||||
transition-colors focus-visible:outline-none
|
||||
focus-visible:ring-2 focus-visible:ring-brand-500"
|
||||
>
|
||||
<Icon size={16} aria-hidden="true" />
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Link columns */}
|
||||
{Object.entries(FOOTER_LINKS).map(([title, links]) => (
|
||||
<div key={title}>
|
||||
<h2 className="text-xs font-semibold uppercase tracking-widest
|
||||
text-ink-subtle mb-4">
|
||||
{title}
|
||||
</h2>
|
||||
<ul role="list" className="space-y-2.5">
|
||||
{links.map(({ label, href }) => (
|
||||
<li key={href}>
|
||||
<Link
|
||||
href={href}
|
||||
className="text-sm text-ink-muted hover:text-brand-600
|
||||
transition-colors focus-visible:outline-none
|
||||
focus-visible:ring-2 focus-visible:ring-brand-500
|
||||
rounded"
|
||||
>
|
||||
{label}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Bottom bar */}
|
||||
<div className="mt-10 pt-6 border-t border-slate-200 flex flex-col sm:flex-row
|
||||
items-center justify-between gap-3">
|
||||
<p className="text-xs text-ink-subtle">
|
||||
© {year} CupaDev. All rights reserved.
|
||||
</p>
|
||||
<p className="text-xs text-ink-subtle">
|
||||
Built with{' '}
|
||||
<span aria-label="love" role="img">❤️</span>
|
||||
{' '}using Next.js & Tailwind CSS
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in New Issue