73 lines
2.6 KiB
TypeScript
73 lines
2.6 KiB
TypeScript
import React from 'react';
|
|
import { Link, usePage } from '@inertiajs/react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import MarketingLayout from '@/layouts/mainWebsite';
|
|
import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
|
|
|
|
type LegalShowProps = {
|
|
seoTitle: string;
|
|
title: string;
|
|
content: string;
|
|
effectiveFrom?: string | null;
|
|
effectiveFromLabel?: string | null;
|
|
versionLabel?: string | null;
|
|
slug: string;
|
|
};
|
|
|
|
const LegalShow: React.FC<LegalShowProps> = (props) => {
|
|
const { seoTitle, title, content, effectiveFromLabel, versionLabel, slug } = props;
|
|
const { t } = useTranslation('marketing');
|
|
const { localizedPath } = useLocalizedRoutes();
|
|
const { auth } = usePage<{ auth?: { user?: { id?: number } | null } }>().props;
|
|
const showWithdrawalAction = slug === 'widerrufsbelehrung' && Boolean(auth?.user);
|
|
|
|
return (
|
|
<MarketingLayout title={seoTitle}>
|
|
|
|
<section className="bg-white py-16">
|
|
<div className="mx-auto max-w-4xl px-6">
|
|
<header className="mb-10">
|
|
<p className="text-sm uppercase tracking-[0.2em] text-gray-400">
|
|
Die Fotospiel App
|
|
</p>
|
|
<h1 className="mt-2 text-3xl font-semibold text-gray-900 md:text-4xl">
|
|
{title}
|
|
</h1>
|
|
{(effectiveFromLabel || versionLabel) && (
|
|
<p className="mt-3 text-sm text-gray-500">
|
|
{[effectiveFromLabel, versionLabel].filter(Boolean).join(' · ')}
|
|
</p>
|
|
)}
|
|
</header>
|
|
|
|
{showWithdrawalAction && (
|
|
<div className="mb-10 rounded-2xl border border-pink-200/60 bg-pink-50 p-6">
|
|
<h2 className="text-lg font-semibold text-gray-900">
|
|
{t('withdrawal.cta_title')}
|
|
</h2>
|
|
<p className="mt-2 text-sm text-gray-600">
|
|
{t('withdrawal.cta_body')}
|
|
</p>
|
|
<Link
|
|
href={localizedPath('/widerruf')}
|
|
className="mt-4 inline-flex items-center justify-center rounded-full bg-gray-900 px-5 py-2 text-sm font-semibold text-white transition hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900"
|
|
>
|
|
{t('withdrawal.cta_button')}
|
|
</Link>
|
|
</div>
|
|
)}
|
|
|
|
<article
|
|
className="prose prose-slate max-w-none prose-headings:font-display"
|
|
dangerouslySetInnerHTML={{ __html: content }}
|
|
/>
|
|
</div>
|
|
</section>
|
|
</MarketingLayout>
|
|
);
|
|
};
|
|
|
|
LegalShow.layout = (page: React.ReactNode) => page;
|
|
|
|
export default LegalShow;
|