Organize feeds pages

public/sn.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+  <path fill="#facc15" fill-rule="evenodd" d="m41.7 91.4 41.644 59.22-78.966 69.228L129.25 155.94l-44.083-58.14 54.353-65.441Z"/>
+  <path fill="#facc15" fill-rule="evenodd" d="m208.355 136.74-54.358-64.36-38.4 128.449 48.675-74.094 64.36 65.175L251.54 42.497Z"/>
+</svg>

src/components/menutab/CommunityMenuTab.js

@@ -0,0 +1,66 @@
+import { Button } from 'primereact/button';
+import { TabMenu } from 'primereact/tabmenu';
+import Image from 'next/image';
+import StackerNewsIcon from '../../../public/sn.svg';
+import NostrIcon from '../../../public/nostr.png';
+
+const CommunityMenuTab = ({ selectedTopic, onTabChange }) => {
+    const allItems = ['global', 'nostr', 'discord', 'stackernews'];
+
+    const menuItems = allItems.map((item, index) => {
+        let icon;
+        switch (item) {
+            case 'global':
+                icon = 'pi pi-globe';
+                break;
+            case 'nostr':
+                icon = (<div className='mr-4 flex items-center'>
+                    <Image src={NostrIcon} alt="Nostr" width={18} height={18} className='absolute left-3' />
+                </div>);
+                break;
+            case 'discord':
+                icon = 'pi pi-discord';
+                break;
+            case 'stackernews':
+                icon = (<div className='mr-5 flex items-center'>
+                    <Image src={StackerNewsIcon} alt="StackerNews" width={20} height={20} className='absolute left-3' />
+                </div>);
+                break;
+        }
+
+        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>
+    );
+}
+
+export default CommunityMenuTab;

src/components/navbar/Navbar.js

@@ -94,7 +94,7 @@ const Navbar = () => {
                 <Menubar
                     start={start}
                     end={UserAvatar}
-                    className='px-[2%] py-8 bg-gray-800 border-t-0 border-l-0 border-r-0 rounded-none fixed z-10 w-[100vw] max-tab:px-[5%] max-mob:px-[5%]'
+                    className='px-6 py-8 bg-gray-800 border-t-0 border-l-0 border-r-0 rounded-none fixed z-10 w-[100vw] max-tab:px-[5%] max-mob:px-[5%]'
                     style={{ height: navbarHeight }}
                 />
             </div>

src/components/sidebar/Sidebar.js

@@ -13,41 +13,28 @@ const Sidebar = () => {
 
     return (
         <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 onClick={() => router.push('/')} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/') ? 'bg-gray-700' : ''}`}>
+            <i className="pi pi-home pl-5" /> <p className="pl-2 rounded-md font-bold">Home</p>
             </div>
-            <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 onClick={() => router.push('/content')} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/content') ? 'bg-gray-700' : ''}`}>
+            <i className="pi pi-video pl-5" /> <p className="pl-2 rounded-md font-bold">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 onClick={() => router.push('/create')} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/create') ? 'bg-gray-700' : ''}`}>
+            <i className="pi pi-plus pl-5" /> <p className="pl-2 rounded-md font-bold">Create</p>
             </div>
-            <Accordion
-                activeIndex={0}
-                pt={{
-                    tab: {
-                        header: ({ context }) => ({
-                            className: 'border-none bg-transparent hover:bg-gray-700 rounded-lg',
-                        }),
-                        headerAction: ({ context }) => ({
-                            className: 'border-none bg-transparent py-3 my-2',
-                        }),
-                        content: { className: 'border-none bg-transparent pt-0 pl-0 ml-0' }
-                    }
-                }}
-                className="unstyled border-none bg-transparent">
-                <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="pl-2 rounded-md font-bold"><i className="pi pi-hashtag text-sm"></i> global</p>
+            <Accordion activeIndex={0}>
+                <AccordionTab header={"Community"} headerClassName='hover:bg-gray-700 rounded-lg'>
+                    <div onClick={() => router.push('/feed')} className={`w-full cursor-pointer py-2 hover:bg-gray-700 rounded-lg ${isActive('/feed') ? 'bg-gray-700' : ''}`}>
+                        <p className="pl-3 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 py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/chat/nostr') ? 'bg-gray-700' : ''}`}>
-                        <p className="pl-2 rounded-md font-bold"><i className="pi pi-hashtag text-sm"></i> nostr</p>
+                    <div onClick={() => router.push('/feed/nostr')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/feed/nostr') ? 'bg-gray-700' : ''}`}>
+                        <p className="pl-3 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 py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/chat/discord') ? 'bg-gray-700' : ''}`}>
-                        <p className="pl-2 rounded-md font-bold"><i className="pi pi-hashtag text-sm"></i> discord</p>
+                    <div onClick={() => router.push('/feed/discord')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/feed/discord') ? 'bg-gray-700' : ''}`}>
+                        <p className="pl-3 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 py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/chat/stackernews') ? 'bg-gray-700' : ''}`}>
-                        <p className="pl-2 rounded-md font-bold"><i className="pi pi-hashtag text-sm"></i> stackernews</p>
+                    <div onClick={() => router.push('/feed/stackernews')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/feed/stackernews') ? 'bg-gray-700' : ''}`}>
+                        <p className="pl-3 rounded-md font-bold"><i className="pi pi-hashtag text-sm"></i> stackernews</p>
                     </div>
                 </AccordionTab>
             </Accordion>

src/hooks/communityQueries/useDiscordQuery.js

@@ -0,0 +1,21 @@
+import { useQuery } from "@tanstack/react-query";
+
+const fetchDiscordMessages = async () => {
+    const response = await fetch('/api/discord-messages');
+    if (!response.ok) {
+        throw new Error('Failed to fetch messages');
+    }
+    return response.json();
+};
+
+export function useDiscordQuery({page}) {
+    const { data, error, isLoading } = useQuery({
+        queryKey: ['discordMessages', page],
+        queryFn: fetchDiscordMessages,
+        staleTime: 60000, // 1 minute
+        refetchInterval: 60000, // Refetch every minute
+    });
+
+    return { data, error, isLoading };
+
+}

src/pages/feed/discord.js

@@ -4,77 +4,29 @@ 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';
+import { useDiscordQuery } from '@/hooks/communityQueries/useDiscordQuery';
+import { useRouter } from 'next/router';
+import CommunityMenuTab from '@/components/menutab/CommunityMenuTab';
 
-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');
-    if (!response.ok) {
-        throw new Error('Failed to fetch messages');
-    }
-    return response.json();
-};
-
-const Feed = () => {
+const DiscordFeed = () => {
     const [selectedTopic, setSelectedTopic] = useState('global');
     const [searchQuery, setSearchQuery] = useState('');
     const allTopics = ['global', 'nostr', 'discord', 'stackernews'];
 
+    const router = useRouter();
+    const { data, error, isLoading } = useDiscordQuery({page: router.query.page});
+
     const handleTopicChange = (topic) => {
         setSelectedTopic(topic);
     };
 
-    const { data, error, isLoading } = useQuery({
-        queryKey: ['discordMessages'],
-        queryFn: fetchDiscordMessages,
-        staleTime: 60000, // 1 minute
-        refetchInterval: 60000, // Refetch every minute
-    });
-
     if (isLoading) {
-        return <ProgressSpinner className="w-full mx-auto" />
+        return (
+            <div className="h-[100vh] min-bottom-bar:w-[87vw] max-sidebar:w-[100vw]">
+                <ProgressSpinner className='w-full mt-24 mx-auto' />
+            </div>
+        );
     }
 
     if (error) {
@@ -125,7 +77,7 @@ const Feed = () => {
                 />
             </div>
             <div className="min-bottom-bar:hidden">
-                <MenuTab
+                <CommunityMenuTab
                     items={allTopics}
                     selectedTopic={selectedTopic}
                     onTabChange={handleTopicChange}
@@ -152,4 +104,4 @@ const Feed = () => {
     );
 };
 
-export default Feed;
+export default DiscordFeed;

src/pages/feed/global.js

@@ -0,0 +1,107 @@
+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 { InputText } from 'primereact/inputtext';
+import { useDiscordQuery } from '@/hooks/communityQueries/useDiscordQuery';
+import { useRouter } from 'next/router';
+import CommunityMenuTab from '@/components/menutab/CommunityMenuTab';
+
+const GlobalFeed = () => {
+    const [selectedTopic, setSelectedTopic] = useState('global');
+    const [searchQuery, setSearchQuery] = useState('');
+    const allTopics = ['global', 'nostr', 'discord', 'stackernews'];
+
+    const router = useRouter();
+    const { data, error, isLoading } = useDiscordQuery({page: router.query.page});
+
+    const handleTopicChange = (topic) => {
+        setSelectedTopic(topic);
+    };
+
+    if (isLoading) {
+        return (
+            <div className="h-[100vh] min-bottom-bar:w-[87vw] max-sidebar:w-[100vw]">
+                <ProgressSpinner className='w-full mt-24 mx-auto' />
+            </div>
+        );
+    }
+
+    if (error) {
+        return <div className="text-red-500 text-center p-4">Failed to load messages. Please try again later.</div>;
+    }
+
+    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">
+                <Avatar image={message.avatar} shape="circle" size="large" className="border-2 border-blue-400" />
+                <p className="pl-4 font-bold text-xl text-white">{message.author}</p>
+            </div>
+            <div className="flex flex-col items-start justify-between">
+                <div className="flex flex-row w-full justify-between items-center my-1">
+                    <Tag value={message.channel} severity="primary" className="w-fit text-[#f8f8ff] bg-gray-600 mr-2" />
+                    <Tag icon="pi pi-discord" value="discord" className="w-fit text-[#f8f8ff] bg-blue-400" />
+                </div>
+            </div>
+        </div>
+    );
+
+    const footer = (message) => (
+        <div className="w-full flex justify-between items-center">
+            <span className="bg-gray-800 rounded-lg p-2 text-sm text-gray-300">
+                {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')}
+            />
+        </div>
+    );
+
+    return (
+        <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">
+                <CommunityMenuTab
+                    items={allTopics}
+                    selectedTopic={selectedTopic}
+                    onTabChange={handleTopicChange}
+                    className="max-w-[90%] mx-auto"
+                />
+            </div>
+            <div className="mx-4 mt-4">
+            {data && data.length > 0 ? (
+                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"
+                    >
+                        <p className="m-0 text-lg text-gray-200">{message.content}</p>
+                    </Card>
+                ))
+            ) : (
+                <div className="text-gray-400 text-center p-4">No messages available.</div>
+            )}
+            </div>
+        </div>
+    );
+};
+
+export default GlobalFeed;

src/pages/feed/nostr.js

@@ -0,0 +1,107 @@
+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 { InputText } from 'primereact/inputtext';
+import { useDiscordQuery } from '@/hooks/communityQueries/useDiscordQuery';
+import { useRouter } from 'next/router';
+import CommunityMenuTab from '@/components/menutab/CommunityMenuTab';
+
+const NostrFeed = () => {
+    const [selectedTopic, setSelectedTopic] = useState('global');
+    const [searchQuery, setSearchQuery] = useState('');
+    const allTopics = ['global', 'nostr', 'discord', 'stackernews'];
+
+    const router = useRouter();
+    const { data, error, isLoading } = useDiscordQuery({page: router.query.page});
+
+    const handleTopicChange = (topic) => {
+        setSelectedTopic(topic);
+    };
+
+    if (isLoading) {
+        return (
+            <div className="h-[100vh] min-bottom-bar:w-[87vw] max-sidebar:w-[100vw]">
+                <ProgressSpinner className='w-full mt-24 mx-auto' />
+            </div>
+        );
+    }
+
+    if (error) {
+        return <div className="text-red-500 text-center p-4">Failed to load messages. Please try again later.</div>;
+    }
+
+    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">
+                <Avatar image={message.avatar} shape="circle" size="large" className="border-2 border-blue-400" />
+                <p className="pl-4 font-bold text-xl text-white">{message.author}</p>
+            </div>
+            <div className="flex flex-col items-start justify-between">
+                <div className="flex flex-row w-full justify-between items-center my-1">
+                    <Tag value={message.channel} severity="primary" className="w-fit text-[#f8f8ff] bg-gray-600 mr-2" />
+                    <Tag icon="pi pi-discord" value="discord" className="w-fit text-[#f8f8ff] bg-blue-400" />
+                </div>
+            </div>
+        </div>
+    );
+
+    const footer = (message) => (
+        <div className="w-full flex justify-between items-center">
+            <span className="bg-gray-800 rounded-lg p-2 text-sm text-gray-300">
+                {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')}
+            />
+        </div>
+    );
+
+    return (
+        <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">
+                <CommunityMenuTab
+                    items={allTopics}
+                    selectedTopic={selectedTopic}
+                    onTabChange={handleTopicChange}
+                    className="max-w-[90%] mx-auto"
+                />
+            </div>
+            <div className="mx-4 mt-4">
+            {data && data.length > 0 ? (
+                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"
+                    >
+                        <p className="m-0 text-lg text-gray-200">{message.content}</p>
+                    </Card>
+                ))
+            ) : (
+                <div className="text-gray-400 text-center p-4">No messages available.</div>
+            )}
+            </div>
+        </div>
+    );
+};
+
+export default NostrFeed;

src/pages/feed/stackernews.js

@@ -0,0 +1,107 @@
+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 { InputText } from 'primereact/inputtext';
+import { useDiscordQuery } from '@/hooks/communityQueries/useDiscordQuery';
+import { useRouter } from 'next/router';
+import CommunityMenuTab from '@/components/menutab/CommunityMenuTab';
+
+const StackernewsFeed = () => {
+    const [selectedTopic, setSelectedTopic] = useState('global');
+    const [searchQuery, setSearchQuery] = useState('');
+    const allTopics = ['global', 'nostr', 'discord', 'stackernews'];
+
+    const router = useRouter();
+    const { data, error, isLoading } = useDiscordQuery({page: router.query.page});
+
+    const handleTopicChange = (topic) => {
+        setSelectedTopic(topic);
+    };
+
+    if (isLoading) {
+        return (
+            <div className="h-[100vh] min-bottom-bar:w-[87vw] max-sidebar:w-[100vw]">
+                <ProgressSpinner className='w-full mt-24 mx-auto' />
+            </div>
+        );
+    }
+
+    if (error) {
+        return <div className="text-red-500 text-center p-4">Failed to load messages. Please try again later.</div>;
+    }
+
+    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">
+                <Avatar image={message.avatar} shape="circle" size="large" className="border-2 border-blue-400" />
+                <p className="pl-4 font-bold text-xl text-white">{message.author}</p>
+            </div>
+            <div className="flex flex-col items-start justify-between">
+                <div className="flex flex-row w-full justify-between items-center my-1">
+                    <Tag value={message.channel} severity="primary" className="w-fit text-[#f8f8ff] bg-gray-600 mr-2" />
+                    <Tag icon="pi pi-discord" value="discord" className="w-fit text-[#f8f8ff] bg-blue-400" />
+                </div>
+            </div>
+        </div>
+    );
+
+    const footer = (message) => (
+        <div className="w-full flex justify-between items-center">
+            <span className="bg-gray-800 rounded-lg p-2 text-sm text-gray-300">
+                {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')}
+            />
+        </div>
+    );
+
+    return (
+        <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">
+                <CommunityMenuTab
+                    items={allTopics}
+                    selectedTopic={selectedTopic}
+                    onTabChange={handleTopicChange}
+                    className="max-w-[90%] mx-auto"
+                />
+            </div>
+            <div className="mx-4 mt-4">
+            {data && data.length > 0 ? (
+                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"
+                    >
+                        <p className="m-0 text-lg text-gray-200">{message.content}</p>
+                    </Card>
+                ))
+            ) : (
+                <div className="text-gray-400 text-center p-4">No messages available.</div>
+            )}
+            </div>
+        </div>
+    );
+};
+
+export default StackernewsFeed;

src/styles/globals.css

@@ -61,6 +61,21 @@ div {
   max-height: 400px !important;
 }
 
+/* accordian */
+.p-accordion .p-accordion-content {
+  border: none !important;
+  padding-top: 0px !important;
+}
+
+.p-accordion .p-accordion-header-link {
+  border: none !important;
+  padding-bottom: 12px !important;
+  padding-top: 12px !important;
+  margin-bottom: 8px !important;
+  border-bottom-left-radius: 5px !important;
+  border-bottom-right-radius: 5px !important;
+}
+
 /* hero banner animation */
 @keyframes flip {
   0%, 100% {