Feat/animated search 23 (#167)

* fix: Add Dropdown / Select Component #11 (#33)

* chore(main): release devui 1.1.0 (#166)

* feat(header): add animated live search bar

* Merge branch 'feat/theme-switcher-17' and resolve conflict

---------

Co-authored-by: Yashveer Singh <astomar6396@gmail.com>
Co-authored-by: Fahim Ahammed Firoz <68865444+fahimahammed@users.noreply.github.com>

Author: 3 people

CHANGELOG.md

@@ -1,5 +1,34 @@
 # Changelog
 
+## [1.1.0](https://github.com/fahimahammed/DevUI/compare/devui-v1.0.0...devui-v1.1.0) (2025-10-03)
+
+
+### Features
+
+* Add About Us page, dark theme, and main page navigation ([#14](https://github.com/fahimahammed/DevUI/issues/14)) ([#31](https://github.com/fahimahammed/DevUI/issues/31)) ([f90fdb2](https://github.com/fahimahammed/DevUI/commit/f90fdb2724cfcab723ad6ef7db99682a68dc3a2b))
+* add cursor pointer to clickable elements ([#34](https://github.com/fahimahammed/DevUI/issues/34)) ([c1c39c9](https://github.com/fahimahammed/DevUI/commit/c1c39c9612d534cab51f4d2061d72642f2d9e78e))
+* add skeleton loading support to ComponentCard ([#134](https://github.com/fahimahammed/DevUI/issues/134)) ([d9a0a54](https://github.com/fahimahammed/DevUI/commit/d9a0a54ac78cf1481e0b24f79657dc9a7994a3e7))
+* add templates feature request, but report, documentation update and pull request template ([#127](https://github.com/fahimahammed/DevUI/issues/127)) ([1a1fa84](https://github.com/fahimahammed/DevUI/commit/1a1fa84def19f5028a4cace4242a2c2f84c9edf3))
+* Add Versatile File Upload Component with Drag-and-Drop & Progress ([#147](https://github.com/fahimahammed/DevUI/issues/147)) ([eec173d](https://github.com/fahimahammed/DevUI/commit/eec173d7acbaf1644e01e221b7c0498b8a373e96))
+* **chat:** add ChatBox component and update components.tsx ([#78](https://github.com/fahimahammed/DevUI/issues/78)) ([5232da5](https://github.com/fahimahammed/DevUI/commit/5232da5761bc17df2efeb1d58c3b7d1b8d609ba6))
+* Feature/tooltip and fab components ([#144](https://github.com/fahimahammed/DevUI/issues/144)) ([08ab221](https://github.com/fahimahammed/DevUI/commit/08ab221118b8c6bcaa736f0eb5073758a047c28d))
+* integrate ThemeColorPicker across app with enhanced UI animations ([#66](https://github.com/fahimahammed/DevUI/issues/66)) ([19008f5](https://github.com/fahimahammed/DevUI/commit/19008f5a96bdc8c57c4c0b305b80e90b13efe483))
+* NEW COMPONENT ([#143](https://github.com/fahimahammed/DevUI/issues/143)) ([42ee402](https://github.com/fahimahammed/DevUI/commit/42ee4026e1cd9a54188e975674bf8b1d5b75f7eb))
+* **search:** debounced search, title highlight, dynamic category counts; remove native clear icon ([#126](https://github.com/fahimahammed/DevUI/issues/126)) ([fa50ed5](https://github.com/fahimahammed/DevUI/commit/fa50ed556099cd9b10932a9fa728e491312661d8))
+* **toast:** add Toast component with demo and integrate Toaster in the UI ([#82](https://github.com/fahimahammed/DevUI/issues/82)) ([c1025ad](https://github.com/fahimahammed/DevUI/commit/c1025ad274aeb05118dbbd9bab3c77002b0cb222))
+* **ui:** add Button loading state, enhance Card hover, and add glow utility ([#65](https://github.com/fahimahammed/DevUI/issues/65)) ([b46a6ff](https://github.com/fahimahammed/DevUI/commit/b46a6ff2717400fc86c92ba06ad85f0ab7f7d053))
+
+
+### Bug Fixes
+
+* Add Syntax Highlighting for Code Blocks [#6](https://github.com/fahimahammed/DevUI/issues/6) ([#61](https://github.com/fahimahammed/DevUI/issues/61)) ([16deed3](https://github.com/fahimahammed/DevUI/commit/16deed3a357765ea0a2d5a5bdbf154614070eb58))
+* conflict issue ([67e6913](https://github.com/fahimahammed/DevUI/commit/67e6913db58b5ea2c51e72ba218e15afbc667762))
+* fix merge conflict issue ([cfea695](https://github.com/fahimahammed/DevUI/commit/cfea6956d0209c217d4349048d4393f746f6ecea))
+* **home:** resolve slider visibility issue on home page ([#56](https://github.com/fahimahammed/DevUI/issues/56)) ([#86](https://github.com/fahimahammed/DevUI/issues/86)) ([6d0aa07](https://github.com/fahimahammed/DevUI/commit/6d0aa07bb0503d2916215d415a2ccf2ce727061b))
+* merge conflict ([4990ee9](https://github.com/fahimahammed/DevUI/commit/4990ee91c9a86ab5a153e5c17c283093bef921c6))
+* merge conflict fix ([a7cccc3](https://github.com/fahimahammed/DevUI/commit/a7cccc3a31bcd9589bd315abf84223ff6af85cc0))
+* sync code with prod  ([#142](https://github.com/fahimahammed/DevUI/issues/142)) ([9aa0849](https://github.com/fahimahammed/DevUI/commit/9aa0849e463740a458080dbc96c220568335c6ec))
+
 ## 1.0.0 (2025-10-03)
 
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "devui",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",

package.json

@@ -2,7 +2,7 @@
 import { useState, useMemo, useEffect } from "react";
 import { ComponentCard } from "@/components/ComponentCard";
 import { componentsData } from "@/data/components";
-import { Input } from "@/components/ui/input";
+// ❌ We are removing the Input component from here as it's moving to the Header
 import { Badge } from "@/components/ui/badge";
 import {
   Github,
@@ -18,6 +18,7 @@ import Link from "next/link";
 import Header from "@/components/Header";
 
 const Index = () => {
+  // ✅ This logic STAYS here. This page will control the search.
   const [searchQuery, setSearchQuery] = useState("");
   const [debouncedQuery, setDebouncedQuery] = useState("");
 
@@ -27,7 +28,7 @@ const Index = () => {
   }, [searchQuery]);
   const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
 
-  // First apply search-only filtering (case-insensitive)
+  // This logic is all correct and stays here
   const searchFilteredComponents = useMemo(() => {
     const searchLower = debouncedQuery.toLowerCase().trim();
     if (!searchLower) return componentsData;
@@ -41,7 +42,6 @@ const Index = () => {
     });
   }, [debouncedQuery]);
 
-  // Get categories with counts based on current search results
   const categories = useMemo(() => {
     const categoryMap = new Map<string, number>();
     searchFilteredComponents.forEach((component) => {
@@ -58,7 +58,6 @@ const Index = () => {
     }));
   }, [searchFilteredComponents]);
 
-  // Enhanced filtering with better search
   const filteredComponents = useMemo(() => {
     return searchFilteredComponents.filter((component) => {
       const matchesCategory =
@@ -67,7 +66,6 @@ const Index = () => {
     });
   }, [searchFilteredComponents, selectedCategory]);
 
-  // Clear all filters
   const clearFilters = () => {
     setSearchQuery("");
     setSelectedCategory(null);
@@ -77,15 +75,17 @@ const Index = () => {
 
   return (
     <div className="min-h-screen bg-background">
+      {/* ✅ We will now pass the search state and function to the Header */}
+      <Header searchQuery={searchQuery} setSearchQuery={setSearchQuery} />
 
-      <Header />
-      {/* Hero Section - Modern & Clean */}
+      {/* Hero Section */}
       <section
         id="main-content"
         className="relative overflow-hidden border-b border-border/50"
       >
-        {/* Animated Background */}
-        <div className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]" />
+        {/* ... (Hero section content remains exactly the same) ... */}
+         {/* Animated Background */}
+         <div className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]" />
         <div className="absolute inset-0">
           <div className="absolute top-20 left-20 w-72 h-72 bg-primary/10 dark:bg-primary/5 rounded-full blur-[100px] animate-glow float-animation" />
           <div
@@ -206,49 +206,15 @@ const Index = () => {
         <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-border to-transparent" />
       </section>
 
-      {/* Search & Filters - Engaging Animated Search */}
+      {/* Filters Section */}
       <section className="container mx-auto px-4 sm:px-6 lg:px-8 py-14 sm:py-16">
         <div className="max-w-5xl mx-auto space-y-6">
-          {/* Search Bar */}
-          <div className="relative group">
-            {/* Animated Glow Background */}
-            <div className="absolute inset-0 bg-gradient-to-r from-primary/30 to-accent/30 rounded-xl blur-2xl opacity-0 group-focus-within:opacity-100 transition-opacity duration-500 animate-fade-in" />
+          
+          {/* ❌ THE SEARCH BAR UI HAS BEEN REMOVED FROM HERE */}
 
-            <div className="relative">
-              {/* Search Icon */}
-              <Search className="absolute left-4 top-1/2 -translate-y-1/2 h-6 w-6 text-primary pointer-events-none" />
-
-              {/* Input Field */}
-              <div className="relative">
-
-              <Input
-                type="text"
-                placeholder="Search components by name, category, or description..."
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                className="pl-14 lg:text-lg font-normal pr-12 h-16 bg-card/60 dark:bg-card/30 backdrop-blur-md border  transition-all duration-300 rounded-xl hover:shadow-lg  focus:shadow-lg focus:shadow-primary/20 focus-ring animate-fade-in"
-              >
-                
-
-              </Input>
-                <Search className="top-1/3 left-5 absolute text-zinc-500"/>
-                </div>
-
-              {/* Clear Button */}
-              {searchQuery && (
-                <button
-                  onClick={() => setSearchQuery("")}
-                  className="absolute right-4 top-1/2 -translate-y-1/2 hover:text-foreground transition-all duration-200 p-1 hover:bg-muted/50 rounded-md focus-ring animate-fade-in"
-                  aria-label="Clear search"
-                >
-                  <X className="h-4 w-4" />
-                </button>
-              )}
-            </div>
-          </div>
-
-          {/* Filter Header */}
+          {/* Filter Header and Category Badges stay here */}
           <div className="flex items-center justify-between flex-wrap gap-4">
+            {/* ... (Filter header content remains exactly the same) ... */}
             <div className="flex items-center gap-3">
               <Filter className="h-5 w-5 text-primary animate-fade-in" />
               <span className="text-base font-semibold text-foreground animate-fade-in">
@@ -274,8 +240,8 @@ const Index = () => {
             )}
           </div>
 
-          {/* Category Badges */}
           <div className="flex flex-wrap gap-3" id="component-categories">
+            {/* ... (Category badges remain exactly the same) ... */}
             <Badge
               variant={selectedCategory === null ? "default" : "outline"}
               className="cursor-pointer transition-transform duration-200 hover:scale-105 text-sm sm:text-base px-4 py-2 rounded-full animate-fade-in"
@@ -297,8 +263,9 @@ const Index = () => {
         </div>
       </section>
 
-      {/* Components Grid - Masonry Layout */}
+      {/* Components Grid Section */}
       <section className="container mx-auto px-4 sm:px-6 lg:px-8 pb-20 sm:pb-24 lg:pb-32">
+        {/* ... (The entire component grid display logic remains exactly the same) ... */}
         <div className="max-w-6xl mx-auto">
           {filteredComponents.length > 0 ? (
             <div className="grid gap-6 sm:gap-8 grid-cols-1 lg:grid-cols-2">
@@ -362,6 +329,7 @@ const Index = () => {
         </div>
       </section>
 
+      {/* ... (Rest of the page and footer remain the same) ... */}
       <section className="flex justify-evenly items-center">
 
         <h1 className="text-5xl sm:text-6xl md:text-5xl lg:text-7xl min-h-[30vh] font-bold tracking-tight animate-fade-up px-4 mb-10 w-1/2">