From 8c00d5d0791038c7893083a60bb3842423e052a6 Mon Sep 17 00:00:00 2001
From: Daniel Gonzalez <danielhumgon@gmail.com>
Date: Sat, 11 Oct 2025 18:00:43 -0400
Subject: [PATCH] feat(NFTs): Added categories dropdown to nfts page

---
 .../app-body/nfts-for-sale/filter-dropdown.js | 41 +++++++++++++++++++
 .../app-body/nfts-for-sale/index.js           |  9 +++-
 .../content-creators/content-creators-list.js | 27 +++---------
 .../nostr/content-creators/filter-dropdown.js | 31 ++++++++++++++
 4 files changed, 85 insertions(+), 23 deletions(-)
 create mode 100644 src/components/app-body/nfts-for-sale/filter-dropdown.js
 create mode 100644 src/components/app-body/nostr/content-creators/filter-dropdown.js

diff --git a/src/components/app-body/nfts-for-sale/filter-dropdown.js b/src/components/app-body/nfts-for-sale/filter-dropdown.js
new file mode 100644
index 0000000..664de79
--- /dev/null
+++ b/src/components/app-body/nfts-for-sale/filter-dropdown.js
@@ -0,0 +1,41 @@
+import React from 'react'
+import { Dropdown } from 'react-bootstrap'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faFilter } from '@fortawesome/free-solid-svg-icons'
+
+function FilterDropdown (props) {
+  const { selectedFilter, setSelectedFilter } = props
+
+  return (
+    <Dropdown>
+      <Dropdown.Toggle
+        variant='outline-secondary'
+        className='d-flex align-items-center justify-content-around gap-2 mt-3'
+        style={{ minWidth: '150px' }}
+      >
+        <FontAwesomeIcon icon={faFilter} />
+        <span>{selectedFilter}</span>
+      </Dropdown.Toggle>
+
+      <Dropdown.Menu>
+        <Dropdown.Item onClick={() => setSelectedFilter('Art')}>
+          Art
+        </Dropdown.Item>
+        <Dropdown.Item onClick={() => setSelectedFilter('Video')}>
+          Video
+        </Dropdown.Item>
+        <Dropdown.Item onClick={() => setSelectedFilter('Writing')}>
+          Writing
+        </Dropdown.Item>
+        <Dropdown.Item onClick={() => setSelectedFilter('Download')}>
+          Download
+        </Dropdown.Item>
+        <Dropdown.Item onClick={() => setSelectedFilter('Misc')}>
+          Misc
+        </Dropdown.Item>
+      </Dropdown.Menu>
+    </Dropdown>
+  )
+}
+
+export default FilterDropdown
diff --git a/src/components/app-body/nfts-for-sale/index.js b/src/components/app-body/nfts-for-sale/index.js
index 74a6976..6f922dc 100644
--- a/src/components/app-body/nfts-for-sale/index.js
+++ b/src/components/app-body/nfts-for-sale/index.js
@@ -20,6 +20,7 @@ import { faRedo } from '@fortawesome/free-solid-svg-icons'
 // Local libraries
 import config from '../../../config'
 import TokenCard from './token-card'
+import FilterDropdown from './filter-dropdown'
 
 // Global variables and constants
 const SERVER = config.dexServer
@@ -35,6 +36,7 @@ function NftsForSale (props) {
   const [dataAreLoaded, setDataAreLoaded] = useState(false)
   const [currentPage, setCurrentPage] = useState(0)
   const [totalPages, setTotalPages] = useState(0)
+  const [selectedFilter, setSelectedFilter] = useState('Art')
 
   // Handler for previous page
   const handlePreviousPage = () => {
@@ -304,6 +306,9 @@ function NftsForSale (props) {
         <Col>
           <h1>NFTs for Sale</h1>
         </Col>
+        <Col className='d-flex justify-content-end'>
+          <FilterDropdown selectedFilter={selectedFilter} setSelectedFilter={setSelectedFilter} />
+        </Col>
       </Row>
       <Row>
         <Col xs={12} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
@@ -339,7 +344,7 @@ function NftsForSale (props) {
 
       {/* Pagination Controls */}
       {offersAreLoaded && totalPages > 1 && (
-        <div 
+        <div
           style={{
             position: 'fixed',
             bottom: '70px',
@@ -395,7 +400,7 @@ function NftsForSale (props) {
             ← Previous
           </Button>
 
-          <div 
+          <div
             style={{
               display: 'flex',
               alignItems: 'center',
diff --git a/src/components/app-body/nostr/content-creators/content-creators-list.js b/src/components/app-body/nostr/content-creators/content-creators-list.js
index 057935e..bf72c49 100644
--- a/src/components/app-body/nostr/content-creators/content-creators-list.js
+++ b/src/components/app-body/nostr/content-creators/content-creators-list.js
@@ -11,14 +11,13 @@
 */
 
 import React, { useState, useEffect, useCallback } from 'react'
-import { Container, Spinner, Dropdown } from 'react-bootstrap'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faFilter } from '@fortawesome/free-solid-svg-icons'
+import { Container, Spinner } from 'react-bootstrap'
 import axios from 'axios'
 
 // Local libraries
 import config from '../../../../config'
 import ContentCard from './content-card'
+import FilterDropdown from './filter-dropdown'
 
 // Global variables and constants
 const SERVER = config.dexServer
@@ -101,24 +100,10 @@ function ContentCreators (props) {
       </div>
 
       <div className='mb-4 d-flex justify-content-end'>
-        <Dropdown>
-          <Dropdown.Toggle variant='outline-secondary' className='d-flex align-items-center gap-2'>
-            <FontAwesomeIcon icon={faFilter} />
-            <span>{selectedFilter}</span>
-          </Dropdown.Toggle>
-
-          <Dropdown.Menu>
-            <Dropdown.Item onClick={() => setSelectedFilter('Most Followers')}>
-              Most Followers
-            </Dropdown.Item>
-            <Dropdown.Item onClick={() => setSelectedFilter('Most Tokens')}>
-              Most Tokens
-            </Dropdown.Item>
-            <Dropdown.Item onClick={() => setSelectedFilter('Most Likes')}>
-              Most Likes
-            </Dropdown.Item>
-          </Dropdown.Menu>
-        </Dropdown>
+        <FilterDropdown
+          selectedFilter={selectedFilter}
+          setSelectedFilter={setSelectedFilter}
+        />
       </div>
 
       {!loaded && (
diff --git a/src/components/app-body/nostr/content-creators/filter-dropdown.js b/src/components/app-body/nostr/content-creators/filter-dropdown.js
new file mode 100644
index 0000000..61a99a3
--- /dev/null
+++ b/src/components/app-body/nostr/content-creators/filter-dropdown.js
@@ -0,0 +1,31 @@
+import React from 'react'
+import { Dropdown } from 'react-bootstrap'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faFilter } from '@fortawesome/free-solid-svg-icons'
+
+function FilterDropdown (props) {
+  const { selectedFilter, setSelectedFilter } = props
+
+  return (
+    <Dropdown>
+      <Dropdown.Toggle variant='outline-secondary' className='d-flex align-items-center gap-2'>
+        <FontAwesomeIcon icon={faFilter} />
+        <span>{selectedFilter}</span>
+      </Dropdown.Toggle>
+
+      <Dropdown.Menu>
+        <Dropdown.Item onClick={() => setSelectedFilter('Most Followers')}>
+          Most Followers
+        </Dropdown.Item>
+        <Dropdown.Item onClick={() => setSelectedFilter('Most Tokens')}>
+          Most Tokens
+        </Dropdown.Item>
+        <Dropdown.Item onClick={() => setSelectedFilter('Most Likes')}>
+          Most Likes
+        </Dropdown.Item>
+      </Dropdown.Menu>
+    </Dropdown>
+  )
+}
+
+export default FilterDropdown