Shop Expand Copy this Tailwind Component 0to Your Project

I want generate descrpiton for my shop component that will include in props description , i want to put this component under the banner of the shop and above the actual products, can you make this component compact and maybe opens by clicking , here how my shop looks like : <div className="min h screen bg gray 900"> <ShopBanner imageUrl={shopImage} title={shop.name} /> <nav className="bg gray 900 p 4 sticky top 0 z 50 border b border gray 800"> <div className="container mx auto flex items center justify center"> <div className="relative w full max w 2xl"> <input type="text" placeholder="Search products..." value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} className="w full bg gray 800 text white px 4 py 2 rounded lg focus:outline none focus:ring 2 focus:ring purple 500" /> <FaSearch className="absolute right 3 top 3 text gray 400" /> </div> </div> </nav> <main className="container mx auto px 4 py 8 bg gray 900"> <div className="mb 8"> <h2 className="text 2xl font bold text white text center"> Featured Products </h2> </div> {filteredProducts.length === 0 ? ( <EmptyState /> ) : ( <div className="grid grid cols 1 md:grid cols 2 lg:grid cols 3 xl:grid cols 4 gap 6"> {filteredProducts.map((product) => ( <ProductCard key={product.id} product={product} /> ))} <AddMoreCard /> </div> )} </main> </div> );