feature/aside-news-section-added

app/(root)/(pages)/blog/page.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import BlogsList from "@/components/lists/BlogsList";
-import PrimaryAsideSection from "@/components/custom/pages/home/PrimaryAsideSection";
+import PrimaryAsideSection from "@/components/custom/asides/PrimaryAsideSection";
 import InformationFooter from "@/components/InformationFooter";
+import NewsAsideSection from "@/components/custom/asides/NewsAsideSection";
 
 export const metadata = {
     title: "Home - Bloggios",
@@ -20,7 +21,7 @@ export default function DashboardPage() {
                 <BlogsList/>
             </main>
             <aside className={"hidden lg:flex md:w-[23%]"}>
-                Aside Section
+                <NewsAsideSection />
             </aside>
         </main>
     )

components/custom/asides/NewsAsideSection.tsx

@@ -0,0 +1,128 @@
+import React, {useCallback} from 'react';
+import {useQuery} from "@tanstack/react-query";
+import {loggedInUserProfile} from "@/rest/UserAuthProviderApplication";
+import {Card, CardBody, CardFooter, CardHeader} from "@nextui-org/card";
+import {Skeleton} from "@/components/ui/skeleton";
+import {Button, Divider} from "@nextui-org/react";
+import LoggedInUserAvatar from "@/components/custom/user/LoggedInUserAvatar";
+import Image from "next/image";
+import BorderedLogoutButton from "@/components/custom/buttons/BorderedLogoutButton";
+import {BiRefresh} from "react-icons/bi";
+import NewsSmallCard from "@/components/custom/cards/NewsSmallCard";
+
+const newsList = [
+    {
+        "id": 1,
+        "title": "Tech Giants Embrace AI: Companies Ramp Up Investments in Artificial Intelligence to Revolutionize Industries",
+        "posted": "10h ago"
+    },
+    {
+        "id": 2,
+        "title": "Climate Crisis Intensifies: Record-Breaking Heatwaves and Floods Displace Millions Globally, Urging Immediate Action",
+        "posted": "5h ago"
+    },
+    {
+        "id": 3,
+        "title": "Economic Uncertainty: Global Markets Tumble Amid Rising Inflation and Interest Rate Hikes",
+        "posted": "8h ago"
+    },
+    {
+        "id": 4,
+        "title": "Groundbreaking Medical Discovery: New Cancer Treatment Shows Promising Results in Early Trials",
+        "posted": "1d ago"
+    },
+    {
+        "id": 5,
+        "title": "Innovations in Renewable Energy: Solar and Wind Power Set to Surpass Fossil Fuels by 2030",
+        "posted": "2h ago"
+    },
+    {
+        "id": 6,
+        "title": "Data Privacy Concerns Rise: Governments and Tech Companies Clash Over Encryption and User Data Access",
+        "posted": "3h ago"
+    },
+    {
+        "id": 7,
+        "title": "Space Exploration Milestone: Private Company Successfully Launches First Commercial Space Station",
+        "posted": "12h ago"
+    },
+    {
+        "id": 8,
+        "title": "Digital Nomad Trend Grows: Remote Work Revolution Drives Demand for Flexible Living and Co-Working Spaces Worldwide",
+        "posted": "7h ago"
+    },
+    {
+        "id": 9,
+        "title": "Global Chip Shortage Persists: Automakers and Tech Firms Struggle to Meet Demand as Supply Chain Issues Continue",
+        "posted": "15m ago"
+    },
+    {
+        "id": 10,
+        "title": "Breakthrough in Quantum Computing: Scientists Achieve New Levels of Speed and Accuracy, Opening Doors to Unprecedented Capabilities",
+        "posted": "4h ago"
+    }
+];
+
+const NewsAsideSection = () => {
+
+    return (
+        <Card className={"w-full h-fit border-none"}>
+            <NewsCard />
+        </Card>
+    );
+};
+
+const NewsAsideSkeleton = () => {
+    return (
+        <div className="flex flex-col space-y-3 p-3 items-center justify-center">
+            <Skeleton className="h-16 w-16 rounded-full" />
+            <div className="space-y-2 flex flex-col items-center">
+                <Skeleton className="h-4 w-[100px]"/>
+                <Skeleton className="h-4 w-[200px]"/>
+            </div>
+            <Skeleton className="h-[105px] w-full rounded-xl" />
+            <Divider />
+            <Skeleton className="h-[28px] w-full rounded-l" />
+        </div>
+    )
+};
+
+const NewsCard = () => {
+    return (
+        <>
+            <CardHeader>
+                <h4 className={"scroll-m-20 text-xl font-semibold tracking-wide"}>
+                    Bloggios Stories
+                </h4>
+            </CardHeader>
+
+            <CardBody className={"flex flex-col gap-2"}>
+                {newsList.map((item) => (
+                    <>
+                        <NewsSmallCard
+                            id={item.id}
+                            title={item.title}
+                            posted={item.posted}
+                        />
+                    </>
+                ))}
+            </CardBody>
+        </>
+    )
+}
+
+const NewAsideError = () => {
+    return (
+        <div className="flex flex-col gap-2 p-3 items-center justify-center">
+            <div className={"flex flex-col gap-1 items-center"}>
+                <h4 className={"scroll-m-20 text-xl font-semibold tracking-tight"}>Something went Wrong</h4>
+                <small className="text-sm text-muted-foreground">Refresh Page</small>
+            </div>
+            <Button onClick={()=> window.location.reload()} size={"sm"} isIconOnly={true}>
+                <BiRefresh className={"text-lg"}/>
+            </Button>
+        </div>
+    )
+}
+
+export default NewsAsideSection;

components/custom/cards/NewsSmallCard.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import {Tooltip} from "@nextui-org/react";
+
+const NewsSmallCard = ({
+                           id,
+                           title,
+                           posted
+                       }: {
+    id: string | number,
+    title: string,
+    posted: string
+}) => {
+    return (
+        <Tooltip
+            placement={"left"}
+            delay={500}
+            closeDelay={0}
+            color={"foreground"}
+            showArrow={true}
+            content={
+                <div className="px-1 py-2 w-[250px] flex flex-col gap-1">
+                    <small className={"text-sm overflow-hidden text-ellipsis"}>{title}</small>
+                    <small className={"text-muted-foreground"}>Posted : {posted}</small>
+                </div>
+            }
+        >
+            <div className={"flex flex-col gap-1 w-full cursor-pointer p-1 hover:bg-foreground-100 rounded-md"}>
+                <small className={"text-sm text-nowrap overflow-hidden text-ellipsis"}>{title}</small>
+                <small className={"text-muted-foreground"}>Posted : {posted}</small>
+            </div>
+        </Tooltip>
+    );
+};
+
+export default NewsSmallCard;

tailwind.config.ts

@@ -4,7 +4,7 @@ import type {Config} from "tailwindcss"
 const config = {
   darkMode: ["class"],
   content: [
-    "./(pages)/**/*.{ts,tsx}",
+    "./(asides)/**/*.{ts,tsx}",
     "./components/**/*.{ts,tsx}",
     "./app/**/*.{ts,tsx}",
     "./src/**/*.{ts,tsx}",