mirror of
https://github.com/AustinKelsay/plebdevs.git
synced 2025-04-19 19:01:19 +00:00
Sidebar is back
This commit is contained in:
austinkelsay
parent
480e955a92
commit
a561c1b16c
27
src/components/BottomBar.js
Normal file
27
src/components/BottomBar.js
Normal file
@ -0,0 +1,27 @@
|
||||
import React from 'react';
|
||||
import { useRouter } from 'next/router';
|
||||
import 'primeicons/primeicons.css';
|
||||
|
||||
const BottomBar = () => {
|
||||
const router = useRouter();
|
||||
|
||||
const isActive = (path) => {
|
||||
return router.pathname === path;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='min-bottom-bar:hidden fixed bottom-0 left-0 right-0 bg-gray-800 p-2 flex justify-around items-center z-20 border-t-2 border-gray-700'>
|
||||
<div onClick={() => router.push('/')} className={`cursor-pointer p-2 rounded-lg ${isActive('/') ? 'bg-gray-700' : ''}`}>
|
||||
<i className="pi pi-home" />
|
||||
</div>
|
||||
<div onClick={() => router.push('/content')} className={`cursor-pointer p-2 rounded-lg ${isActive('/content') ? 'bg-gray-700' : ''}`}>
|
||||
<i className="pi pi-video" />
|
||||
</div>
|
||||
<div onClick={() => router.push('/feed')} className={`cursor-pointer p-2 rounded-lg ${isActive('/feed') ? 'bg-gray-700' : ''}`}>
|
||||
<i className="pi pi-comments" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BottomBar;
|
||||
@ -12,7 +12,7 @@ const Sidebar = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='max-mob:hidden max-tab:hidden w-[15vw] bg-gray-800 p-4 fixed z-10 h-[100%]'>
|
||||
<div className='max-sidebar:hidden w-[13vw] bg-gray-800 p-4 fixed z-10 h-[100%]'>
|
||||
<div onClick={() => router.push('/')} className={`w-full cursor-pointer hover:bg-gray-700 rounded-lg ${isActive('/') ? 'bg-gray-700' : ''}`}>
|
||||
<p className="p-2 my-2 pl-5 rounded-md font-bold"><i className="pi pi-home" /> Home</p>
|
||||
</div>
|
||||
@ -35,8 +35,8 @@ const Sidebar = () => {
|
||||
}}
|
||||
className="unstyled border-none bg-transparent">
|
||||
<AccordionTab header={"Chat"}>
|
||||
<div onClick={() => router.push('/chat/general')} className={`w-full cursor-pointer hover:bg-gray-700 rounded-lg ${isActive('/chat/general') ? 'bg-gray-700' : ''}`}>
|
||||
<p className="p-2 my-2 rounded-md font-bold"><i className="pi pi-hashtag"></i> general</p>
|
||||
<div onClick={() => router.push('/feed')} className={`w-full cursor-pointer hover:bg-gray-700 rounded-lg ${isActive('/feed') ? 'bg-gray-700' : ''}`}>
|
||||
<p className="p-2 my-2 rounded-md font-bold"><i className="pi pi-hashtag"></i> global</p>
|
||||
</div>
|
||||
<div onClick={() => router.push('/chat/nostr')} className={`w-full cursor-pointer hover:bg-gray-700 rounded-lg ${isActive('/chat/nostr') ? 'bg-gray-700' : ''}`}>
|
||||
<p className="p-2 my-2 rounded-md font-bold"><i className="pi pi-hashtag"></i> nostr</p>
|
||||
|
||||
@ -16,6 +16,7 @@ import {
|
||||
QueryClient,
|
||||
QueryClientProvider,
|
||||
} from '@tanstack/react-query'
|
||||
import BottomBar from '@/components/BottomBar';
|
||||
|
||||
const queryClient = new QueryClient()
|
||||
|
||||
@ -31,13 +32,14 @@ export default function MyApp({
|
||||
<Layout>
|
||||
<div className="flex flex-col min-h-screen">
|
||||
<Navbar />
|
||||
{/* <div className='flex'> */}
|
||||
{/* <Sidebar /> */}
|
||||
{/* <div className='max-w-[100vw] pl-[15vw]'> */}
|
||||
<div className='max-w-[100vw]'>
|
||||
<div className='flex'>
|
||||
<Sidebar />
|
||||
<div className='max-w-[100vw] pl-[13vw] max-sidebar:pl-0 pb-16 max-sidebar:pb-20'>
|
||||
{/* <div className='max-w-[100vw]'> */}
|
||||
<Component {...pageProps} />
|
||||
</div>
|
||||
{/* </div> */}
|
||||
</div>
|
||||
<BottomBar />
|
||||
</div>
|
||||
</Layout>
|
||||
</ToastProvider>
|
||||
|
||||
@ -1,10 +1,53 @@
|
||||
import React from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Card } from 'primereact/card';
|
||||
import { Avatar } from 'primereact/avatar';
|
||||
import { Tag } from 'primereact/tag';
|
||||
import { Button } from 'primereact/button';
|
||||
import { ProgressSpinner } from 'primereact/progressspinner';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { TabMenu } from 'primereact/tabmenu';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
|
||||
const MenuTab = ({ items, selectedTopic, onTabChange }) => {
|
||||
const allItems = ['global', 'nostr', 'discord', 'stackernews'];
|
||||
|
||||
const menuItems = allItems.map((item, index) => {
|
||||
let icon = 'pi pi-tag';
|
||||
|
||||
return {
|
||||
label: (
|
||||
<Button
|
||||
className={`${selectedTopic === item ? 'bg-primary text-white' : ''}`}
|
||||
onClick={() => onTabChange(item)}
|
||||
outlined={selectedTopic !== item}
|
||||
rounded
|
||||
size='small'
|
||||
label={item}
|
||||
icon={icon}
|
||||
/>
|
||||
),
|
||||
command: () => onTabChange(item)
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<TabMenu
|
||||
model={menuItems}
|
||||
activeIndex={allItems.indexOf(selectedTopic)}
|
||||
onTabChange={(e) => onTabChange(allItems[e.index])}
|
||||
pt={{
|
||||
menu: { className: 'bg-transparent border-none ml-2 my-4' },
|
||||
action: ({ context, parent }) => ({
|
||||
className: 'cursor-pointer select-none flex items-center relative no-underline overflow-hidden border-b-2 p-2 font-bold rounded-t-lg',
|
||||
style: { top: '2px' }
|
||||
}),
|
||||
menuitem: { className: 'mr-0' }
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const fetchDiscordMessages = async () => {
|
||||
const response = await fetch('/api/discord-messages');
|
||||
@ -15,6 +58,14 @@ const fetchDiscordMessages = async () => {
|
||||
};
|
||||
|
||||
const Feed = () => {
|
||||
const [selectedTopic, setSelectedTopic] = useState('global');
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const allTopics = ['global', 'nostr', 'discord', 'stackernews'];
|
||||
|
||||
const handleTopicChange = (topic) => {
|
||||
setSelectedTopic(topic);
|
||||
};
|
||||
|
||||
const { data, error, isLoading } = useQuery({
|
||||
queryKey: ['discordMessages'],
|
||||
queryFn: fetchDiscordMessages,
|
||||
@ -30,9 +81,6 @@ const Feed = () => {
|
||||
return <div className="text-red-500 text-center p-4">Failed to load messages. Please try again later.</div>;
|
||||
}
|
||||
|
||||
// Destructure messages from data
|
||||
// const messages = data?.messages || [];
|
||||
|
||||
const header = (message) => (
|
||||
<div className="flex flex-row w-full items-center justify-between p-4 bg-gray-800 rounded-t-lg">
|
||||
<div className="flex flex-row items-center">
|
||||
@ -54,18 +102,36 @@ const Feed = () => {
|
||||
{new Date(message.timestamp).toLocaleString()}
|
||||
</span>
|
||||
<Button
|
||||
label="View in Discord"
|
||||
icon="pi pi-external-link"
|
||||
outlined
|
||||
size="small"
|
||||
className='my-2'
|
||||
onClick={() => window.open(`https://discord.com/channels/${message.channelId}/${message.id}`, '_blank')}
|
||||
/>
|
||||
label="View in Discord"
|
||||
icon="pi pi-external-link"
|
||||
outlined
|
||||
size="small"
|
||||
className='my-2'
|
||||
onClick={() => window.open(`https://discord.com/channels/${message.channelId}/${message.id}`, '_blank')}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="gap-4 p-4 bg-gray-900">
|
||||
<div className="bg-gray-900 h-full w-full min-bottom-bar:w-[87vw]">
|
||||
<div className="w-fit mx-4 pt-4 flex flex-col items-start">
|
||||
<h1 className="text-3xl font-bold mb-4 ml-1">Community</h1>
|
||||
<InputText
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="Search"
|
||||
icon="pi pi-search"
|
||||
className="w-full mb-2"
|
||||
/>
|
||||
</div>
|
||||
<div className="min-bottom-bar:hidden">
|
||||
<MenuTab
|
||||
items={allTopics}
|
||||
selectedTopic={selectedTopic}
|
||||
onTabChange={handleTopicChange}
|
||||
className="max-w-[90%] mx-auto"
|
||||
/>
|
||||
</div>
|
||||
{data && data.map(message => (
|
||||
<Card
|
||||
key={message.id}
|
||||
|
||||
@ -14,6 +14,8 @@ module.exports = {
|
||||
'max-mob': {'max': '475px'},
|
||||
'max-tab': {'max': '768px'},
|
||||
'max-lap': {'max': '1440px'},
|
||||
'max-sidebar': {'max': '1285px'},
|
||||
'min-bottom-bar': {'min': '1285px'},
|
||||
},
|
||||
backgroundImage: {
|
||||
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user