Template
Rami BitarandClaude Opus 5
7c6abb4648
- Gate the assistant on NEXT_PUBLIC_ENABLE_AI=1 (UI only; the /api/chat route still responds if called directly) - Chat model is openai/gpt-5.6-luna-pro with reasoning requested and sendReasoning enabled, rendered via the Reasoning component - Suggestion chips and reasoning come from ai-elements; attachments gain hover-card previews, left alignment, and render under the user message - Launcher: plain Button when closed, magicui RainbowButton when open - Tool results replace the collapsible Tool UI with a shimmer while running and a muted icon + summary line after, plus product previews - Commerce icons in place of the folder icon for collections - Add a thin announcement bar above the header; footer splits links and socials onto separate rows and clears the launcher corner - Add the shadcn base layer so Tailwind v4's bare `border` picks up the theme colour instead of currentColor Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016jWbNNJLksC1QG8z8845FX
86 lines
2.6 KiB
TypeScript
86 lines
2.6 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
RiInstagramLine,
|
|
RiTiktokLine,
|
|
RiFacebookFill,
|
|
} from '@remixicon/react';
|
|
|
|
export interface FooterLink {
|
|
label: string;
|
|
url: string;
|
|
}
|
|
|
|
interface FooterProps {
|
|
storeName?: string;
|
|
copyright?: string;
|
|
links?: FooterLink[];
|
|
instagramUrl?: string;
|
|
tiktokUrl?: string;
|
|
facebookUrl?: string;
|
|
}
|
|
|
|
const Footer: React.FC<FooterProps> = ({
|
|
storeName = 'Shop',
|
|
copyright,
|
|
links = [
|
|
{ label: 'Terms of Service', url: '/policies/terms-of-service' },
|
|
{ label: 'Privacy Policy', url: '/policies/privacy-policy' },
|
|
{ label: 'Refund Policy', url: '/policies/refund-policy' },
|
|
{ label: 'Shipping Policy', url: '/policies/shipping-policy' },
|
|
{ label: 'Subscription Policy', url: '/policies/subscription-policy' },
|
|
],
|
|
instagramUrl = '#',
|
|
tiktokUrl = '#',
|
|
facebookUrl = '#',
|
|
}) => {
|
|
const socials = [
|
|
{ label: 'Instagram', url: instagramUrl, Icon: RiInstagramLine },
|
|
{ label: 'TikTok', url: tiktokUrl, Icon: RiTiktokLine },
|
|
{ label: 'Facebook', url: facebookUrl, Icon: RiFacebookFill },
|
|
];
|
|
|
|
return (
|
|
<footer className="bg-background">
|
|
<div className="max-w-screen-2xl mx-auto px-8 py-10">
|
|
{/* Left-aligned: the bottom-right corner belongs to the floating
|
|
assistant launcher. Links and socials sit on separate rows so the
|
|
icons aren't crammed onto the end of the link list. */}
|
|
<div className="flex flex-col items-center gap-y-5 sm:items-start">
|
|
<nav className="flex flex-wrap items-center justify-center gap-x-5 gap-y-2 sm:justify-start">
|
|
{links.map((link) => (
|
|
<a
|
|
key={link.label}
|
|
href={link.url}
|
|
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
{link.label}
|
|
</a>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="flex flex-col-reverse items-center gap-3 sm:flex-row sm:gap-x-5">
|
|
<span className="flex items-center gap-x-4">
|
|
{socials.map(({ label, url, Icon }) => (
|
|
<a
|
|
key={label}
|
|
href={url}
|
|
aria-label={label}
|
|
className="text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
<Icon size={18} />
|
|
</a>
|
|
))}
|
|
</span>
|
|
|
|
<p className="text-sm text-muted-foreground leading-5">
|
|
{copyright || `© ${storeName}. All rights reserved.`}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
};
|
|
|
|
export default Footer;
|