diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 320be53..3c7f9e5 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -3,6 +3,7 @@ import "@rainbow-me/rainbowkit/styles.css"; import { Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; import Web3Providers from "../components/Web3Providers"; +import Navbar from "../components/Navbar/navbar"; const geistSans = Geist({ variable: "--font-geist-sans", @@ -29,7 +30,10 @@ export default function RootLayout({ - {children} + + + {children} + ); diff --git a/src/app/page.tsx b/src/app/page.tsx index 5149103..5715470 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,9 +1,9 @@ -import PostsList from "@/components/PostComponents/PostsList"; +import HomePage from "../components/HomepageComponents/HomePage" -export default function HomePage() { +export default function Allpage() { return (
- +
); } diff --git a/src/components/HomepageComponents/BullishMarketCard.tsx b/src/components/HomepageComponents/BullishMarketCard.tsx index a04a68c..a39a749 100644 --- a/src/components/HomepageComponents/BullishMarketCard.tsx +++ b/src/components/HomepageComponents/BullishMarketCard.tsx @@ -41,7 +41,7 @@ const MockData = { export default function BullishMarketCard() { return (
- +
Bullish Market @@ -54,21 +54,21 @@ export default function BullishMarketCard() {
- +
- + {MockData.sentimentPercentages.BULLISH}% Bullish
- + {MockData.sentimentPercentages.NEUTRAL}% Neutral
- + {MockData.sentimentPercentages.BEARISH}% Bearish @@ -76,8 +76,8 @@ export default function BullishMarketCard() { -
-
+
+
- + {MockData.sentimentPercentages.BULLISH}%
-
+
- + {MockData.sentimentPercentages.NEUTRAL}%
-
+
- + {MockData.sentimentPercentages.BEARISH}%
@@ -126,7 +126,7 @@ export default function BullishMarketCard() { - + Updated {MockData.minutesAgo} minutes ago
diff --git a/src/components/HomepageComponents/HomePage.tsx b/src/components/HomepageComponents/HomePage.tsx new file mode 100644 index 0000000..c782aec --- /dev/null +++ b/src/components/HomepageComponents/HomePage.tsx @@ -0,0 +1,19 @@ +import PostsGallery from "./PostGallery"; +import BullishMarketCard from "./BullishMarketCard"; +import PostSearch from "./PostSearch"; +import PostFilter from "./PostFilter"; +import PostGalleryTitle from "./PostGalleryTitle"; + +export default function HomePage() { + return ( +
+
+ + +
+ + + +
+ ); +} diff --git a/src/components/HomepageComponents/PostFilter.tsx b/src/components/HomepageComponents/PostFilter.tsx new file mode 100644 index 0000000..648b38c --- /dev/null +++ b/src/components/HomepageComponents/PostFilter.tsx @@ -0,0 +1,14 @@ +import { CiFilter } from "react-icons/ci"; + +export default function PostFilter() { + return ( +
+
+ +
+
+ Filter +
+
+ ); +} diff --git a/src/components/PostComponents/PostGallery.tsx b/src/components/HomepageComponents/PostGallery.tsx similarity index 94% rename from src/components/PostComponents/PostGallery.tsx rename to src/components/HomepageComponents/PostGallery.tsx index 6372fd7..1218056 100644 --- a/src/components/PostComponents/PostGallery.tsx +++ b/src/components/HomepageComponents/PostGallery.tsx @@ -4,9 +4,10 @@ import { CiChat1 } from "react-icons/ci"; import { FaTwitter, FaLinkedin, FaReddit } from "react-icons/fa"; import { IoIosTrendingUp, IoIosTrendingDown } from "react-icons/io"; import { FiMinus } from "react-icons/fi"; +import { FaArrowRight } from "react-icons/fa6"; -import { Card, CardDescription, CardHeader, CardTitle } from "../ui/card"; -import TagRenderer from "./TagRenderer"; +import { Card, CardAction, CardDescription, CardHeader, CardTitle } from "../ui/card"; +import TagRenderer from "../PostComponents/TagRenderer"; import type { Sentiment, Source } from "@prisma/client"; type PostGroup = { @@ -194,12 +195,18 @@ export function PostCard({ postGroup }: { postGroup: PostGroup }) { ]; return ( - + +
+
{postGroup.title} +
+
+ +
+
- {dominantSentiment.description} @@ -288,7 +295,7 @@ export default function PostsGallery({ postGroups = mockPostGroup, }: PostsGalleryProps) { return ( -
+
{postGroups.map((postGroup, index) => ( ))} diff --git a/src/components/HomepageComponents/PostGalleryTitle.tsx b/src/components/HomepageComponents/PostGalleryTitle.tsx new file mode 100644 index 0000000..2b1847c --- /dev/null +++ b/src/components/HomepageComponents/PostGalleryTitle.tsx @@ -0,0 +1,20 @@ +type PostGalleryTitleProps = { + current: number; + total: number; +}; + +// Removed unused topics array + +export default function PostGalleryTitle({ + current, + total, +}: PostGalleryTitleProps) { + return ( +
+
Market Insights
+
+ {current} of {total} topics +
+
+ ); +} diff --git a/src/components/PostComponents/PostFilters.tsx b/src/components/HomepageComponents/PostSearch.tsx similarity index 53% rename from src/components/PostComponents/PostFilters.tsx rename to src/components/HomepageComponents/PostSearch.tsx index f260eee..e2bf057 100644 --- a/src/components/PostComponents/PostFilters.tsx +++ b/src/components/HomepageComponents/PostSearch.tsx @@ -1,13 +1,11 @@ -import { Select, SelectItem } from "@/components/ui/select"; import { Input } from "@/components/ui/input"; -import { PostSortSelect, SortField, SortOrder } from "./PostSortSelect"; interface PostFiltersProps { search: string; onSearchChange: (e: React.ChangeEvent) => void; } -export default function PostFilters({ +export default function PostSearch({ search, onSearchChange, }: PostFiltersProps) { @@ -17,8 +15,8 @@ export default function PostFilters({
diff --git a/src/components/Navbar/navbar.tsx b/src/components/Navbar/navbar.tsx new file mode 100644 index 0000000..39d13f7 --- /dev/null +++ b/src/components/Navbar/navbar.tsx @@ -0,0 +1,29 @@ +import { IoMdTrendingUp } from "react-icons/io"; +import { MdOutlineLightMode } from "react-icons/md"; + +export default function Navbar() { + return ( +
+
+
+
+
+ +
+
+
+
+ SentioPulse +
+
+ Market Sentiment Aggregation +
+
+
+
+ +
+
+
+ ); +} diff --git a/src/components/PostComponents/PostSortSelect.tsx b/src/components/PostComponents/PostSortSelect.tsx deleted file mode 100644 index 26eaac2..0000000 --- a/src/components/PostComponents/PostSortSelect.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import * as React from "react"; -import { - Select, - SelectItem, -} from "../ui/select"; - -export type SortField = "sentiment" | "createdAt" | "platform"; -export type SortOrder = "asc" | "desc"; - -interface PostSortSelectProps { - sortField: SortField; - sortOrder: SortOrder; - onSortFieldChange: (field: SortField) => void; - onSortOrderChange: (order: SortOrder) => void; -} - -export const PostSortSelect: React.FC = ({ - sortField, - sortOrder, - onSortFieldChange, - onSortOrderChange, -}) => { - return ( -
- - -
- ); -}; diff --git a/src/components/PostComponents/PostsList.tsx b/src/components/PostComponents/PostsList.tsx index e1a321c..f51ebba 100644 --- a/src/components/PostComponents/PostsList.tsx +++ b/src/components/PostComponents/PostsList.tsx @@ -1,12 +1,13 @@ "use client"; import { useEffect, useState, useRef, useCallback } from "react"; import SentimentBar from "./SentimentBar"; -import PostFilters from "./PostFilters"; +import PostFilters from "../HomepageComponents/PostSearch"; import { SortField, SortOrder } from "./PostSortSelect"; import Spinner from "./Spinner"; import type { Post } from "@prisma/client"; -import PostGallery from "./PostGallery"; +import PostGallery from "../HomepageComponents/PostGallery"; import BullishMarketCard from "../HomepageComponents/BullishMarketCard"; +import Posr export default function PostsList() { const [error, setError] = useState(null); @@ -98,7 +99,7 @@ export default function PostsList() { return (
- diff --git a/src/components/PostComponents/SentimentBar.tsx b/src/components/PostComponents/SentimentBar.tsx deleted file mode 100644 index c23b829..0000000 --- a/src/components/PostComponents/SentimentBar.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import React, { useEffect, useState } from "react"; -import type { Post} from "@prisma/client"; - -type SentimentBarProps = { - info: Post[]; -}; - -const SentimentBar: React.FC = ({ info }) => { - const [bullish, setBullish] = useState(0); - const [neutral, setNeutral] = useState(0); - const [bearish, setBearish] = useState(0); - - useEffect(() => { - const total = info.length; - const bullishCount = info.filter((p) => p.sentiment === "BULLISH").length; - const neutralCount = info.filter((p) => p.sentiment === "NEUTRAL").length; - const bearishCount = info.filter((p) => p.sentiment === "BEARISH").length; - const bullishPct = total ? (bullishCount / total) * 100 : 0; - const neutralPct = total ? (neutralCount / total) * 100 : 0; - const bearishPct = total ? (bearishCount / total) * 100 : 0; - - // Animated count-up for percentages - const duration = 700; - const step = 20; - const timers: number[] = []; - const clamp = (v: number) => Math.max(0, Math.min(100, v)); - const animate = (target: number, setter: (v: number) => void) => { - let current = 0; - const finalTarget = clamp(target); - const increment = finalTarget / (duration / step); - const timer = window.setInterval(() => { - current += increment; - if (current >= finalTarget) { - setter(Math.round(finalTarget)); - window.clearInterval(timer); - } else { - setter(Math.round(current)); - } - }, step); - timers.push(timer); - }; - animate(bullishPct, setBullish); - animate(neutralPct, setNeutral); - animate(bearishPct, setBearish); - return () => { - timers.forEach(window.clearInterval); - }; - }, [info]); - - return ( -
-
-
- {bullish}% -
-
- {neutral}% -
-
- {bearish}% -
-
-
- ); -}; - -export default SentimentBar;