commerce/components/ui/preview-banner/preview-banner.tsx
2023-08-14 23:22:54 +02:00

31 lines
859 B
TypeScript

'use client';
import { useTranslations } from 'next-intl';
import Link from 'next/link';
interface PreviewBannerProps {
title?: string;
}
const PreviewBanner = ({ title }: PreviewBannerProps) => {
const t = useTranslations('ui.previewBanner');
return (
<div className="fixed bottom-0 right-0 z-50 flex w-full items-center justify-between border-t border-high-contrast bg-app p-6">
{title && (
<p className="text-lg">
{t('titlePart')} <span className="font-bold italic">{title}</span>
</p>
)}
<Link
className="bg-blue px-6 py-4 text-center font-bold text-white transition-colors duration-100 hover:bg-opacity-80 focus:bg-opacity-80"
href="/api/exit-preview"
prefetch={false}
>
{t('exitPreviewLabel')}
</Link>
</div>
);
};
export default PreviewBanner;