Merge branch 'main' into scroll-progress-bar

.github/workflows/greetings.yml

@@ -7,8 +7,8 @@ jobs:
       issues: write
       pull-requests: write
     steps:
-    - uses: actions/first-interaction@v1
-      with:
-        repo-token: ${{ secrets.GITHUB_TOKEN }}
-        issue-message: "👋 Thank you @${{ github.actor }} for raising an issue! We appreciate your effort in helping us improve. Our team will review it shortly. Stay tuned!"
-        pr-message: " 🎉 Thank you @${{ github.actor }} for your contribution! Your pull request has been submitted successfully. A maintainer will review it as soon as possible. We appreciate your support in making this project better"
+      - uses: actions/first-interaction@v1
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          issue-message: '👋 Thank you @${{ github.actor }} for raising an issue! We appreciate your effort in helping us improve. Our team will review it shortly. Stay tuned!'
+          pr-message: ' 🎉 Thank you @${{ github.actor }} for your contribution! Your pull request has been submitted successfully. A maintainer will review it as soon as possible. We appreciate your support in making this project better'

README.md

@@ -174,6 +174,18 @@ git push origin my-feature-branch
 
 -If more than 1 week issue is not resolved then it will be assigned to someone else.
 
+-Important Rule for Creating component to follow the order of component.
+
+1. Basic Usage
+2. Props
+3.Customizable component
+4. Theme (of your new component)
+5. Example
+6. Copy code 
+
+-for eg: Button component,Progress Bar components 
+
+
 ## Our Contributors
 
 - We truly appreciate your incredible contributions to this project! Your dedication and hard work are vital to its continued growth and success. If you’ve found value in it, don’t forget to show your support by giving our repository a star! ⭐
@@ -189,5 +201,3 @@ git push origin my-feature-branch
 ## ⭐ Give it a Star!
 
 If you enjoy using GlassyUI-Components and find it helpful, **please give it a star**! Your support encourages further development and improvement.
-
-

src/components/AboutUsPage.tsx

@@ -1,6 +1,7 @@
-
 import React, { useEffect } from 'react';
 import BackToTopButton from './BackToTop';
+import styled from 'styled-components';
+import { FaGithub } from 'react-icons/fa';
 
 // Styled component for the main container of the About Us page
 const AboutUsContainer = styled.div`
@@ -12,7 +13,6 @@ const AboutUsContainer = styled.div`
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); // Shadow for depth
   position: relative; // For pseudo-element positioning
 
-
   @media (max-width: 600px) {
     padding: 20px; // Adjust padding for smaller screens
   }

src/components/ContributorsPage.tsx

@@ -3,6 +3,7 @@
 import React, { useEffect, useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import BackToTopButton from './BackToTop';
+import { HiOutlineChevronDoubleDown } from 'react-icons/hi2';
 
 interface Contributor {
   id: number;

src/components/Footer.tsx

@@ -152,8 +152,7 @@ const Footer: React.FC = () => {
           fontSize: '14px',
           color: '#fff',
           position: 'relative',
-          top: '135px',
-          right: '100px',
+          right: '-300px',
         }}
       >
         © 2023 GlassyUI. All rights reserved.

src/components/GlassyUIComponentsPage.tsx

@@ -16,10 +16,12 @@ import {
   Contact,
   Search,
 } from 'lucide-react';
+
 import Accordion from './Accordion';
 
 // Define the ComponentCardProps interface
 
+
 interface ComponentCardProps {
   title: string;
   description: string;
@@ -36,13 +38,6 @@ const GlassyUIComponentsPage: React.FC = () => {
   const [searchFilter, setSearchFilter] = useState<string>('');
   const componentsPerPage = 9;
 
-  const scrollToNextSection = () => {
-    window.scrollBy({
-      top: window.innerHeight,
-      behavior: 'smooth',
-    });
-  };
-
   const componentsData = [
     {
       title: 'Toast',
@@ -180,15 +175,18 @@ const GlassyUIComponentsPage: React.FC = () => {
   const [filteredData, setFilteredData] = useState(componentsData);
 
   useEffect(() => {
+
     const data = componentsData.filter(component => {
       if (searchFilter) {
+
         return component.title
           .toLowerCase()
           .includes(searchFilter.trim().toLowerCase());
       }
       return true; // return all components if no filter is set
     });
-    setFilteredData(data);
+    setFilteredData(filteredComponents);
+    setCurrentPage(1); // Reset to first page when searching
   }, [searchFilter]);
 
   const totalPages = Math.ceil(filteredData.length / componentsPerPage);
@@ -247,14 +245,15 @@ const GlassyUIComponentsPage: React.FC = () => {
     <div className='min-h-screen font-sans bg-gradient-to-br from-gray-800 via-gray-900 to-black text-white'>
       <BackToTopButton />
       <div className='container mx-auto px-4 py-8 lg:py-12'>
-        <header className='grid grid-cols-3 mb-16'>
+        <header className='flex justify-between items-center mb-16 px-6 py-4 rounded-lg pl-0'>
           <div
-            className='text-3xl lg:text-4xl font-bold tracking-tight cursor-pointer hover:text-pink-200 transition-colors duration-300'
+            className='text-3xl lg:text-4xl font-extrabold tracking-tight cursor-pointer hover:text-pink-300 transition-colors duration-300 text-white'
             onClick={() => navigate('/')}
           >
             GlassyUI
           </div>
 
+
           <input
 
             className='rounded-full text-black p-2'
@@ -264,17 +263,8 @@ const GlassyUIComponentsPage: React.FC = () => {
               setSearchFilter(e.target.value);
             }}
           />
-        </header>
 
-        {/* Scroll Down Button */}
-        <div className='fixed top-15 right-10 z-50'>
-          <button
-            onClick={scrollToNextSection}
-            className='animate-bounce bg-white/20 text-white hover:bg-pink-200 hover:text-black p-4 rounded-full shadow-lg transition-all duration-300'
-          >
-            <HiOutlineChevronDoubleDown size={20} />
-          </button>
-        </div>
+        </header>
 
         <main>
           <h1 className='text-4xl lg:text-6xl font-extrabold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-white to-pink-200'>
@@ -296,12 +286,38 @@ const GlassyUIComponentsPage: React.FC = () => {
                 onClick={component.onClick}
               />
             ))}
+            {filteredData.length === 0 && (
+              <section className='bg-white dark:bg-gray-900'>
+                <div className='py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6'>
+                  <div className='mx-auto max-w-screen-sm text-center'>
+                    <h1 className='mb-4 text-7xl tracking-tight font-extrabold lg:text-9xl text-blue-600 dark:text-primary-500'>
+                      404
+                    </h1>
+                    <p className='mb-4 text-3xl tracking-tight font-bold text-gray-900 md:text-4xl dark:text-white'>
+                      Something&apos;s missing.
+                    </p>
+                    <p className='mb-4 text-lg font-light text-gray-500 dark:text-gray-400'>
+                      Sorry, we can&apos;t find that component. You&apos;ll find
+                      lots to explore on the home page.{' '}
+                    </p>
+                    <button
+                      className='mt-6 px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg shadow-md transition-all duration-300'
+                      onClick={() => navigate('/')}
+                    >
+                      Back to Homepage
+                    </button>
+                  </div>
+                </div>
+              </section>
+            )}
           </div>
 
           <div className='flex justify-between items-center mt-8'>
             <button
               onClick={prevPage}
+
               className='bg-pink-500 text-white py-2 px-4 rounded-md disabled:opacity-50'
+
               disabled={currentPage === 1}
             >
               Previous
@@ -311,7 +327,9 @@ const GlassyUIComponentsPage: React.FC = () => {
             </span>
             <button
               onClick={nextPage}
+
               className='bg-pink-500 text-white py-2 px-4 rounded-md disabled:opacity-50'
+
               disabled={currentPage === totalPages}
             >
               Next