fix(home): resolve slider visibility issue on home page (#56) (#86)

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

* fix(home): resolve slider visibility issue on home page (#56)

---------

Co-authored-by: Yashveer Singh <astomar6396@gmail.com>

Author: khushthecoder

package-lock.json

@@ -3,6 +3,7 @@ import { useState, useMemo } from "react";
 import { ComponentCard } from "@/components/ComponentCard";
 import { componentsData } from "@/data/components";
 import { Input } from "@/components/ui/input";
+import { Slider } from "../components/ui/slider";
 import { Badge } from "@/components/ui/badge";
 import { Github, Search, Sparkles, Filter, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
@@ -12,8 +13,6 @@ import { Toaster } from "sonner";
 const Index = () => {
   const [searchQuery, setSearchQuery] = useState("");
   const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
-
-  // Get all unique categories with counts
   const categories = useMemo(() => {
     const categoryMap = new Map<string, number>();
     componentsData.forEach(component => {
@@ -23,26 +22,18 @@ const Index = () => {
     });
     return Array.from(categoryMap.entries()).map(([name, count]) => ({ name, count }));
   }, []);
-
-  // Enhanced filtering with better search
   const filteredComponents = useMemo(() => {
     return componentsData.filter(component => {
       const searchLower = searchQuery.toLowerCase().trim();
-      
-      // Enhanced search: title, description, category, and id
-      const matchesSearch = !searchLower || 
+      const matchesSearch = !searchLower ||
         component.title.toLowerCase().includes(searchLower) ||
         component.description.toLowerCase().includes(searchLower) ||
         component.category?.toLowerCase().includes(searchLower) ||
         component.id.toLowerCase().includes(searchLower);
-      
       const matchesCategory = !selectedCategory || component.category === selectedCategory;
-      
       return matchesSearch && matchesCategory;
     });
   }, [searchQuery, selectedCategory]);
-
-  // Clear all filters
   const clearFilters = () => {
     setSearchQuery("");
     setSelectedCategory(null);
@@ -52,7 +43,6 @@ const Index = () => {
 
   return (
     <div className="min-h-screen bg-zinc-50">
-      {/* Hero Section */}
       <section className="relative overflow-hidden border-b border-border">
         <div className="absolute inset-0 bg-gradient-primary opacity-5" />
         <div className="absolute inset-0">
@@ -76,23 +66,28 @@ const Index = () => {
               Copy, paste, and customize to build amazing UIs.
             </p>
 
-            <div className="flex items-center justify-center gap-3 sm:gap-4 flex-wrap px-4">
-              <Link href={"https://github.com/fahimahammed/DevUI"}>
-                <Button size="lg" className="bg-primary hover:opacity-90 transition-opacity text-sm sm:text-base">
-                  <Github className="mr-2 h-4 w-4 sm:h-5 sm:w-5" />
-                  <span className="hidden sm:inline">Star on GitHub</span>
-                  <span className="sm:hidden">Star</span>
-                </Button>
-              </Link>
-              <Button size="lg" variant="outline" className="border-primary/20 hover:bg-primary/5 text-sm sm:text-base">
-                <span className="hidden sm:inline">Browse Components</span>
-                <span className="sm:hidden">Browse</span>
-              </Button>
-              <Link href="/about">
-                <Button size="lg" variant="ghost" className="text-primary font-semibold border border-primary/10 hover:bg-primary/10 text-sm sm:text-base">
-                  About Us
+            <div className="flex flex-col items-center justify-center gap-6 sm:gap-8 px-4">
+              <div className="w-full max-w-md mx-auto">
+                <Slider defaultValue={[40]} min={0} max={100} className="my-4" />
+              </div>
+              <div className="flex items-center justify-center gap-3 sm:gap-4 flex-wrap">
+                <Link href={"https://github.com/fahimahammed/DevUI"}>
+                  <Button size="lg" className="bg-primary hover:opacity-90 transition-opacity text-sm sm:text-base">
+                    <Github className="mr-2 h-4 w-4 sm:h-5 sm:w-5" />
+                    <span className="hidden sm:inline">Star on GitHub</span>
+                    <span className="sm:hidden">Star</span>
+                  </Button>
+                </Link>
+                <Button size="lg" variant="outline" className="border-primary/20 hover:bg-primary/5 text-sm sm:text-base">
+                  <span className="hidden sm:inline">Browse Components</span>
+                  <span className="sm:hidden">Browse</span>
                 </Button>
-              </Link>
+                <Link href="/about">
+                  <Button size="lg" variant="ghost" className="text-primary font-semibold border border-primary/10 hover:bg-primary/10 text-sm sm:text-base">
+                    About Us
+                  </Button>
+                </Link>
+              </div>
             </div>
 
             <div className="flex items-center justify-center gap-2 sm:gap-4 text-xs sm:text-sm text-muted-foreground flex-wrap">
@@ -130,7 +125,6 @@ const Index = () => {
             )}
           </div>
 
-          {/* Filter Header */}
           <div className="flex items-center justify-between flex-wrap gap-3 sm:gap-4">
             <div className="flex items-center gap-2">
               <Filter className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground" />

src/app/page.tsx

@@ -40,6 +40,7 @@ import { toast } from "sonner";
 
 
 
+
 export const componentsData = [
     {
         id: "button",