saulteafarmer/plebdevs
1
0
Fork 0
mirror of https://github.com/AustinKelsay/plebdevs.git synced 2025-06-06 18:31:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

styling improvements to sidebar and the pages it affects

Browse Source
This commit is contained in:
austinkelsay 2024-09-02 09:49:17 -05:00
parent a561c1b16c
commit 1ee4dfe84e
6 changed files with 37 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/profile/UserContent.js
View File

@ -113,7 +113,7 @@ const UserContent = () => {
const isError = coursesError || resourcesError || workshopsError || draftsError || contentIdsError || courseDraftsError; const isError = coursesError || resourcesError || workshopsError || draftsError || contentIdsError || courseDraftsError;
return ( return (
<div className="w-[90vw] mx-auto max-tab:w-[100vw] max-mob:w-[100vw]"> <div className="w-full min-bottom-bar:w-[87vw] mx-auto">
<div className="border-y-2 border-gray-300 mt-12"> <div className="border-y-2 border-gray-300 mt-12">
<h2 className="text-center my-4">Your Content</h2> <h2 className="text-center my-4">Your Content</h2>
</div> </div>
@ -132,7 +132,7 @@ const UserContent = () => {
/> />
</div> </div>
<div className="w-full mx-auto my-8"> <div className="w-full mx-auto my-8">
<div className="w-full mx-auto my-8"> <div className="w-full mx-auto my-8 px-8">
{isLoading ? ( {isLoading ? (
<p>Loading...</p> <p>Loading...</p>
) : isError ? ( ) : isError ? (

34
src/components/sidebar/Sidebar.js
View File

@ -12,14 +12,16 @@ const Sidebar = () => {
}; };
return ( return (
<div className='max-sidebar:hidden w-[13vw] bg-gray-800 p-4 fixed z-10 h-[100%]'> <div className='max-sidebar:hidden w-[13vw] bg-gray-800 p-2 fixed z-10 h-[100%]'>
<div onClick={() => router.push('/')} className={`w-full cursor-pointer hover:bg-gray-700 rounded-lg ${isActive('/') ? 'bg-gray-700' : ''}`}> <div onClick={() => router.push('/')} className={`w-full cursor-pointer py-2 my-2 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> <p className="pl-5 rounded-md font-bold"><i className="pi pi-home" /> Home</p>
</div> </div>
<div onClick={() => router.push('/content')} className={`w-full cursor-pointer hover:bg-gray-700 rounded-lg ${isActive('/content') ? 'bg-gray-700' : ''}`}> <div onClick={() => router.push('/content')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/content') ? 'bg-gray-700' : ''}`}>
<p className="p-2 my-2 pl-5 rounded-md font-bold"><i className="pi pi-video" /> Content</p> <p className="pl-5 rounded-md font-bold"><i className="pi pi-video" /> Content</p>
</div>
<div onClick={() => router.push('/create')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/create') ? 'bg-gray-700' : ''}`}>
<p className="pl-5 rounded-md font-bold"><i className="pi pi-plus" /> Create</p>
</div> </div>
<Accordion <Accordion
activeIndex={0} activeIndex={0}
pt={{ pt={{
@ -30,22 +32,22 @@ const Sidebar = () => {
headerAction: ({ context }) => ({ headerAction: ({ context }) => ({
className: 'border-none bg-transparent py-3 my-2', className: 'border-none bg-transparent py-3 my-2',
}), }),
content: { className: 'border-none bg-transparent pt-0' } content: { className: 'border-none bg-transparent pt-0 pl-0 ml-0' }
} }
}} }}
className="unstyled border-none bg-transparent"> className="unstyled border-none bg-transparent">
<AccordionTab header={"Chat"}> <AccordionTab header={"Community"}>
<div onClick={() => router.push('/feed')} className={`w-full cursor-pointer hover:bg-gray-700 rounded-lg ${isActive('/feed') ? 'bg-gray-700' : ''}`}> <div onClick={() => router.push('/feed')} className={`w-full cursor-pointer py-2 my-2 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> <p className="rounded-md font-bold"><i className="pi pi-hashtag text-sm"></i> global</p>
</div> </div>
<div onClick={() => router.push('/chat/nostr')} className={`w-full cursor-pointer hover:bg-gray-700 rounded-lg ${isActive('/chat/nostr') ? 'bg-gray-700' : ''}`}> <div onClick={() => router.push('/chat/nostr')} className={`w-full cursor-pointer py-2 my-2 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> <p className="rounded-md font-bold"><i className="pi pi-hashtag text-sm"></i> nostr</p>
</div> </div>
<div onClick={() => router.push('/chat/discord')} className={`w-full cursor-pointer hover:bg-gray-700 rounded-lg ${isActive('/chat/discord') ? 'bg-gray-700' : ''}`}> <div onClick={() => router.push('/chat/discord')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/chat/discord') ? 'bg-gray-700' : ''}`}>
<p className="p-2 my-2 rounded-md font-bold"><i className="pi pi-hashtag"></i> discord</p> <p className="rounded-md font-bold"><i className="pi pi-hashtag text-sm"></i> discord</p>
</div> </div>
<div onClick={() => router.push('/chat/stackernews')} className={`w-full cursor-pointer hover:bg-gray-700 rounded-lg ${isActive('/chat/stackernews') ? 'bg-gray-700' : ''}`}> <div onClick={() => router.push('/chat/stackernews')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/chat/stackernews') ? 'bg-gray-700' : ''}`}>
<p className="p-2 my-2 rounded-md font-bold"><i className="pi pi-hashtag"></i> stackernews</p> <p className="rounded-md font-bold"><i className="pi pi-hashtag text-sm"></i> stackernews</p>
</div> </div>
</AccordionTab> </AccordionTab>
</Accordion> </Accordion>

14
src/pages/api/discord-messages.js
View File

@ -23,13 +23,11 @@ export default async function handler(req, res) {
const client = await initializeClient(); const client = await initializeClient();
const channels = ['🤝general', '🌀random', '❓help', '🛠project-ideas', '🙌show-it-off', '🤡memes', '🧠learning']; const channels = ['🤝general', '🌀random', '❓help', '🛠project-ideas', '🙌show-it-off', '🤡memes', '🧠learning'];
const messages = []; const messagesPromises = channels.map(async (channelName) => {
for (const channelName of channels) {
const channel = client.channels.cache.find(ch => ch.name === channelName); const channel = client.channels.cache.find(ch => ch.name === channelName);
if (channel) { if (channel) {
const channelMessages = await channel.messages.fetch({ limit: 5 }); const channelMessages = await channel.messages.fetch({ limit: 5 });
messages.push(...channelMessages.map(msg => ({ return channelMessages.map(msg => ({
id: msg.id, id: msg.id,
content: msg.content, content: msg.content,
author: msg.author.username, author: msg.author.username,
@ -37,9 +35,13 @@ export default async function handler(req, res) {
channel: msg.channel.name, channel: msg.channel.name,
channelId: msg.channel.id, channelId: msg.channel.id,
timestamp: msg.createdAt timestamp: msg.createdAt
}))); }));
}
} }
return [];
});
const messagesArray = await Promise.all(messagesPromises);
const messages = messagesArray.flat();
const filteredMessages = messages.filter(msg => msg.content.length > 0); const filteredMessages = messages.filter(msg => msg.content.length > 0);
filteredMessages.sort((a, b) => b.timestamp - a.timestamp); filteredMessages.sort((a, b) => b.timestamp - a.timestamp);

2
src/pages/create.js
View File

@ -28,7 +28,7 @@ const Create = () => {
}; };
return ( return (
<div className="w-[80vw] max-w-[80vw] mx-auto my-8 flex flex-col justify-center"> <div className="w-full min-bottom-bar:w-[87vw] max-sidebar:w-[100vw] px-8 mx-auto my-8 flex flex-col justify-center">
<h2 className="text-center mb-8">Create a {homeItems[activeIndex].label}</h2> <h2 className="text-center mb-8">Create a {homeItems[activeIndex].label}</h2>
<MenuTab items={homeItems} activeIndex={activeIndex} onTabChange={setActiveIndex} /> <MenuTab items={homeItems} activeIndex={activeIndex} onTabChange={setActiveIndex} />
{renderForm()} {renderForm()}

2
src/pages/feed.js
View File

@ -132,6 +132,7 @@ const Feed = () => {
className="max-w-[90%] mx-auto" className="max-w-[90%] mx-auto"
/> />
</div> </div>
<div className="mx-4 mt-4">
{data && data.map(message => ( {data && data.map(message => (
<Card <Card
key={message.id} key={message.id}
@ -143,6 +144,7 @@ const Feed = () => {
</Card> </Card>
))} ))}
</div> </div>
</div>
); );
}; };

4
src/pages/profile.js
View File

@ -69,8 +69,8 @@ const Profile = () => {
return ( return (
user && ( user && (
<div className="w-[90vw] mx-auto max-tab:w-[100vw] max-mob:w-[100vw]"> <div className="h-full w-full min-bottom-bar:w-[87vw] max-sidebar:w-[100vw] mx-auto">
<div className="w-[85vw] flex flex-col justify-center mx-auto max-tab:w-[100vw] max-mob:w-[100vw]"> <div className="w-full flex flex-col justify-center mx-auto">
<div className="relative flex w-full items-center justify-center"> <div className="relative flex w-full items-center justify-center">
<Image <Image
alt="user's avatar" alt="user's avatar"