Add SubscribeGuard component to manage subscription access and loading state

src/app/coffee-abonnements/components/SubscribeGuard.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import PageLayout from '../../components/PageLayout';
+import { useSubscribeGuard } from '../hooks/useSubscribeGuard';
+
+type Props = {
+  children: ReactNode;
+};
+
+export default function SubscribeGuard({ children }: Props) {
+  const { isChecking, isAllowed } = useSubscribeGuard();
+
+  if (!isAllowed) {
+    return (
+      <PageLayout contentClassName="flex-1 relative w-full">
+        <div className="min-h-screen bg-[radial-gradient(circle_at_top_left,rgba(251,191,36,0.10),transparent_22%),radial-gradient(circle_at_top_right,rgba(56,189,248,0.10),transparent_24%),linear-gradient(180deg,#f8fafc_0%,#f8fafc_50%,#eef2ff_100%)]">
+          <div className="max-w-455 mx-auto px-4 sm:px-6 xl:px-10 py-8">
+            <div className="rounded-[28px] border border-white/80 bg-white/90 p-8 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur text-center">
+              <div className="mx-auto h-10 w-10 rounded-full border-2 border-slate-200 border-t-slate-900 animate-spin" />
+              <p className="mt-4 text-sm text-slate-600">
+                {isChecking ? 'Checking subscription access...' : 'Redirecting...'}
+              </p>
+            </div>
+          </div>
+        </div>
+      </PageLayout>
+    );
+  }
+
+  return <>{children}</>;
+}