mirror of
https://github.com/AustinKelsay/plebdevs.git
synced 2025-04-19 19:01:19 +00:00
Moved search bar to its own component, updated about page, other small style fixes
This commit is contained in:
austinkelsay
parent
78d132f128
commit
0619763786
@ -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":
|
||||
|
||||
@ -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 (
|
||||
<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%]'>
|
||||
<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>
|
||||
<SearchBar />
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
67
src/components/search/SearchBar.js
Normal file
67
src/components/search/SearchBar.js
Normal file
@ -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;
|
||||
19
src/components/search/searchbar.module.css
Normal file
19
src/components/search/searchbar.module.css
Normal file
@ -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;
|
||||
} */
|
||||
@ -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'>
|
||||
<span className='font-normal'>The pitch is simple:</span>
|
||||
<ul className='list-disc list-inside ml-6 space-y-2'>
|
||||
{/* <p className='text-lg font-semibold px-9 mt-4'> */}
|
||||
<p className='font-normal text-lg px-9 mt-4 mb-2'>The pitch is simple:</p>
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user