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