From 3fce04a20dadb7ae7e23c0fbb32247898aaa4e87 Mon Sep 17 00:00:00 2001
From: Sawan <sawankushwah457@gmail.com>
Date: Mon, 21 Oct 2024 14:34:00 +0530
Subject: [PATCH 1/4] Added required field in model components

---
 src/App.tsx                            |  19 +-
 src/components/Checkbox.tsx            |  49 +--
 src/components/CheckboxDetails.tsx     | 406 +++++++++++++------------
 src/components/Footer.tsx              |  70 ++---
 src/components/GlassyUILandingPage.tsx |   3 +-
 src/components/ModalDetailsPage.tsx    | 270 +++++++++++++++-
 6 files changed, 544 insertions(+), 273 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 6713edf..3e22772 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,7 +7,6 @@ import {
   useLocation,
 } from 'react-router-dom';
 
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import ScrollProgressBar from './components/ScrollProgress'; // Import your ScrollProgressBar component
 import PricingDetailPage from './components/PricingDetailPage';
 
@@ -39,10 +38,10 @@ import ContactUsDetailsPage from './components/ContactUsDetailsPage';
 import PaginationDetails from './components/PaginationDetails';
 import TestimonialDetails from './components/TestimonialDetails';
 import Footer from './components/Footer';
-  import Statistic from './components/StatisticDetails';
-  import GalleryDetailsPage from './components/GalleryDetailsPage';
-  import Checkbox from './components/Checkbox';
- 
+import Statistic from './components/StatisticDetails';
+import GalleryDetailsPage from './components/GalleryDetailsPage';
+// import Checkbox from './components/Checkbox';
+
 const App: React.FC = () => {
   return (
     <Router>
@@ -79,12 +78,12 @@ const App: React.FC = () => {
         <Route path='/contact-details' element={<ContactUsDetailsPage />} />
         <Route path='/pagination-details' element={<PaginationDetails />} />
         <Route path='/testimonial-details' element={<TestimonialDetails />} />
-          <Route path='/statistic-details' element={<Statistic />} />
-          <Route path='/gallery-details' element={<GalleryDetailsPage />} />
+        <Route path='/statistic-details' element={<Statistic />} />
+        <Route path='/gallery-details' element={<GalleryDetailsPage />} />
+
+
+        {/* <Route path='/checkbox' element={<Checkbox />} /> */}
 
-  
-        <Route path='/checkbox' element={<Checkbox />} />
- 
         <Route path='*' element={<NotFoundPage />} />
       </Routes>
 
diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
index 312f1b6..5fa1a6f 100644
--- a/src/components/Checkbox.tsx
+++ b/src/components/Checkbox.tsx
@@ -1,23 +1,34 @@
-import React, { useState } from 'react';
+// import React, { useState } from 'react';
 
-import CheckboxDetails from './CheckboxDetails';
+// import CheckboxDetails from './CheckboxDetails';
 
-const Checkbox: React.FC = () => {
-  const [isChecked, setIsChecked] = useState(false);
+// const Checkbox: React.FC = () => {
+//   const [isChecked, setIsChecked] = useState(false);
 
+//   return (
+//     <div>
+//       <CheckboxDetails
+//         checked={isChecked}
+//         onChange={checked => setIsChecked(checked)}
+//         label='I agree to the terms'
+//         size='medium'
+//         borderColor='#4A90E2'
+//         backgroundColor='#E5F1FB'
+//         checkColor='#007bff'
+//       />
+//     </div>
+//   );
+// };
+
+// export default Checkbox;
+
+
+import React from 'react'
+
+const Checkbox = () => {
   return (
-    <div>
-      <CheckboxDetails
-        checked={isChecked}
-        onChange={checked => setIsChecked(checked)}
-        label='I agree to the terms'
-        size='medium'
-        borderColor='#4A90E2'
-        backgroundColor='#E5F1FB'
-        checkColor='#007bff'
-      />
-    </div>
-  );
-};
-
-export default Checkbox;
+    <div>Checkbox</div>
+  )
+}
+
+export default Checkbox
\ No newline at end of file
diff --git a/src/components/CheckboxDetails.tsx b/src/components/CheckboxDetails.tsx
index 9716205..8dd0907 100644
--- a/src/components/CheckboxDetails.tsx
+++ b/src/components/CheckboxDetails.tsx
@@ -1,200 +1,210 @@
-import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { ArrowLeft, Copy, Check } from 'lucide-react';
-import BackToTopButton from './BackToTop';
-
-// Custom Checkbox component
-const Checkbox = ({
-  checked,
-  onChange,
-  label,
-}: {
-  checked: boolean;
-  onChange: () => void;
-  label: string;
-}) => (
-  <label className='inline-flex items-center'>
-    <input
-      type='checkbox'
-      checked={checked}
-      onChange={onChange}
-      className='form-checkbox h-5 w-5 text-blue-600 rounded'
-    />
-    <span className='ml-2 text-white'>{label}</span>
-  </label>
-);
-
-const CheckboxDetailsPage: React.FC = () => {
-  const navigate = useNavigate();
-  const [copiedStates, setCopiedStates] = useState<{ [key: string]: boolean }>(
-    {},
-  );
-  const [isChecked, setIsChecked] = useState<any>(false);
-
-  const getGlassyClasses = (opacity = 20) => {
-    return `backdrop-filter backdrop-blur-lg bg-white bg-opacity-${opacity} 
-  border border-white border-opacity-20 rounded-lg shadow-lg transition-all duration-300`;
-  };
-
-  const copyToClipboard = (text: string, key: string) => {
-    navigator.clipboard.writeText(text).then(() => {
-      setCopiedStates(prev => ({ ...prev, [key]: true }));
-      setTimeout(
-        () => setCopiedStates(prev => ({ ...prev, [key]: false })),
-        2000,
-      );
-    });
-  };
-
-  const CopyButton: React.FC<{ text: string; codeKey: string }> = ({
-    text,
-    codeKey,
-  }) => (
-    <button
-      onClick={() => copyToClipboard(text, codeKey)}
-      className={`absolute top-2 right-2 ${getGlassyClasses()} p-2 hover:bg-white/40 transition-all duration-300 z-10`}
-      title='Copy to clipboard'
-    >
-      {copiedStates[codeKey] ? (
-        <Check size={16} className='text-white' />
-      ) : (
-        <Copy size={16} className='text-white' />
-      )}
-    </button>
-  );
-
-  const basicUsageCode = `function ExampleCheckbox() {
-  const [isChecked, setIsChecked] = useState(false);
-
+// import React, { useState } from 'react';
+// import { useNavigate } from 'react-router-dom';
+// import { ArrowLeft, Copy, Check } from 'lucide-react';
+// import BackToTopButton from './BackToTop';
+
+// // Custom Checkbox component
+// const Checkbox = ({
+//   checked,
+//   onChange,
+//   label,
+// }: {
+//   checked: boolean;
+//   onChange: () => void;
+//   label: string;
+// }) => (
+//   <label className='inline-flex items-center'>
+//     <input
+//       type='checkbox'
+//       checked={checked}
+//       onChange={onChange}
+//       className='form-checkbox h-5 w-5 text-blue-600 rounded'
+//     />
+//     <span className='ml-2 text-white'>{label}</span>
+//   </label>
+// );
+
+// const CheckboxDetailsPage: React.FC = () => {
+//   const navigate = useNavigate();
+//   const [copiedStates, setCopiedStates] = useState<{ [key: string]: boolean }>(
+//     {},
+//   );
+//   const [isChecked, setIsChecked] = useState<any>(false);
+
+//   const getGlassyClasses = (opacity = 20) => {
+//     return `backdrop-filter backdrop-blur-lg bg-white bg-opacity-${opacity}
+//   border border-white border-opacity-20 rounded-lg shadow-lg transition-all duration-300`;
+//   };
+
+//   const copyToClipboard = (text: string, key: string) => {
+//     navigator.clipboard.writeText(text).then(() => {
+//       setCopiedStates(prev => ({ ...prev, [key]: true }));
+//       setTimeout(
+//         () => setCopiedStates(prev => ({ ...prev, [key]: false })),
+//         2000,
+//       );
+//     });
+//   };
+
+//   const CopyButton: React.FC<{ text: string; codeKey: string }> = ({
+//     text,
+//     codeKey,
+//   }) => (
+//     <button
+//       onClick={() => copyToClipboard(text, codeKey)}
+//       className={`absolute top-2 right-2 ${getGlassyClasses()} p-2 hover:bg-white/40 transition-all duration-300 z-10`}
+//       title='Copy to clipboard'
+//     >
+//       {copiedStates[codeKey] ? (
+//         <Check size={16} className='text-white' />
+//       ) : (
+//         <Copy size={16} className='text-white' />
+//       )}
+//     </button>
+//   );
+
+//   const basicUsageCode = `function ExampleCheckbox() {
+//   const [isChecked, setIsChecked] = useState(false);
+
+//   return (
+//     <Checkbox
+//       checked={isChecked}
+//       onChange={() => setIsChecked(!isChecked)}
+//       label="Accept Terms"
+//     />
+//   );
+// }`;
+
+//   const customizableCheckboxCode = `<Checkbox
+//   checked={isChecked}
+//   onChange={() => setIsChecked(!isChecked)}
+//   label="Custom Styled Checkbox"
+//   className={getGlassyClasses()}
+// />`;
+
+//   const propsTable = (
+//     <table className='w-full'>
+//       <thead>
+//         <tr className='bg-white bg-opacity-20'>
+//           <th className='text-left p-2 text-white'>Prop</th>
+//           <th className='text-left p-2 text-white'>Type</th>
+//           <th className='text-left p-2 text-white'>Default</th>
+//           <th className='text-left p-2 text-white'>Description</th>
+//         </tr>
+//       </thead>
+//       <tbody>
+//         <tr>
+//           <td className='p-2 text-white'>checked</td>
+//           <td className='p-2 text-white'>boolean</td>
+//           <td className='p-2 text-white'>false</td>
+//           <td className='p-2 text-white'>
+//             Determines if the checkbox is checked
+//           </td>
+//         </tr>
+//         <tr className='bg-white bg-opacity-10'>
+//           <td className='p-2 text-white'>onChange</td>
+//           <td className='p-2 text-white'>function</td>
+//           <td className='p-2 text-white'>-</td>
+//           <td className='p-2 text-white'>
+//             Callback when checkbox state changes
+//           </td>
+//         </tr>
+//         <tr>
+//           <td className='p-2 text-white'>label</td>
+//           <td className='p-2 text-white'>string</td>
+//           <td className='p-2 text-white'>""</td>
+//           <td className='p-2 text-white'>Text label next to the checkbox</td>
+//         </tr>
+//       </tbody>
+//     </table>
+//   );
+
+//   return (
+//     <div className='min-h-screen p-8 font-sans bg-gradient-to-r from-gray-800 via-gray-900 to-black text-white relative'>
+//       <BackToTopButton />
+//       <div className='relative z-10'>
+//         <button
+//           onClick={() => navigate(-1)}
+//           className={`mb-8 flex items-center ${getGlassyClasses(10)} px-4 py-2 hover:bg-white/40 transition-all duration-300 text-white`}
+//         >
+//           <ArrowLeft size={20} className='mr-2' />
+//           Back to Components
+//         </button>
+
+//         <h1 className='text-6xl font-bold mb-8 text-white'>Checkbox</h1>
+//         <p className='text-xl mb-8 text-white'>
+//           A customizable, glassmorphism-styled checkbox component.
+//         </p>
+
+//         {/* Basic Usage */}
+//         <div className={`${getGlassyClasses()} p-6 mb-14 relative`}>
+//           <h2 className='text-3xl font-bold mb-6 text-white'>Basic Usage</h2>
+//           <div className='relative'>
+//             <pre className='bg-gray-800 text-white p-6 rounded-lg overflow-x-auto whitespace-pre-wrap max-sm:text-[0.55rem]'>
+//               {basicUsageCode}
+//             </pre>
+//             <CopyButton text={basicUsageCode} codeKey='basicUsage' />
+//           </div>
+//         </div>
+
+//         {/* Props */}
+//         <div className={`${getGlassyClasses()} p-6 mb-14`}>
+//           <h2 className='text-3xl font-bold mb-6 text-white'>Props</h2>
+//           <div className='overflow-x-auto'>{propsTable}</div>
+//         </div>
+
+//         {/* Customizable Checkbox */}
+//         <div className={`${getGlassyClasses()} p-6 mb-14`}>
+//           <h2 className='text-3xl font-bold mb-6 text-white'>
+//             Customizable Checkbox
+//           </h2>
+//           <p className='mb-6 text-lg text-white'>
+//             A customizable checkbox that allows you to adjust its background,
+//             border, and text colors.
+//           </p>
+//           <div className='relative mt-8'>
+//             <Checkbox
+//               checked={isChecked}
+//               onChange={() => setIsChecked(!isChecked)}
+//               label='Custom Styled Checkbox'
+//             />
+//             <pre className='bg-gray-800 text-white p-6 rounded-lg mt-4 overflow-x-auto whitespace-pre-wrap max-sm:text-[0.55rem]'>
+//               {customizableCheckboxCode}
+//             </pre>
+//             <CopyButton
+//               text={customizableCheckboxCode}
+//               codeKey='customizableCheckbox'
+//             />
+//           </div>
+//         </div>
+
+//         {/* Disabled Checkbox */}
+//         <div className={`${getGlassyClasses()} p-6 mb-14`}>
+//           <h2 className='text-3xl font-bold mb-6 text-white'>
+//             Disabled Checkbox
+//           </h2>
+//           <p className='mb-6 text-lg text-white'>
+//             A checkbox that is disabled and cannot be clicked.
+//           </p>
+//           <Checkbox
+//             checked={false}
+//             onChange={() => { }}
+//             label='Disabled Checkbox'
+//           />
+//         </div>
+//       </div>
+//     </div>
+//   );
+// };
+
+// export default CheckboxDetailsPage;
+
+import React from 'react'
+
+const CheckboxDetails = () => {
   return (
-    <Checkbox 
-      checked={isChecked} 
-      onChange={() => setIsChecked(!isChecked)} 
-      label="Accept Terms" 
-    />
-  );
-}`;
-
-  const customizableCheckboxCode = `<Checkbox 
-  checked={isChecked} 
-  onChange={() => setIsChecked(!isChecked)} 
-  label="Custom Styled Checkbox" 
-  className={getGlassyClasses()} 
-/>`;
-
-  const propsTable = (
-    <table className='w-full'>
-      <thead>
-        <tr className='bg-white bg-opacity-20'>
-          <th className='text-left p-2 text-white'>Prop</th>
-          <th className='text-left p-2 text-white'>Type</th>
-          <th className='text-left p-2 text-white'>Default</th>
-          <th className='text-left p-2 text-white'>Description</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td className='p-2 text-white'>checked</td>
-          <td className='p-2 text-white'>boolean</td>
-          <td className='p-2 text-white'>false</td>
-          <td className='p-2 text-white'>
-            Determines if the checkbox is checked
-          </td>
-        </tr>
-        <tr className='bg-white bg-opacity-10'>
-          <td className='p-2 text-white'>onChange</td>
-          <td className='p-2 text-white'>function</td>
-          <td className='p-2 text-white'>-</td>
-          <td className='p-2 text-white'>
-            Callback when checkbox state changes
-          </td>
-        </tr>
-        <tr>
-          <td className='p-2 text-white'>label</td>
-          <td className='p-2 text-white'>string</td>
-          <td className='p-2 text-white'>""</td>
-          <td className='p-2 text-white'>Text label next to the checkbox</td>
-        </tr>
-      </tbody>
-    </table>
-  );
+    <div>CheckboxDetails</div>
+  )
+}
 
-  return (
-    <div className='min-h-screen p-8 font-sans bg-gradient-to-r from-gray-800 via-gray-900 to-black text-white relative'>
-      <BackToTopButton />
-      <div className='relative z-10'>
-        <button
-          onClick={() => navigate(-1)}
-          className={`mb-8 flex items-center ${getGlassyClasses(10)} px-4 py-2 hover:bg-white/40 transition-all duration-300 text-white`}
-        >
-          <ArrowLeft size={20} className='mr-2' />
-          Back to Components
-        </button>
-
-        <h1 className='text-6xl font-bold mb-8 text-white'>Checkbox</h1>
-        <p className='text-xl mb-8 text-white'>
-          A customizable, glassmorphism-styled checkbox component.
-        </p>
-
-        {/* Basic Usage */}
-        <div className={`${getGlassyClasses()} p-6 mb-14 relative`}>
-          <h2 className='text-3xl font-bold mb-6 text-white'>Basic Usage</h2>
-          <div className='relative'>
-            <pre className='bg-gray-800 text-white p-6 rounded-lg overflow-x-auto whitespace-pre-wrap max-sm:text-[0.55rem]'>
-              {basicUsageCode}
-            </pre>
-            <CopyButton text={basicUsageCode} codeKey='basicUsage' />
-          </div>
-        </div>
-
-        {/* Props */}
-        <div className={`${getGlassyClasses()} p-6 mb-14`}>
-          <h2 className='text-3xl font-bold mb-6 text-white'>Props</h2>
-          <div className='overflow-x-auto'>{propsTable}</div>
-        </div>
-
-        {/* Customizable Checkbox */}
-        <div className={`${getGlassyClasses()} p-6 mb-14`}>
-          <h2 className='text-3xl font-bold mb-6 text-white'>
-            Customizable Checkbox
-          </h2>
-          <p className='mb-6 text-lg text-white'>
-            A customizable checkbox that allows you to adjust its background,
-            border, and text colors.
-          </p>
-          <div className='relative mt-8'>
-            <Checkbox
-              checked={isChecked}
-              onChange={() => setIsChecked(!isChecked)}
-              label='Custom Styled Checkbox'
-            />
-            <pre className='bg-gray-800 text-white p-6 rounded-lg mt-4 overflow-x-auto whitespace-pre-wrap max-sm:text-[0.55rem]'>
-              {customizableCheckboxCode}
-            </pre>
-            <CopyButton
-              text={customizableCheckboxCode}
-              codeKey='customizableCheckbox'
-            />
-          </div>
-        </div>
-
-        {/* Disabled Checkbox */}
-        <div className={`${getGlassyClasses()} p-6 mb-14`}>
-          <h2 className='text-3xl font-bold mb-6 text-white'>
-            Disabled Checkbox
-          </h2>
-          <p className='mb-6 text-lg text-white'>
-            A checkbox that is disabled and cannot be clicked.
-          </p>
-          <Checkbox
-            checked={false}
-            onChange={() => {}}
-            label='Disabled Checkbox'
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default CheckboxDetailsPage;
+export default CheckboxDetails
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index cf438eb..b4bd892 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -5,41 +5,42 @@ import GoogleTranslate from './GoogleTranslator';
 
 const Footer: React.FC = () => {
   return (
-    <footer className='glass-footer'>
-      <div className='footer-content'>
-        <p className='footer-description'>
-          Elevate your UI with beautifully crafted, glassmorphic components.
-          Perfect for creating modern, sleek interfaces.
-        </p>
-        <div className='footer-links'>
-          <Link to='/components' className='footer-link'>
-            Components
-          </Link>
-          <Link to='/contributors' className='footer-link'>
-            Contributors
-          </Link>
-          <Link to='/donation' className='footer-link'>
-            Donation
-          </Link>
-          <Link to='/about' className='footer-link'>
-            About
-          </Link>
-          <GoogleTranslate />
+    <>
+      <footer className='glass-footer'>
+        <div className='footer-content'>
+          <p className='footer-description'>
+            Elevate your UI with beautifully crafted, glassmorphic components.
+            Perfect for creating modern, sleek interfaces.
+          </p>
+          <div className='footer-links'>
+            <Link to='/components' className='footer-link'>
+              Components
+            </Link>
+            <Link to='/contributors' className='footer-link'>
+              Contributors
+            </Link>
+            <Link to='/donation' className='footer-link'>
+              Donation
+            </Link>
+            <Link to='/about' className='footer-link'>
+              About
+            </Link>
+            <GoogleTranslate />
+          </div>
         </div>
-      </div>
-      <div className='footer-bottom'>
-        <a
-          href='https://github.com/Jaishree2310/GlassyUI-Components'
-          target='_blank'
-          rel='noopener noreferrer'
-          className='github-link'
-        >
-          <i className='fa-brands fa-github'></i>
-        </a>
-        <p>&copy; 2023 GlassyUI. All rights reserved.</p>
-      </div>
-
-      <style jsx>{`
+        <div className='footer-bottom'>
+          <a
+            href='https://github.com/Jaishree2310/GlassyUI-Components'
+            target='_blank'
+            rel='noopener noreferrer'
+            className='github-link'
+          >
+            <i className='fa-brands fa-github'></i>
+          </a>
+          <p>&copy; 2023 GlassyUI. All rights reserved.</p>
+        </div>
+
+        <style jsx>{`
         .glass-footer {
           backdrop-filter: blur(10px) saturate(180%);
           -webkit-backdrop-filter: blur(10px) saturate(180%);
@@ -128,6 +129,7 @@ const Footer: React.FC = () => {
           }
         }
       `}</style>
+
         <div>
           <p
             style={{
diff --git a/src/components/GlassyUILandingPage.tsx b/src/components/GlassyUILandingPage.tsx
index 7ab571b..0cd658e 100644
--- a/src/components/GlassyUILandingPage.tsx
+++ b/src/components/GlassyUILandingPage.tsx
@@ -41,8 +41,7 @@ const GlassyUILandingPage: React.FC = () => {
 
       <div className='homeGSap relative z-10 w-full max-w-4xl'>
 
-        <header className='w-full flex justify-between items-center mb-19'>
-          
+
         <header className='w-full flex justify-between items-center mb-4'>
           {' '}
           {/* Adjusted mb-8 to mb-4 */}
diff --git a/src/components/ModalDetailsPage.tsx b/src/components/ModalDetailsPage.tsx
index 0751847..c72b8be 100644
--- a/src/components/ModalDetailsPage.tsx
+++ b/src/components/ModalDetailsPage.tsx
@@ -16,6 +16,264 @@ type ModalProps = {
   onCtaClick?: (props: any) => void;
 };
 
+const ExampleComponent = () => {
+  const [basicModal, setBasicModal] = useState(false);
+  const [imageModal, setImageModal] = useState(false);
+  const [customCTAModal, setCustomCTAModal] = useState(false);
+  const [bgColorModal, setBgColorModal] = useState(false);
+
+  return (
+    <div className={`${getGlassyClasses()} p-6 mb-14`}>
+      <h2 className='text-3xl font-bold mb-6 text-gray-100'>Examples</h2>
+
+      {/* Basic Example */}
+      <div className='mb-8'>
+        <h3 className='text-2xl font-semibold mb-4'>Basic Example</h3>
+        <p className='mb-4 text-gray-100'>
+          This example demonstrates the basic usage of the modal with a heading, paragraph, and a simple call-to-action button.
+        </p>
+        <button
+          onClick={() => setBasicModal(true)}
+          className={`mb-4 ${getGlassyClasses()} px-4 py-2 hover:bg-white/40 transition-all duration-300 text-gray-100`}
+        >
+          Open Basic Modal
+        </button>
+        {basicModal && (
+          <Modal
+            heading='Basic Modal'
+            paragraph='This is a simple modal with a CTA button.'
+            CTA={{ text: 'Save', color: '#00dd43' }}
+            imageUrl=''
+            unmount={() => setBasicModal(false)}
+          />
+        )}
+      </div>
+
+      {/* Modal with Image */}
+      <div className='mb-8'>
+        <h3 className='text-2xl font-semibold mb-4'>Modal with Image</h3>
+        <p className='mb-4 text-gray-100'>
+          This example shows how you can include an image in the modal by providing the <code>imageUrl</code> prop.
+        </p>
+        <button
+          onClick={() => setImageModal(true)}
+          className={`mb-4 ${getGlassyClasses()} px-4 py-2 hover:bg-white/40 transition-all duration-300 text-gray-100`}
+        >
+          Open Modal with Image
+        </button>
+        {imageModal && (
+          <Modal
+            heading='Modal with Image'
+            paragraph='This modal includes an image.'
+            CTA={{ text: 'Save', color: '#ff5a5f' }}
+            imageUrl='https://via.placeholder.com/150'
+            unmount={() => setImageModal(false)}
+          />
+        )}
+      </div>
+
+      {/* Modal with Custom CTA */}
+      <div className='mb-8'>
+        <h3 className='text-2xl font-semibold mb-4'>Modal with Custom CTA</h3>
+        <p className='mb-4 text-gray-100'>
+          You can customize the text and background color of the CTA button using the <code>CTA</code> prop.
+        </p>
+        <button
+          onClick={() => setCustomCTAModal(true)}
+          className={`mb-4 ${getGlassyClasses()} px-4 py-2 hover:bg-white/40 transition-all duration-300 text-gray-100`}
+        >
+          Open Modal with Custom CTA
+        </button>
+        {customCTAModal && (
+          <Modal
+            heading='Custom CTA Modal'
+            paragraph='This modal has a custom CTA button.'
+            CTA={{ text: 'Confirm', color: '#007bff' }}
+            imageUrl=''
+            unmount={() => setCustomCTAModal(false)}
+          />
+        )}
+      </div>
+
+      {/* Modal with Custom Background Color */}
+      <div className='mb-8'>
+        <h3 className='text-2xl font-semibold mb-4'>Modal with Custom Background Color</h3>
+        <p className='mb-4 text-gray-100'>
+          This example showcases how to change the modal background color using the <code>bgColor</code> prop.
+        </p>
+        <button
+          onClick={() => setBgColorModal(true)}
+          className={`mb-4 ${getGlassyClasses()} px-4 py-2 hover:bg-white/40 transition-all duration-300 text-gray-100`}
+        >
+          Open Modal with Custom Background Color
+        </button>
+        {bgColorModal && (
+          <Modal
+            heading='Custom Background Modal'
+            paragraph='This modal has a custom background color.'
+            CTA={{ text: 'Submit', color: '#ff9800' }}
+            imageUrl=''
+            unmount={() => setBgColorModal(false)}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+
+
+interface CustomModalProps {
+  heading: string;
+  paragraph: string;
+  CTA: {
+    text: string;
+    color: string;
+  };
+  imageUrl?: string;
+  bgColor?: string; // Make this optional
+  unmount: () => void;
+}
+
+const CustomModal: React.FC<CustomModalProps> = ({
+  heading,
+  paragraph,
+  CTA,
+  imageUrl,
+  bgColor = 'white',
+  unmount,
+}) => {
+  return (
+    <div
+      className='fixed inset-0 flex items-center justify-center bg-black/50'
+      onClick={unmount}
+    >
+      <div
+        className='relative p-6 rounded-lg shadow-lg'
+        style={{ backgroundColor: bgColor, maxWidth: '500px', width: '100%' }}
+        onClick={(e) => e.stopPropagation()} // Prevent closing on modal click
+      >
+        <h2 className='text-2xl font-bold mb-4'>{heading}</h2>
+        {imageUrl && (
+          <div className='mb-4'>
+            <img src={imageUrl} alt={heading} className='w-full h-auto' />
+          </div>
+        )}
+        <p className='mb-4'>{paragraph}</p>
+        <button
+          className='px-4 py-2 rounded text-white'
+          style={{ backgroundColor: CTA.color }}
+          onClick={unmount}
+        >
+          {CTA.text}
+        </button>
+        <button
+          className='absolute top-2 right-2 text-black'
+          onClick={unmount}
+        >
+          &#x2715;
+        </button>
+      </div>
+    </div>
+  );
+};
+
+
+const CustomExample: React.FC = () => {
+  const [modalConfig, setModalConfig] = useState<{
+    heading: string;
+    paragraph: string;
+    CTA: { text: string; color: string };
+    imageUrl?: string;
+    bgColor?: string;
+  } | null>(null);
+
+  const [heading, setHeading] = useState('');
+  const [paragraph, setParagraph] = useState('');
+  const [ctaText, setCtaText] = useState('');
+  const [ctaColor, setCtaColor] = useState('#ffffff'); // Default color
+  const [bgColor, setBgColor] = useState('#000000'); // Default color
+  const [imageUrl, setImageUrl] = useState('');
+
+  const closeModal = () => setModalConfig(null);
+
+  const openModal = () => {
+    setModalConfig({
+      heading,
+      paragraph,
+      CTA: { text: ctaText, color: ctaColor },
+      imageUrl,
+      bgColor,
+    });
+  };
+
+  return (
+    <div className={`${getGlassyClasses()} p-6 mb-14`}>
+      <h2 className='text-3xl font-bold mb-6 text-gray-100'>Customizable Modal Form</h2>
+
+      <div className=' p-6 rounded-lg'>
+        <input
+          type='text'
+          placeholder='Modal Heading'
+          value={heading}
+          onChange={(e) => setHeading(e.target.value)}
+          className='border border-gray-600 bg-gray-700 text-gray-100 p-2 w-full mb-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500'
+        />
+        <textarea
+          placeholder='Modal Paragraph'
+          value={paragraph}
+          onChange={(e) => setParagraph(e.target.value)}
+          className='border border-gray-600 bg-gray-700 text-gray-100 p-2 w-full mb-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500'
+        />
+        <input
+          type='text'
+          placeholder='CTA Button Text'
+          value={ctaText}
+          onChange={(e) => setCtaText(e.target.value)}
+          className='border border-gray-600 bg-gray-700 text-gray-100 p-2 w-full mb-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500'
+        />
+        <div className='flex items-center mb-4'>
+          <label className='text-gray-100 mr-2'>CTA Button Color:</label>
+          <input
+            type='color'
+            value={ctaColor}
+            onChange={(e) => setCtaColor(e.target.value)}
+            className='border border-gray-600 p-2 rounded'
+          />
+        </div>
+
+        <div className='flex items-center mb-4'>
+          <label className='text-gray-100 mr-2'>Background Color:</label>
+          <input
+            type='color'
+            value={bgColor}
+            onChange={(e) => setBgColor(e.target.value)}
+            className='border border-gray-600 p-2 rounded'
+          />
+        </div>
+        <input
+          type='text'
+          placeholder='Image URL (optional)'
+          value={imageUrl}
+          onChange={(e) => setImageUrl(e.target.value)}
+          className='border border-gray-600 bg-gray-700 text-gray-100 p-2 w-full mb-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500'
+        />
+        <button
+          onClick={openModal}
+          className='mt-4 px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded transition duration-300'
+        >
+          Open Modal
+        </button>
+      </div>
+
+      {/* Render the modal if modalConfig is not null */}
+      {modalConfig && (
+        <CustomModal {...modalConfig} unmount={closeModal} />
+      )}
+    </div>
+  );
+};
+
 const Modal: React.FC<ModalProps> = props => {
   const { imageUrl, heading, paragraph, CTA, unmount, onCtaClick } = props;
   return (
@@ -218,16 +476,8 @@ function Example() {
           </tbody>
         </table>
       </div>
-
-      {modal && (
-        <Modal
-          heading='This is a heading'
-          paragraph='This is a paragraph'
-          CTA={{ text: 'Save', color: '#00dd43' }}
-          imageUrl=''
-          unmount={() => setModal(false)}
-        />
-      )}
+      <CustomExample />
+      <ExampleComponent />
     </div>
   );
 };

From f93aa6e44ed94be7cb94d2c998e4be1123e4a136 Mon Sep 17 00:00:00 2001
From: Sawan <sawankushwah457@gmail.com>
Date: Mon, 21 Oct 2024 14:41:14 +0530
Subject: [PATCH 2/4] Updated code

---
 src/components/ModalDetailsPage.tsx | 90 ++++++++++++++++-------------
 1 file changed, 51 insertions(+), 39 deletions(-)

diff --git a/src/components/ModalDetailsPage.tsx b/src/components/ModalDetailsPage.tsx
index c72b8be..f0109a7 100644
--- a/src/components/ModalDetailsPage.tsx
+++ b/src/components/ModalDetailsPage.tsx
@@ -309,49 +309,61 @@ const ModalDetail: React.FC = () => {
   const [copiedText, setCopiedText] = useState<string | null>(null);
   const [modal, setModal] = useState(false);
 
-  const basicUsageCode = `type ModalProps = {
-  imageUrl?: string
-  heading: string
-  paragraph: string
-  bgColor?: string
-  CTA: { text: string; color: string } // button text and colors
-  unmount: () => void
-  onCtaClick?: (props: any) => void
-};
+  const basicUsageCode = `interface CustomModalProps {
+  heading: string;
+  paragraph: string;
+  CTA: {
+    text: string;
+    color: string;
+  };
+  imageUrl?: string;
+  bgColor?: string; // Make this optional
+  unmount: () => void;
+}
 
-const Modal: React.FC<ModalProps> = (props) => {
-    const { imageUrl, heading, paragraph, CTA, unmount, onCtaClick, bgColor } = props
-    return (
-      <div className=" w-[100vw] h-[100vh] fixed z-10 top-0 left-0 bg-opacity-50 backdrop-blur-sm flex items-center justify-center bg-black/20">
-        <div className=" min-w-[30vw] relative h-auto min-h-[30vh] flex flex-col items-center justify-center gap-6 p-4 backdrop-filter backdrop-blur-xl bg-white/50 border border-white/20 rounded-xl shadow-lg transition-all duration-300" style:{{backgroundColor: bgColor}}>
-          <X className="absolute top-4 right-4 hover:bg-white/80 transition-colors p-1 cursor-pointer" onClick={unmount} />
-          <h1 className="text-black text-2xl font-bold">{heading}</h1>
-          {imageUrl && <img src={props.imageUrl} alt="image" className="w-[80%] h-[20vw] object-cover" />}
-          <p className="text-gray-100">{paragraph}</p>
-            <button onClick={onCtaClick} className={\`px-3 py-1 rounded hover:bg-opacity-50 font-medium text-gray-100 transition-colors duration-300\`} style={{backgroundColor: CTA.color}}>
-              {CTA.text}
-            </button>
-        </div>
+const CustomModal: React.FC<CustomModalProps> = ({
+  heading,
+  paragraph,
+  CTA,
+  imageUrl,
+  bgColor = 'white',
+  unmount,
+}) => {
+  return (
+    <div
+      className='fixed inset-0 flex items-center justify-center bg-black/50'
+      onClick={unmount}
+    >
+      <div
+        className='relative p-6 rounded-lg shadow-lg'
+        style={{ backgroundColor: bgColor, maxWidth: '500px', width: '100%' }}
+        onClick={(e) => e.stopPropagation()} // Prevent closing on modal click
+      >
+        <h2 className='text-2xl font-bold mb-4'>{heading}</h2>
+        {imageUrl && (
+          <div className='mb-4'>
+            <img src={imageUrl} alt={heading} className='w-full h-auto' />
+          </div>
+        )}
+        <p className='mb-4'>{paragraph}</p>
+        <button
+          className='px-4 py-2 rounded text-white'
+          style={{ backgroundColor: CTA.color }}
+          onClick={unmount}
+        >
+          {CTA.text}
+        </button>
+        <button
+          className='absolute top-2 right-2 text-black'
+          onClick={unmount}
+        >
+          &#x2715;
+        </button>
       </div>
-    );
+    </div>
+  );
 };
 
-
-function Example() {
-    const [modal, setModal] = useState(false)
-    return(
-      <>
-        <button onClick={() => setModal(true)}>Open Modal</button>
-        {modal && <Modal
-           heading="This is a heading"
-           paragraph="This is a paragraph"
-           CTA={{text: "Save", color: "#00dd43"}}
-           imageUrl=""
-           unmount={() => setModal(false)}
-        />}
-      </>
-    )
-  }
 `;
 
   const copyToClipboard = (text: string, key: string) => {

From fa8d2249ca9b4e5fbfe408af7a2ab427ce4d2868 Mon Sep 17 00:00:00 2001
From: Sawan <sawankushwah457@gmail.com>
Date: Mon, 21 Oct 2024 14:53:40 +0530
Subject: [PATCH 3/4] fixes

---
 src/App.tsx                               |   4 +-
 src/components/Checkbox.tsx               |  49 +--
 src/components/CheckboxDetails.tsx        | 406 +++++++++++-----------
 src/components/GlassyUIComponentsPage.tsx |  18 +-
 4 files changed, 228 insertions(+), 249 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 3e22772..27b2859 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -40,7 +40,7 @@ import TestimonialDetails from './components/TestimonialDetails';
 import Footer from './components/Footer';
 import Statistic from './components/StatisticDetails';
 import GalleryDetailsPage from './components/GalleryDetailsPage';
-// import Checkbox from './components/Checkbox';
+import Checkbox from './components/Checkbox';
 
 const App: React.FC = () => {
   return (
@@ -82,7 +82,7 @@ const App: React.FC = () => {
         <Route path='/gallery-details' element={<GalleryDetailsPage />} />
 
 
-        {/* <Route path='/checkbox' element={<Checkbox />} /> */}
+        <Route path='/checkbox' element={<Checkbox />} />
 
         <Route path='*' element={<NotFoundPage />} />
       </Routes>
diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
index 5fa1a6f..312f1b6 100644
--- a/src/components/Checkbox.tsx
+++ b/src/components/Checkbox.tsx
@@ -1,34 +1,23 @@
-// import React, { useState } from 'react';
+import React, { useState } from 'react';
 
-// import CheckboxDetails from './CheckboxDetails';
+import CheckboxDetails from './CheckboxDetails';
 
-// const Checkbox: React.FC = () => {
-//   const [isChecked, setIsChecked] = useState(false);
+const Checkbox: React.FC = () => {
+  const [isChecked, setIsChecked] = useState(false);
 
-//   return (
-//     <div>
-//       <CheckboxDetails
-//         checked={isChecked}
-//         onChange={checked => setIsChecked(checked)}
-//         label='I agree to the terms'
-//         size='medium'
-//         borderColor='#4A90E2'
-//         backgroundColor='#E5F1FB'
-//         checkColor='#007bff'
-//       />
-//     </div>
-//   );
-// };
-
-// export default Checkbox;
-
-
-import React from 'react'
-
-const Checkbox = () => {
   return (
-    <div>Checkbox</div>
-  )
-}
-
-export default Checkbox
\ No newline at end of file
+    <div>
+      <CheckboxDetails
+        checked={isChecked}
+        onChange={checked => setIsChecked(checked)}
+        label='I agree to the terms'
+        size='medium'
+        borderColor='#4A90E2'
+        backgroundColor='#E5F1FB'
+        checkColor='#007bff'
+      />
+    </div>
+  );
+};
+
+export default Checkbox;
diff --git a/src/components/CheckboxDetails.tsx b/src/components/CheckboxDetails.tsx
index 8dd0907..471df0b 100644
--- a/src/components/CheckboxDetails.tsx
+++ b/src/components/CheckboxDetails.tsx
@@ -1,210 +1,200 @@
-// import React, { useState } from 'react';
-// import { useNavigate } from 'react-router-dom';
-// import { ArrowLeft, Copy, Check } from 'lucide-react';
-// import BackToTopButton from './BackToTop';
-
-// // Custom Checkbox component
-// const Checkbox = ({
-//   checked,
-//   onChange,
-//   label,
-// }: {
-//   checked: boolean;
-//   onChange: () => void;
-//   label: string;
-// }) => (
-//   <label className='inline-flex items-center'>
-//     <input
-//       type='checkbox'
-//       checked={checked}
-//       onChange={onChange}
-//       className='form-checkbox h-5 w-5 text-blue-600 rounded'
-//     />
-//     <span className='ml-2 text-white'>{label}</span>
-//   </label>
-// );
-
-// const CheckboxDetailsPage: React.FC = () => {
-//   const navigate = useNavigate();
-//   const [copiedStates, setCopiedStates] = useState<{ [key: string]: boolean }>(
-//     {},
-//   );
-//   const [isChecked, setIsChecked] = useState<any>(false);
-
-//   const getGlassyClasses = (opacity = 20) => {
-//     return `backdrop-filter backdrop-blur-lg bg-white bg-opacity-${opacity}
-//   border border-white border-opacity-20 rounded-lg shadow-lg transition-all duration-300`;
-//   };
-
-//   const copyToClipboard = (text: string, key: string) => {
-//     navigator.clipboard.writeText(text).then(() => {
-//       setCopiedStates(prev => ({ ...prev, [key]: true }));
-//       setTimeout(
-//         () => setCopiedStates(prev => ({ ...prev, [key]: false })),
-//         2000,
-//       );
-//     });
-//   };
-
-//   const CopyButton: React.FC<{ text: string; codeKey: string }> = ({
-//     text,
-//     codeKey,
-//   }) => (
-//     <button
-//       onClick={() => copyToClipboard(text, codeKey)}
-//       className={`absolute top-2 right-2 ${getGlassyClasses()} p-2 hover:bg-white/40 transition-all duration-300 z-10`}
-//       title='Copy to clipboard'
-//     >
-//       {copiedStates[codeKey] ? (
-//         <Check size={16} className='text-white' />
-//       ) : (
-//         <Copy size={16} className='text-white' />
-//       )}
-//     </button>
-//   );
-
-//   const basicUsageCode = `function ExampleCheckbox() {
-//   const [isChecked, setIsChecked] = useState(false);
-
-//   return (
-//     <Checkbox
-//       checked={isChecked}
-//       onChange={() => setIsChecked(!isChecked)}
-//       label="Accept Terms"
-//     />
-//   );
-// }`;
-
-//   const customizableCheckboxCode = `<Checkbox
-//   checked={isChecked}
-//   onChange={() => setIsChecked(!isChecked)}
-//   label="Custom Styled Checkbox"
-//   className={getGlassyClasses()}
-// />`;
-
-//   const propsTable = (
-//     <table className='w-full'>
-//       <thead>
-//         <tr className='bg-white bg-opacity-20'>
-//           <th className='text-left p-2 text-white'>Prop</th>
-//           <th className='text-left p-2 text-white'>Type</th>
-//           <th className='text-left p-2 text-white'>Default</th>
-//           <th className='text-left p-2 text-white'>Description</th>
-//         </tr>
-//       </thead>
-//       <tbody>
-//         <tr>
-//           <td className='p-2 text-white'>checked</td>
-//           <td className='p-2 text-white'>boolean</td>
-//           <td className='p-2 text-white'>false</td>
-//           <td className='p-2 text-white'>
-//             Determines if the checkbox is checked
-//           </td>
-//         </tr>
-//         <tr className='bg-white bg-opacity-10'>
-//           <td className='p-2 text-white'>onChange</td>
-//           <td className='p-2 text-white'>function</td>
-//           <td className='p-2 text-white'>-</td>
-//           <td className='p-2 text-white'>
-//             Callback when checkbox state changes
-//           </td>
-//         </tr>
-//         <tr>
-//           <td className='p-2 text-white'>label</td>
-//           <td className='p-2 text-white'>string</td>
-//           <td className='p-2 text-white'>""</td>
-//           <td className='p-2 text-white'>Text label next to the checkbox</td>
-//         </tr>
-//       </tbody>
-//     </table>
-//   );
-
-//   return (
-//     <div className='min-h-screen p-8 font-sans bg-gradient-to-r from-gray-800 via-gray-900 to-black text-white relative'>
-//       <BackToTopButton />
-//       <div className='relative z-10'>
-//         <button
-//           onClick={() => navigate(-1)}
-//           className={`mb-8 flex items-center ${getGlassyClasses(10)} px-4 py-2 hover:bg-white/40 transition-all duration-300 text-white`}
-//         >
-//           <ArrowLeft size={20} className='mr-2' />
-//           Back to Components
-//         </button>
-
-//         <h1 className='text-6xl font-bold mb-8 text-white'>Checkbox</h1>
-//         <p className='text-xl mb-8 text-white'>
-//           A customizable, glassmorphism-styled checkbox component.
-//         </p>
-
-//         {/* Basic Usage */}
-//         <div className={`${getGlassyClasses()} p-6 mb-14 relative`}>
-//           <h2 className='text-3xl font-bold mb-6 text-white'>Basic Usage</h2>
-//           <div className='relative'>
-//             <pre className='bg-gray-800 text-white p-6 rounded-lg overflow-x-auto whitespace-pre-wrap max-sm:text-[0.55rem]'>
-//               {basicUsageCode}
-//             </pre>
-//             <CopyButton text={basicUsageCode} codeKey='basicUsage' />
-//           </div>
-//         </div>
-
-//         {/* Props */}
-//         <div className={`${getGlassyClasses()} p-6 mb-14`}>
-//           <h2 className='text-3xl font-bold mb-6 text-white'>Props</h2>
-//           <div className='overflow-x-auto'>{propsTable}</div>
-//         </div>
-
-//         {/* Customizable Checkbox */}
-//         <div className={`${getGlassyClasses()} p-6 mb-14`}>
-//           <h2 className='text-3xl font-bold mb-6 text-white'>
-//             Customizable Checkbox
-//           </h2>
-//           <p className='mb-6 text-lg text-white'>
-//             A customizable checkbox that allows you to adjust its background,
-//             border, and text colors.
-//           </p>
-//           <div className='relative mt-8'>
-//             <Checkbox
-//               checked={isChecked}
-//               onChange={() => setIsChecked(!isChecked)}
-//               label='Custom Styled Checkbox'
-//             />
-//             <pre className='bg-gray-800 text-white p-6 rounded-lg mt-4 overflow-x-auto whitespace-pre-wrap max-sm:text-[0.55rem]'>
-//               {customizableCheckboxCode}
-//             </pre>
-//             <CopyButton
-//               text={customizableCheckboxCode}
-//               codeKey='customizableCheckbox'
-//             />
-//           </div>
-//         </div>
-
-//         {/* Disabled Checkbox */}
-//         <div className={`${getGlassyClasses()} p-6 mb-14`}>
-//           <h2 className='text-3xl font-bold mb-6 text-white'>
-//             Disabled Checkbox
-//           </h2>
-//           <p className='mb-6 text-lg text-white'>
-//             A checkbox that is disabled and cannot be clicked.
-//           </p>
-//           <Checkbox
-//             checked={false}
-//             onChange={() => { }}
-//             label='Disabled Checkbox'
-//           />
-//         </div>
-//       </div>
-//     </div>
-//   );
-// };
-
-// export default CheckboxDetailsPage;
-
-import React from 'react'
-
-const CheckboxDetails = () => {
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ArrowLeft, Copy, Check } from 'lucide-react';
+import BackToTopButton from './BackToTop';
+
+// Custom Checkbox component
+const Checkbox = ({
+  checked,
+  onChange,
+  label,
+}: {
+  checked: boolean;
+  onChange: () => void;
+  label: string;
+}) => (
+  <label className='inline-flex items-center'>
+    <input
+      type='checkbox'
+      checked={checked}
+      onChange={onChange}
+      className='form-checkbox h-5 w-5 text-blue-600 rounded'
+    />
+    <span className='ml-2 text-white'>{label}</span>
+  </label>
+);
+
+const CheckboxDetailsPage: React.FC = () => {
+  const navigate = useNavigate();
+  const [copiedStates, setCopiedStates] = useState<{ [key: string]: boolean }>(
+    {},
+  );
+  const [isChecked, setIsChecked] = useState<any>(false);
+
+  const getGlassyClasses = (opacity = 20) => {
+    return `backdrop-filter backdrop-blur-lg bg-white bg-opacity-${opacity} 
+  border border-white border-opacity-20 rounded-lg shadow-lg transition-all duration-300`;
+  };
+
+  const copyToClipboard = (text: string, key: string) => {
+    navigator.clipboard.writeText(text).then(() => {
+      setCopiedStates(prev => ({ ...prev, [key]: true }));
+      setTimeout(
+        () => setCopiedStates(prev => ({ ...prev, [key]: false })),
+        2000,
+      );
+    });
+  };
+
+  const CopyButton: React.FC<{ text: string; codeKey: string }> = ({
+    text,
+    codeKey,
+  }) => (
+    <button
+      onClick={() => copyToClipboard(text, codeKey)}
+      className={`absolute top-2 right-2 ${getGlassyClasses()} p-2 hover:bg-white/40 transition-all duration-300 z-10`}
+      title='Copy to clipboard'
+    >
+      {copiedStates[codeKey] ? (
+        <Check size={16} className='text-white' />
+      ) : (
+        <Copy size={16} className='text-white' />
+      )}
+    </button>
+  );
+
+  const basicUsageCode = `function ExampleCheckbox() {
+  const [isChecked, setIsChecked] = useState(false);
+
   return (
-    <div>CheckboxDetails</div>
-  )
-}
+    <Checkbox 
+      checked={isChecked} 
+      onChange={() => setIsChecked(!isChecked)} 
+      label="Accept Terms" 
+    />
+  );
+}`;
+
+  const customizableCheckboxCode = `<Checkbox 
+  checked={isChecked} 
+  onChange={() => setIsChecked(!isChecked)} 
+  label="Custom Styled Checkbox" 
+  className={getGlassyClasses()} 
+/>`;
+
+  const propsTable = (
+    <table className='w-full'>
+      <thead>
+        <tr className='bg-white bg-opacity-20'>
+          <th className='text-left p-2 text-white'>Prop</th>
+          <th className='text-left p-2 text-white'>Type</th>
+          <th className='text-left p-2 text-white'>Default</th>
+          <th className='text-left p-2 text-white'>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td className='p-2 text-white'>checked</td>
+          <td className='p-2 text-white'>boolean</td>
+          <td className='p-2 text-white'>false</td>
+          <td className='p-2 text-white'>
+            Determines if the checkbox is checked
+          </td>
+        </tr>
+        <tr className='bg-white bg-opacity-10'>
+          <td className='p-2 text-white'>onChange</td>
+          <td className='p-2 text-white'>function</td>
+          <td className='p-2 text-white'>-</td>
+          <td className='p-2 text-white'>
+            Callback when checkbox state changes
+          </td>
+        </tr>
+        <tr>
+          <td className='p-2 text-white'>label</td>
+          <td className='p-2 text-white'>string</td>
+          <td className='p-2 text-white'>""</td>
+          <td className='p-2 text-white'>Text label next to the checkbox</td>
+        </tr>
+      </tbody>
+    </table>
+  );
 
-export default CheckboxDetails
+  return (
+    <div className='min-h-screen p-8 font-sans bg-gradient-to-r from-gray-800 via-gray-900 to-black text-white relative'>
+      <BackToTopButton />
+      <div className='relative z-10'>
+        <button
+          onClick={() => navigate(-1)}
+          className={`mb-8 flex items-center ${getGlassyClasses(10)} px-4 py-2 hover:bg-white/40 transition-all duration-300 text-white`}
+        >
+          <ArrowLeft size={20} className='mr-2' />
+          Back to Components
+        </button>
+
+        <h1 className='text-6xl font-bold mb-8 text-white'>Checkbox</h1>
+        <p className='text-xl mb-8 text-white'>
+          A customizable, glassmorphism-styled checkbox component.
+        </p>
+
+        {/* Basic Usage */}
+        <div className={`${getGlassyClasses()} p-6 mb-14 relative`}>
+          <h2 className='text-3xl font-bold mb-6 text-white'>Basic Usage</h2>
+          <div className='relative'>
+            <pre className='bg-gray-800 text-white p-6 rounded-lg overflow-x-auto whitespace-pre-wrap max-sm:text-[0.55rem]'>
+              {basicUsageCode}
+            </pre>
+            <CopyButton text={basicUsageCode} codeKey='basicUsage' />
+          </div>
+        </div>
+
+        {/* Props */}
+        <div className={`${getGlassyClasses()} p-6 mb-14`}>
+          <h2 className='text-3xl font-bold mb-6 text-white'>Props</h2>
+          <div className='overflow-x-auto'>{propsTable}</div>
+        </div>
+
+        {/* Customizable Checkbox */}
+        <div className={`${getGlassyClasses()} p-6 mb-14`}>
+          <h2 className='text-3xl font-bold mb-6 text-white'>
+            Customizable Checkbox
+          </h2>
+          <p className='mb-6 text-lg text-white'>
+            A customizable checkbox that allows you to adjust its background,
+            border, and text colors.
+          </p>
+          <div className='relative mt-8'>
+            <Checkbox
+              checked={isChecked}
+              onChange={() => setIsChecked(!isChecked)}
+              label='Custom Styled Checkbox'
+            />
+            <pre className='bg-gray-800 text-white p-6 rounded-lg mt-4 overflow-x-auto whitespace-pre-wrap max-sm:text-[0.55rem]'>
+              {customizableCheckboxCode}
+            </pre>
+            <CopyButton
+              text={customizableCheckboxCode}
+              codeKey='customizableCheckbox'
+            />
+          </div>
+        </div>
+
+        {/* Disabled Checkbox */}
+        <div className={`${getGlassyClasses()} p-6 mb-14`}>
+          <h2 className='text-3xl font-bold mb-6 text-white'>
+            Disabled Checkbox
+          </h2>
+          <p className='mb-6 text-lg text-white'>
+            A checkbox that is disabled and cannot be clicked.
+          </p>
+          <Checkbox
+            checked={false}
+            onChange={() => { }}
+            label='Disabled Checkbox'
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CheckboxDetailsPage;
diff --git a/src/components/GlassyUIComponentsPage.tsx b/src/components/GlassyUIComponentsPage.tsx
index 40075ea..29c633a 100644
--- a/src/components/GlassyUIComponentsPage.tsx
+++ b/src/components/GlassyUIComponentsPage.tsx
@@ -15,9 +15,9 @@ import {
   ThumbsUpIcon,
   Contact,
   Search,
-   AlignStartVertical,
-   GalleryThumbnails,
- } from 'lucide-react';
+  AlignStartVertical,
+  GalleryThumbnails,
+} from 'lucide-react';
 
 import Accordion from './Accordion';
 
@@ -214,17 +214,17 @@ const GlassyUIComponentsPage: React.FC = () => {
       onClick: () => navigate('/contact-details'),
     },
     {
-       title: 'Statistic',
+      title: 'Statistic',
       description: 'Statistic component with glassmorphic styling.',
       icon: <AlignStartVertical size={24} />,
       onClick: () => navigate('/statistic-details'),
     },
     {
-       title: 'Gallery',
+      title: 'Gallery',
       description: 'Gallery component with glassmorphic styling.',
       icon: <GalleryThumbnails size={24} />,
       onClick: () => navigate('/gallery-details'),
-     },
+    },
     {
       title: 'Glassmorphism Effect Generator',
       description: 'Create stunning Glassmorphic effects with ease.',
@@ -331,7 +331,7 @@ const GlassyUIComponentsPage: React.FC = () => {
           </div>
 
 
-  
+
 
         </header>
 
@@ -398,11 +398,11 @@ const GlassyUIComponentsPage: React.FC = () => {
             </span>
             <button
               onClick={nextPage}
-               className={`px-4 py-2 mx-2 rounded-lg ${currentPage === totalPages
+              className={`px-4 py-2 mx-2 rounded-lg ${currentPage === totalPages
                 ? 'opacity-50 cursor-not-allowed'
                 : 'hover:bg-white/20'
                 }`}
- 
+
 
               disabled={currentPage === totalPages}
             >

From 007d165e85fd6944a59f95391d2dad48757dfb14 Mon Sep 17 00:00:00 2001
From: Sawan <sawankushwah457@gmail.com>
Date: Mon, 21 Oct 2024 16:38:21 +0530
Subject: [PATCH 4/4] improvement

---
 src/components/ModalDetailsPage.tsx | 194 +++++++++++++++++++---------
 1 file changed, 134 insertions(+), 60 deletions(-)

diff --git a/src/components/ModalDetailsPage.tsx b/src/components/ModalDetailsPage.tsx
index f0109a7..3e11dc1 100644
--- a/src/components/ModalDetailsPage.tsx
+++ b/src/components/ModalDetailsPage.tsx
@@ -143,38 +143,109 @@ const CustomModal: React.FC<CustomModalProps> = ({
   bgColor = 'white',
   unmount,
 }) => {
-  return (
+  const [copiedText, setCopiedText] = useState<string | null>(null);
+  const copyToClipboard = (text: string, key: string) => {
+    navigator.clipboard.writeText(text).then(() => {
+      setCopiedText(text);
+      setTimeout(() => setCopiedText(null), 2000);
+    });
+  };
+
+  const CopyButton: React.FC<{ text: string; codeKey: string }> = ({
+    text,
+    codeKey,
+  }) => (
+    <button
+      onClick={() => copyToClipboard(text, codeKey)}
+      className={`absolute top-2 right-2 ${getGlassyClasses()} p-2 hover:bg-white/40 transition-all duration-300 z-10`}
+      title='Copy to clipboard'
+    >
+      {copiedText ? (
+        <Check size={16} className='text-green-600' />
+      ) : (
+        <Copy size={16} className='text-gray-100' />
+      )}
+    </button>
+  );
+
+  const customUsageCode = `
+  const getGlassyClasses = (opacity = 20) => { return \`backdrop-filter backdrop-blur-lg bg-white bg-opacity-$\{opacity} border border-white border-opacity-20 rounded-lg shadow-lg transition-all duration-300\`; };
+
     <div
-      className='fixed inset-0 flex items-center justify-center bg-black/50'
-      onClick={unmount}
+       className={\`${getGlassyClasses()} p-6 mb-14\`}
+      onClick=${unmount}
     >
       <div
         className='relative p-6 rounded-lg shadow-lg'
-        style={{ backgroundColor: bgColor, maxWidth: '500px', width: '100%' }}
+        style={{ backgroundColor: ${bgColor}, maxWidth: '500px', width: '100%' }}
         onClick={(e) => e.stopPropagation()} // Prevent closing on modal click
       >
-        <h2 className='text-2xl font-bold mb-4'>{heading}</h2>
+        <h2 className='text-2xl font-bold mb-4'>${heading}</h2>
         {imageUrl && (
           <div className='mb-4'>
-            <img src={imageUrl} alt={heading} className='w-full h-auto' />
+            <img src=${imageUrl} alt={heading} className='w-full h-auto' />
           </div>
         )}
-        <p className='mb-4'>{paragraph}</p>
+        <p className='mb-4'>${paragraph}</p>
         <button
           className='px-4 py-2 rounded text-white'
           style={{ backgroundColor: CTA.color }}
-          onClick={unmount}
+          onClick=${unmount}
         >
-          {CTA.text}
+          ${CTA.text}
         </button>
         <button
           className='absolute top-2 right-2 text-black'
-          onClick={unmount}
+          onClick=${unmount}
         >
           &#x2715;
         </button>
       </div>
-    </div>
+    </div>  
+  
+  `
+
+  return (
+    <>
+      <div
+        className={`${getGlassyClasses()} p-6 mb-14`}
+        onClick={unmount}
+      >
+        <div
+          className='relative p-6 rounded-lg shadow-lg'
+          style={{ backgroundColor: bgColor, maxWidth: '500px', width: '100%' }}
+          onClick={(e) => e.stopPropagation()} // Prevent closing on modal click
+        >
+          <h2 className='text-2xl font-bold mb-4'>{heading}</h2>
+          {imageUrl && (
+            <div className='mb-4'>
+              <img src={imageUrl} alt={heading} className='w-full h-auto' />
+            </div>
+          )}
+          <p className='mb-4'>{paragraph}</p>
+          <button
+            className='px-4 py-2 rounded text-white'
+            style={{ backgroundColor: CTA.color }}
+            onClick={unmount}
+          >
+            {CTA.text}
+          </button>
+          <button
+            className='absolute top-2 right-2 text-black'
+            onClick={unmount}
+          >
+            &#x2715;
+          </button>
+        </div>
+      </div>
+
+      <div className='relative'>
+        <pre className='bg-gray-800 text-white p-6 rounded-lg overflow-x-auto whitespace-pre-wrap max-sm:text-[0.55rem]'>
+          {customUsageCode}
+        </pre>
+        <CopyButton text={customUsageCode} codeKey='customUsage' />
+      </div>
+    </>
   );
 };
 
@@ -309,60 +380,63 @@ const ModalDetail: React.FC = () => {
   const [copiedText, setCopiedText] = useState<string | null>(null);
   const [modal, setModal] = useState(false);
 
-  const basicUsageCode = `interface CustomModalProps {
-  heading: string;
-  paragraph: string;
-  CTA: {
-    text: string;
-    color: string;
-  };
-  imageUrl?: string;
-  bgColor?: string; // Make this optional
-  unmount: () => void;
-}
+  const basicUsageCode = ` 
+  
+  const getGlassyClasses = (opacity = 20) => { return \`backdrop-filter backdrop-blur-lg bg-white bg-opacity-$\{opacity} border border-white border-opacity-20 rounded-lg shadow-lg transition-all duration-300\`; };
 
-const CustomModal: React.FC<CustomModalProps> = ({
-  heading,
-  paragraph,
-  CTA,
-  imageUrl,
-  bgColor = 'white',
-  unmount,
-}) => {
-  return (
-    <div
-      className='fixed inset-0 flex items-center justify-center bg-black/50'
-      onClick={unmount}
-    >
-      <div
-        className='relative p-6 rounded-lg shadow-lg'
-        style={{ backgroundColor: bgColor, maxWidth: '500px', width: '100%' }}
-        onClick={(e) => e.stopPropagation()} // Prevent closing on modal click
-      >
-        <h2 className='text-2xl font-bold mb-4'>{heading}</h2>
-        {imageUrl && (
-          <div className='mb-4'>
-            <img src={imageUrl} alt={heading} className='w-full h-auto' />
-          </div>
-        )}
-        <p className='mb-4'>{paragraph}</p>
-        <button
-          className='px-4 py-2 rounded text-white'
-          style={{ backgroundColor: CTA.color }}
-          onClick={unmount}
-        >
-          {CTA.text}
-        </button>
+
+  <div className='mb-8'>
+        <h3 className='text-2xl font-semibold mb-4'>Basic Example</h3>
+        <p className='mb-4 text-gray-100'>
+          This example demonstrates the basic usage of the modal with a heading, paragraph, and a simple call-to-action button.
+        </p>
         <button
-          className='absolute top-2 right-2 text-black'
-          onClick={unmount}
+          onClick={() => setBasicModal(true)}
+          className={\`mb-4 $\{getGlassyClasses()} px-4 py-2 hover:bg-white/40 transition-all duration-300 text-gray-100\`}
         >
-          &#x2715;
+          Open Basic Modal
         </button>
+        {basicModal && (
+          <Modal
+            heading='Basic Modal'
+            paragraph='This is a simple modal with a CTA button.'
+            CTA={{ text: 'Save', color: '#00dd43' }}
+            imageUrl=''
+            unmount={() => setBasicModal(false)}
+          />
+        )}
       </div>
-    </div>
-  );
-};
+
+
+
+      const Modal: React.FC<ModalProps> = props => {
+          const { imageUrl, heading, paragraph, CTA, unmount, onCtaClick } = props;
+          return (
+            <div className=' w-[100vw] h-[100vh] fixed z-10 top-0 left-0 bg-opacity-50 backdrop-blur-sm flex items-center justify-center bg-black/20'>
+              <div className=' min-w-[30vw] relative h-auto min-h-[30vh] flex flex-col items-center justify-center gap-6 p-4 backdrop-filter backdrop-blur-xl bg-white/50 border border-white/20 rounded-xl shadow-lg transition-all duration-300'>
+                <X
+                  className='absolute top-4 right-4 hover:bg-white/80 transition-colors p-1 cursor-pointer'
+                  onClick={unmount}
+                />
+                <h1 className='text-black text-2xl font-bold'>{heading}</h1>
+                {imageUrl && (
+                  <img
+                    src={props.imageUrl}
+                    alt=''
+                    className='w-[80%] h-[20vw] object-cover'
+                  />
+                )}
+                <p className='text-gray-100'>{paragraph}</p>
+                <button
+                  onClick={onCtaClick}
+                  className={\`px-3 py-1 rounded hover:bg-opacity-50 font-medium text-gray-100 transition-colors duration-300\`}
+                  style={{ backgroundColor: CTA.color }}
+                >
+                  {CTA.text}
+                </button>
+              </div>
+            </div>
+          );
 
 `;