page wrapper

apps/website/components/shared/state/StatefulPageWrapper.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import React from 'react';
+import { PageWrapper, PageWrapperProps } from './PageWrapper';
+
+/**
+ * Stateful Page Wrapper - CLIENT SIDE ONLY
+ * Adds loading/error state management for client-side fetching
+ *
+ * Usage:
+ * ```typescript
+ * 'use client';
+ *
+ * export default function ProfilePage() {
+ *   const { data, isLoading, error, refetch } = usePageData(...);
+ *
+ *   return (
+ *     <StatefulPageWrapper
+ *       data={data}
+ *       isLoading={isLoading}
+ *       error={error}
+ *       retry={refetch}
+ *       Template={ProfileTemplate}
+ *       loading={{ variant: 'skeleton', message: 'Loading profile...' }}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export function StatefulPageWrapper<TData>({
+  data,
+  isLoading = false,
+  error = null,
+  retry,
+  Template,
+  loading,
+  errorConfig,
+  empty,
+  children,
+  className = '',
+}: PageWrapperProps<TData>) {
+  // Same implementation but with 'use client' for CSR-specific features
+  return (
+    <PageWrapper
+      data={data}
+      isLoading={isLoading}
+      error={error}
+      retry={retry}
+      Template={Template}
+      loading={loading}
+      errorConfig={errorConfig}
+      empty={empty}
+      className={className}
+    >
+      {children}
+    </PageWrapper>
+  );
+}
+
+// Re-export types for convenience
+export type { PageWrapperProps, PageWrapperLoadingConfig, PageWrapperErrorConfig, PageWrapperEmptyConfig } from './PageWrapper';