@chainloyalty/react 1.1.0 → 1.3.0

package/src/pages/LeaderboardPage.tsx

@@ -0,0 +1,44 @@
+/**
+ * @chainloyalty/react - Leaderboard Page
+ * 
+ * A full-page wrapper for the Leaderboard component.
+ * Use this in your app's routing to display the leaderboard on a dedicated page.
+ * 
+ * Example usage in your app's router:
+ * ```tsx
+ * import { LeaderboardPage } from '@chainloyalty/react';
+ * 
+ * // Add to your routes
+ * { path: '/leaderboard', element: <LeaderboardPage walletAddress={userWallet} /> }
+ * ```
+ */
+
+import React from 'react';
+import { Leaderboard, type LeaderboardProps } from '../Leaderboard.js';
+
+export const LeaderboardPage: React.FC<LeaderboardProps> = (props) => {
+  return (
+    <div className="min-h-screen" style={{ backgroundColor: 'hsl(var(--background))' }}>
+      {/* Header */}
+      <div className="border-b" style={{ borderColor: 'hsl(var(--border))' }}>
+        <div className="container mx-auto px-4 py-6">
+          <h1 className="text-3xl font-bold" style={{ color: 'hsl(var(--foreground))' }}>
+            Leaderboard
+          </h1>
+          <p className="text-sm mt-1" style={{ color: 'hsl(var(--muted-foreground))' }}>
+            See how you rank against other community members
+          </p>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="container mx-auto px-4 py-8">
+        <div className="max-w-6xl mx-auto">
+          <Leaderboard {...props} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LeaderboardPage;

package/src/pages/RewardsDashboardPage.tsx

@@ -0,0 +1,44 @@
+/**
+ * @chainloyalty/react - RewardsDashboard Page
+ * 
+ * A full-page wrapper for the RewardsDashboard component.
+ * Use this in your app's routing to display rewards on a dedicated page.
+ * 
+ * Example usage in your app's router:
+ * ```tsx
+ * import { RewardsDashboardPage } from '@chainloyalty/react';
+ * 
+ * // Add to your routes
+ * { path: '/rewards', element: <RewardsDashboardPage walletAddress={userWallet} /> }
+ * ```
+ */
+
+import React from 'react';
+import { RewardsDashboard, type RewardsDashboardProps } from '../RewardsDashboard.js';
+
+export const RewardsDashboardPage: React.FC<RewardsDashboardProps> = (props) => {
+  return (
+    <div className="min-h-screen" style={{ backgroundColor: 'hsl(var(--background))' }}>
+      {/* Header */}
+      <div className="border-b" style={{ borderColor: 'hsl(var(--border))' }}>
+        <div className="container mx-auto px-4 py-6">
+          <h1 className="text-3xl font-bold" style={{ color: 'hsl(var(--foreground))' }}>
+            Your Rewards
+          </h1>
+          <p className="text-sm mt-1" style={{ color: 'hsl(var(--muted-foreground))' }}>
+            Track your points, badges, achievements, and tier level
+          </p>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="container mx-auto px-4 py-8">
+        <div className="max-w-4xl mx-auto">
+          <RewardsDashboard {...props} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RewardsDashboardPage;