Upload pages/index.js with huggingface_hub

pages/index.js

@@ -0,0 +1,154 @@
+import React, { useEffect, useState } from 'react';
+import TmaButton from '../components/TmaButton';
+import TmaInput from '../components/TmaInput';
+import TmaCard from '../components/TmaCard';
+import TmaLoader from '../components/TmaLoader';
+
+export default function Home() {
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [formData, setFormData] = useState({
+    name: '',
+    message: '',
+  });
+  const [response, setResponse] = useState(null);
+
+  // Initialize Telegram WebApp SDK
+  useEffect(() => {
+    if (typeof window !== 'undefined' && window.Telegram?.WebApp) {
+      const tg = window.Telegram.WebApp;
+      
+      // Expand the app to full height
+      tg.expand();
+      
+      // Set theme colors based on user's Telegram theme
+      document.body.style.backgroundColor = tg.themeParams.bg_color || '#ffffff';
+      
+      // Initialize user data if available
+      if (tg.initDataUnsafe?.user) {
+        setUser(tg.initDataUnsafe.user);
+        setFormData(prev => ({
+          ...prev,
+          name: tg.initDataUnsafe.user.first_name || '',
+        }));
+      }
+      
+      setLoading(false);
+    } else {
+      // Fallback for development environment (non-Telegram)
+      setLoading(false);
+    }
+  }, []);
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+
+    try {
+      // Simulate API call
+      await new Promise(resolve => setTimeout(resolve, 1500));
+      setResponse({
+        status: 'success',
+        data: `Hello, ${formData.name}! Your message has been sent successfully.`,
+      });
+    } catch (error) {
+      setResponse({
+        status: 'error',
+        data: 'Something went wrong. Please try again.',
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) {
+    return <TmaLoader />;
+  }
+
+  return (
+    <div className="min-h-screen">
+      <div className="bg-tg-bg border-b border-tg-border">
+        <div className="max-w-md mx-auto px-4 py-4 flex items-center gap-3">
+          {user ? (
+            <>
+              <div className="w-10 h-10 rounded-full bg-tg-secondary text-white flex items-center justify-center font-bold text-lg">
+                {user.first_name?.[0]}
+              </div>
+              <div className="flex flex-col">
+                <span className="text-sm font-bold text-tg-text">{user.first_name} {user.last_name}</span>
+                <span className="text-xs text-tg-textSecondary">@{user.username || 'User'}</span>
+              </div>
+            </>
+          ) : (
+            <div className="flex flex-col">
+              <span className="text-sm font-bold text-tg-text">Guest User</span>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="p-4">
+        <TmaCard title="User Profile" description="View your Telegram account details">
+          {user ? (
+            <div className="grid grid-cols-2 gap-3 text-sm">
+              <div className="bg-gray-50 p-3 rounded-lg">
+                <span className="text-tg-textSecondary block text-xs">ID</span>
+                <span className="font-medium text-tg-text">{user.id}</span>
+              </div>
+              <div className="bg-gray-50 p-3 rounded-lg">
+                <span className="text-tg-textSecondary block text-xs">Language</span>
+                <span className="font-medium text-tg-text">{user.language_code || 'N/A'}</span>
+              </div>
+            </div>
+          ) : (
+            <p className="text-sm text-tg-textSecondary">Not logged in via Telegram.</p>
+          )}
+        </TmaCard>
+
+        <TmaCard title="Send Message" description="Interact with the bot">
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <TmaInput
+              label="Name"
+              name="name"
+              value={formData.name}
+              onChange={handleInputChange}
+              placeholder="Enter your name"
+              type="text"
+            />
+            <TmaInput
+              label="Message"
+              name="message"
+              value={formData.message}
+              onChange={handleInputChange}
+              placeholder="Type your message here..."
+              type="text"
+            />
+            <TmaButton 
+              text="Send Message" 
+              loading={loading} 
+              disabled={loading}
+            />
+          </form>
+        </TmaCard>
+
+        {response && (
+          <TmaCard title="Response">
+            <div className={`p-3 rounded-lg text-sm ${
+              response.status === 'success' ? 'bg-green-50 text-green-700' : 'bg-red-50 text-red-700'
+            }`}>
+              {response.data}
+            </div>
+          </TmaCard>
+        )}
+      </div>
+    </div>
+  );
+}