saulteafarmer/plebdevs
1
0
Fork 0
mirror of https://github.com/AustinKelsay/plebdevs.git synced 2025-04-19 19:01:19 +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;
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">
<h2 className="text-center my-4">Your Content</h2>
</div>
@ -132,7 +132,7 @@ const UserContent = () => {
/>
</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 px-8">
{isLoading ? (
<p>Loading...</p>
) : isError ? (

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

@ -12,14 +12,16 @@ const Sidebar = () => {
};
return (
<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 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 py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/') ? 'bg-gray-700' : ''}`}>
<p className="pl-5 rounded-md font-bold"><i className="pi pi-home" /> Home</p>
</div>
<div onClick={() => router.push('/content')} className={`w-full cursor-pointer 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>
<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="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>
<Accordion
activeIndex={0}
pt={{
@ -30,22 +32,22 @@ const Sidebar = () => {
headerAction: ({ context }) => ({
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">
<AccordionTab header={"Chat"}>
<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>
<AccordionTab header={"Community"}>
<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="rounded-md font-bold"><i className="pi pi-hashtag text-sm"></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>
<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="rounded-md font-bold"><i className="pi pi-hashtag text-sm"></i> nostr</p>
</div>
<div onClick={() => router.push('/chat/discord')} className={`w-full cursor-pointer 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>
<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="rounded-md font-bold"><i className="pi pi-hashtag text-sm"></i> discord</p>
</div>
<div onClick={() => router.push('/chat/stackernews')} className={`w-full cursor-pointer 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>
<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="rounded-md font-bold"><i className="pi pi-hashtag text-sm"></i> stackernews</p>
</div>
</AccordionTab>
</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 channels = ['🤝general', '🌀random', '❓help', '🛠project-ideas', '🙌show-it-off', '🤡memes', '🧠learning'];
const messages = [];
for (const channelName of channels) {
const messagesPromises = channels.map(async (channelName) => {
const channel = client.channels.cache.find(ch => ch.name === channelName);
if (channel) {
const channelMessages = await channel.messages.fetch({ limit: 5 });
messages.push(...channelMessages.map(msg => ({
return channelMessages.map(msg => ({
id: msg.id,
content: msg.content,
author: msg.author.username,
@ -37,9 +35,13 @@ export default async function handler(req, res) {
channel: msg.channel.name,
channelId: msg.channel.id,
timestamp: msg.createdAt
})));
}));
}
}
return [];
});
const messagesArray = await Promise.all(messagesPromises);
const messages = messagesArray.flat();
const filteredMessages = messages.filter(msg => msg.content.length > 0);
filteredMessages.sort((a, b) => b.timestamp - a.timestamp);

2
src/pages/create.js
View File

@ -28,7 +28,7 @@ const Create = () => {
};
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>
<MenuTab items={homeItems} activeIndex={activeIndex} onTabChange={setActiveIndex} />
{renderForm()}

10
src/pages/feed.js
View File

@ -132,16 +132,18 @@ const Feed = () => {
className="max-w-[90%] mx-auto"
/>
</div>
<div className="mx-4 mt-4">
{data && data.map(message => (
<Card
key={message.id}
header={() => header(message)}
footer={() => footer(message)}
className="w-full bg-gray-700 shadow-lg hover:shadow-xl transition-shadow duration-300 mb-4"
key={message.id}
header={() => header(message)}
footer={() => footer(message)}
className="w-full bg-gray-700 shadow-lg hover:shadow-xl transition-shadow duration-300 mb-4"
>
<p className="m-0 text-lg text-gray-200">{message.content}</p>
</Card>
))}
</div>
</div>
);
};

4
src/pages/profile.js
View File

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