Moved search bar to its own component, updated about page, other small style fixes

src/components/interactive-news-carousel.jsx

@@ -85,7 +85,7 @@ export function InteractivePromotionalCarousel() {
                       <>
                         <GenericButton onClick={() => router.push('/about')} severity="success" icon={<i className="pi pi-question-circle pr-2 pb-[2px]" />} label="Learn More" className="py-2 font-semibold" size="small" outlined />
                         <GenericButton onClick={() => router.push('/subscribe')} severity="warning" icon={<i className="pi pi-star pr-2 pb-1" />} label="Subscribe" className="py-2 font-semibold" size="small" outlined />
-                        <GenericButton onClick={() => router.push('/content?tag=all')} severity="help" icon={<i className="pi pi-eye pr-2" />} label="View all content" className="py-2 font-semibold" size="small" outlined />
+                        <GenericButton onClick={() => router.push('/content?tag=all')} severity="primary" icon={<i className="pi pi-eye pr-2" />} label="View all content" className="py-2 font-semibold" size="small" outlined />
                       </>
                     );
                   case "COURSES":

src/components/navbar/Navbar.js

@@ -1,40 +1,16 @@
-import React, { useRef, useState } from 'react';
+import React from 'react';
 import Image from 'next/image';
 import UserAvatar from './user/UserAvatar';
-import MenuTab from '../menutab/MenuTab';
 import { Menubar } from 'primereact/menubar';
 import { useRouter } from 'next/router';
-import { InputText } from 'primereact/inputtext';
+import SearchBar from '../search/SearchBar';
-import { InputIcon } from 'primereact/inputicon';
-import { IconField } from 'primereact/iconfield';
-import { Dropdown } from 'primereact/dropdown';
-import styles from './navbar.module.css';
 import 'primereact/resources/primereact.min.css';
 import 'primeicons/primeicons.css';
 
 const Navbar = () => {
     const router = useRouter();
-    const [selectedSearchOption, setSelectedSearchOption] = useState({ name: 'Content', code: 'content', icon: 'pi pi-video' });
-    const searchOptions = [
-        { name: 'Content', code: 'content', icon: 'pi pi-video' },
-        { name: 'Community', code: 'community', icon: 'pi pi-users' },
-    ];
-
     const navbarHeight = '60px';
 
-    const selectedOptionTemplate = (option, props) => {
-        console.log(option, props);
-        if (!props?.placeholder) {
-            return (
-                <div className="flex items-center">
-                    <i className={option.icon + ' mr-2'}></i>
-                    <span>{option.code}</span>
-                </div>
-            );
-        }
-        return <span>{option.code}</span>
-    };
-
     const start = (
         <div className='flex items-center'>
             <div onClick={() => router.push('/')} className="flex flex-row items-center justify-center cursor-pointer">
@@ -47,37 +23,7 @@ const Navbar = () => {
                 />
                 <h1 className="text-white text-xl font-semibold max-tab:text-2xl max-mob:text-2xl">PlebDevs</h1>
             </div>
-            <div className='absolute left-[50%] transform -translate-x-[50%]'>
+            <SearchBar />
-                <IconField iconPosition="left">
-                    <InputIcon className="pi pi-search"> </InputIcon>
-                    <InputText className='w-[300px]' v-model="value1" placeholder="Search" pt={{
-                        root: {
-                            className: 'border-none rounded-tr-none rounded-br-none focus:border-none focus:ring-0 pr-0'
-                        }
-                    }} />
-
-                    <Dropdown 
-                        pt={{
-                            root: {
-                                className: 'border-none rounded-tl-none rounded-bl-none'
-                            },
-                            input: {
-                                className: 'mx-0 px-0'
-                            }
-                        }}
-                        className={styles.dropdown}
-                        value={selectedSearchOption} 
-                        onChange={(e) => setSelectedSearchOption(e.value)} 
-                        options={searchOptions} 
-                        optionLabel="name" 
-                        placeholder="Search"
-                        dropdownIcon={selectedSearchOption.icon}
-                        valueTemplate={selectedOptionTemplate}
-                        itemTemplate={selectedOptionTemplate}
-                        required
-                    />
-                </IconField>
-            </div>
         </div>
     );
 

src/components/navbar/navbar.module.css

@@ -20,23 +20,3 @@
     font-size: 1.5rem;
     font-weight: 600;
 }
-
-.dropdown {
-    border: none !important;
-    outline: none !important;
-    box-shadow: none !important;
-}
-
-.dropdown:focus,
-.dropdown:active,
-.dropdown:hover {
-    border: none !important;
-    outline: none !important;
-    box-shadow: none !important;
-}
-
-/* Override any potential global styles */
-.dropdown * {
-    outline: none !important;
-    box-shadow: none !important;
-}

src/components/search/SearchBar.js

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { InputText } from 'primereact/inputtext';
+import { InputIcon } from 'primereact/inputicon';
+import { IconField } from 'primereact/iconfield';
+import { Dropdown } from 'primereact/dropdown';
+import styles from './searchbar.module.css';
+
+const SearchBar = () => {
+    const [selectedSearchOption, setSelectedSearchOption] = useState({ name: 'Content', code: 'content', icon: 'pi pi-video' });
+    const searchOptions = [
+        { name: 'Content', code: 'content', icon: 'pi pi-video' },
+        { name: 'Community', code: 'community', icon: 'pi pi-users' },
+    ];
+
+    const selectedOptionTemplate = (option, props) => {
+        if (!props?.placeholder) {
+            return (
+                <div className="flex items-center">
+                    <i className={option.icon + ' mr-2'}></i>
+                    <span>{option.code}</span>
+                </div>
+            );
+        }
+        return <i className={option.icon + ' text-transparent text-xs'} />
+    };
+
+    return (
+        <div className='absolute left-[50%] transform -translate-x-[50%]'>
+            <IconField iconPosition="left">
+                <InputIcon className="pi pi-search"> </InputIcon>
+                <InputText className='w-[300px]' v-model="value1" placeholder={`Search ${selectedSearchOption.name.toLowerCase()}`} pt={{
+                    root: {
+                        className: 'border-none rounded-tr-none rounded-br-none focus:border-none focus:ring-0 pr-0'
+                    }
+                }} />
+
+                <Dropdown 
+                    pt={{
+                        root: {
+                            className: 'border-none rounded-tl-none rounded-bl-none bg-gray-900/55 hover:bg-gray-900/30'
+                        },
+                        input: {
+                            className: 'mx-0 px-0 shadow-lg'
+                        }
+                    }}
+                    className={styles.dropdown}
+                    value={selectedSearchOption} 
+                    onChange={(e) => setSelectedSearchOption(e.value)} 
+                    options={searchOptions} 
+                    optionLabel="name" 
+                    placeholder="Search"
+                    dropdownIcon={
+                        <div className='w-full pr-2 flex flex-row items-center justify-between'>
+                            <i className={selectedSearchOption.icon + " text-white"} />
+                            <i className="pi pi-chevron-down" />
+                        </div>
+                    }
+                    valueTemplate={selectedOptionTemplate}
+                    itemTemplate={selectedOptionTemplate}
+                    required
+                />
+            </IconField>
+        </div>
+    );
+};
+
+export default SearchBar;

src/components/search/searchbar.module.css

@@ -0,0 +1,19 @@
+/* .dropdown {
+    border: none !important;
+    outline: none !important;
+    box-shadow: none !important;
+}
+
+.dropdown:focus,
+.dropdown:active,
+.dropdown:hover {
+    border: none !important;
+    outline: none !important;
+    box-shadow: none !important;
+} */
+
+/* Override any potential global styles */
+/* .dropdown * {
+    outline: none !important;
+    box-shadow: none !important;
+} */

src/pages/about.js

@@ -1,6 +1,28 @@
-import React from 'react';
+import React, { useState } from 'react';
+import Image from 'next/image';
+import NostrIcon from '../../public/images/nostr.png';
+import { Tooltip } from 'primereact/tooltip';
+import { useToast } from "@/hooks/useToast"
 
 const AboutPage = () => {
+    const {showToast} = useToast()
+
+    const copyToClipboard = async (text) => {
+        try {
+          await navigator.clipboard.writeText(text);
+          showToast("success", "Copied", "Copied Lightning Address to clipboard")
+          if (window && window?.webln && window?.webln?.lnurl) {
+            await window.webln.enable();
+            const result = await window.webln.lnurl("austin@bitcoinpleb.dev");
+            if (result && result?.preimage) {
+              showToast("success", "Copied", "Copied Lightning Address to clipboard")
+            }
+          }
+        } catch (err) {
+          console.error('Failed to copy:', err);
+        }
+      };
+
     return (
         <div className="max-w-4xl mx-auto py-8 px-4">
             <h1 className="text-3xl font-bold mb-6">About PlebDevs</h1>
@@ -10,14 +32,14 @@ const AboutPage = () => {
                     <i className="pi pi-info-circle text-blue-500 mr-3 text-2xl"></i>
                     PlebDevs is a custom-built education platform designed to help new and aspiring developers, with a special focus on Bitcoin Lightning and Nostr technologies.
                 </p>
-                <p className='text-lg font-semibold px-9 mt-4'>
+                {/* <p className='text-lg font-semibold px-9 mt-4'> */}
-                    <span className='font-normal'>The pitch is simple:</span>
+                    <p className='font-normal text-lg px-9 mt-4 mb-2'>The pitch is simple:</p>
-                    <ul className='list-disc list-inside ml-6 space-y-2'>
+                    <ul className='list-disc list-inside ml-16 space-y-2'>
                         <li>Learn how to code 💻</li>
                         <li>Build Bitcoin / Lightning / Nostr apps ⚡</li>
                         <li>Become a developer 🚀</li>
                     </ul>
-                </p>
+                {/* </p> */}
             </div>
 
             <div className="space-y-8">
@@ -52,6 +74,27 @@ const AboutPage = () => {
                     PlebDevs aims to provide a comprehensive, decentralized learning experience for aspiring developers, with a strong emphasis on emerging technologies in the Bitcoin ecosystem.
                 </p>
             </div>
+
+            <div className="mt-12 bg-gray-700 rounded-lg p-6">
+                <div className="flex items-center justify-center space-x-16">
+                    <Tooltip target=".pi-github" content="GitHub" position="bottom" />
+                    <a href="https://github.com/pleb-devs" target="_blank" rel="noopener noreferrer">
+                        <i className="pi pi-github text-white text-5xl"></i>
+                    </a>
+                    <Tooltip target=".pi-twitter" content="X.com" position="bottom" />
+                    <a href="https://x.com/pleb_devs" target="_blank" rel="noopener noreferrer">
+                        <i className="pi pi-twitter text-black text-5xl"></i>
+                    </a>
+                    <Tooltip target=".nostr-icon" content="Nostr" position="bottom" />
+                    <a href="https://nostr.com/plebdevs@plebdevs.com" target="_blank" rel="noopener noreferrer">
+                        <Image src={NostrIcon} alt="Nostr" width={44} height={44} className='nostr-icon' />
+                    </a>
+                    <Tooltip target=".pi-bolt" content="Donate" position="bottom" />
+                    <p onClick={() => copyToClipboard("austin@bitcoinpleb.dev")} className='cursor-pointer'>
+                        <i className="pi pi-bolt text-yellow-500 text-5xl"></i>
+                    </p>
+                </div>
+            </div>
         </div>
     );
 };