From 06197637860d358bdc0717dfa8a0846f345966e3 Mon Sep 17 00:00:00 2001 From: austinkelsay Date: Fri, 13 Sep 2024 16:17:19 -0500 Subject: [PATCH] Moved search bar to its own component, updated about page, other small style fixes --- src/components/interactive-news-carousel.jsx | 2 +- src/components/navbar/Navbar.js | 60 +----------------- src/components/navbar/navbar.module.css | 22 +------ src/components/search/SearchBar.js | 67 ++++++++++++++++++++ src/components/search/searchbar.module.css | 19 ++++++ src/pages/about.js | 53 ++++++++++++++-- 6 files changed, 139 insertions(+), 84 deletions(-) create mode 100644 src/components/search/SearchBar.js create mode 100644 src/components/search/searchbar.module.css diff --git a/src/components/interactive-news-carousel.jsx b/src/components/interactive-news-carousel.jsx index 691f5e2..a78034b 100644 --- a/src/components/interactive-news-carousel.jsx +++ b/src/components/interactive-news-carousel.jsx @@ -85,7 +85,7 @@ export function InteractivePromotionalCarousel() { <> router.push('/about')} severity="success" icon={} label="Learn More" className="py-2 font-semibold" size="small" outlined /> router.push('/subscribe')} severity="warning" icon={} label="Subscribe" className="py-2 font-semibold" size="small" outlined /> - router.push('/content?tag=all')} severity="help" icon={} label="View all content" className="py-2 font-semibold" size="small" outlined /> + router.push('/content?tag=all')} severity="primary" icon={} label="View all content" className="py-2 font-semibold" size="small" outlined /> ); case "COURSES": diff --git a/src/components/navbar/Navbar.js b/src/components/navbar/Navbar.js index 00f7df8..5d54a81 100644 --- a/src/components/navbar/Navbar.js +++ b/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 { InputIcon } from 'primereact/inputicon'; -import { IconField } from 'primereact/iconfield'; -import { Dropdown } from 'primereact/dropdown'; -import styles from './navbar.module.css'; +import SearchBar from '../search/SearchBar'; 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 ( -
- - {option.code} -
- ); - } - return {option.code} - }; - const start = (
router.push('/')} className="flex flex-row items-center justify-center cursor-pointer"> @@ -47,37 +23,7 @@ const Navbar = () => { />

PlebDevs

-
- - - - - setSelectedSearchOption(e.value)} - options={searchOptions} - optionLabel="name" - placeholder="Search" - dropdownIcon={selectedSearchOption.icon} - valueTemplate={selectedOptionTemplate} - itemTemplate={selectedOptionTemplate} - required - /> - -
+
); diff --git a/src/components/navbar/navbar.module.css b/src/components/navbar/navbar.module.css index 003d935..af80b05 100644 --- a/src/components/navbar/navbar.module.css +++ b/src/components/navbar/navbar.module.css @@ -19,24 +19,4 @@ color: ghostwhite; 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; -} +} \ No newline at end of file diff --git a/src/components/search/SearchBar.js b/src/components/search/SearchBar.js new file mode 100644 index 0000000..bb64286 --- /dev/null +++ b/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 ( +
+ + {option.code} +
+ ); + } + return + }; + + return ( +
+ + + + + setSelectedSearchOption(e.value)} + options={searchOptions} + optionLabel="name" + placeholder="Search" + dropdownIcon={ +
+ + +
+ } + valueTemplate={selectedOptionTemplate} + itemTemplate={selectedOptionTemplate} + required + /> + +
+ ); +}; + +export default SearchBar; diff --git a/src/components/search/searchbar.module.css b/src/components/search/searchbar.module.css new file mode 100644 index 0000000..f9dd596 --- /dev/null +++ b/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; +} */ diff --git a/src/pages/about.js b/src/pages/about.js index cf821b0..f475ff2 100644 --- a/src/pages/about.js +++ b/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 (

About PlebDevs

@@ -10,14 +32,14 @@ const AboutPage = () => { PlebDevs is a custom-built education platform designed to help new and aspiring developers, with a special focus on Bitcoin Lightning and Nostr technologies.

-

- The pitch is simple: -

    + {/*

    */} +

    The pitch is simple:

    +
    • Learn how to code 💻
    • Build Bitcoin / Lightning / Nostr apps âš¡
    • Become a developer 🚀
    -

    + {/*

    */}
@@ -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.

+ +
+
+ + + + + + + + + + + Nostr + + +

copyToClipboard("austin@bitcoinpleb.dev")} className='cursor-pointer'> + +

+
+
); };