Upload pages/index.js with huggingface_hub

pages/index.js

@@ -0,0 +1,74 @@
+import { useState } from 'react';
+import PrintModal from '../components/PrintModal';
+import PrintableContent from '../components/PrintableContent';
+import CardsSection from '../components/CardsSection';
+import Header from '../components/Header';
+import Footer from '../components/Footer';
+
+export default function Home() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const openModal = () => {
+    setIsModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <Header />
+
+      <main className="container mx-auto px-4 py-8">
+        <div className="mb-12 text-center">
+          <h1 className="text-4xl font-bold text-gray-900">
+            Print Modal in React
+          </h1>
+          <p className="mt-4 text-xl text-gray-600">
+            A simple and elegant solution for printing specific content using a modal
+          </p>
+        </div>
+
+        <div className="mb-12 rounded-xl bg-gradient-to-r from-blue-500 to-indigo-600 p-8 text-white shadow-lg">
+          <h2 className="text-2xl font-bold">How it works</h2>
+          <div className="mt-4 grid grid-cols-1 gap-4 md:grid-cols-3">
+            <div className="rounded-lg bg-white bg-opacity-20 p-4">
+              <div className="mb-2 text-2xl font-bold">1</div>
+              <p>Click the print button on any card</p>
+            </div>
+            <div className="rounded-lg bg-white bg-opacity-20 p-4">
+              <div className="mb-2 text-2xl font-bold">2</div>
+              <p>View the content in the print preview modal</p>
+            </div>
+            <div className="rounded-lg bg-white bg-opacity-20 p-4">
+              <div className="mb-2 text-2xl font-bold">3</div>
+              <p>Print the content with a clean layout</p>
+            </div>
+          </div>
+        </div>
+
+        <CardsSection onPrintClick={openModal} />
+
+        <div className="mt-12 rounded-xl bg-white p-6 shadow-md">
+          <h2 className="text-2xl font-bold text-gray-900">Printable Content</h2>
+          <p className="mt-2 text-gray-600">
+            Click the button below to open the print modal and preview the content
+          </p>
+          <button
+            onClick={openModal}
+            className="mt-6 rounded-lg bg-blue-600 px-6 py-3 text-white transition-colors hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+          >
+            Open Print Modal
+          </button>
+        </div>
+      </main>
+
+      <Footer />
+
+      <PrintModal isOpen={isModalOpen} onClose={closeModal}>
+        <PrintableContent />
+      </PrintModal>
+    </div>
+  );
+}