/posts/[topic]/page page

Prototypr · Jan 31, 2024 · 8017bc1 · 8017bc1
1 parent cea3e67
commit 8017bc1
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 26 deletions.
diff --git a/components/toolbox/ToolboxIndexPage.jsx b/components/toolbox/ToolboxIndexPage.jsx
@@ -7,15 +7,15 @@ import PostTitle from "@/components/post-title";
 // import Link from "next/link";
 // import gumletLoader from "@/components/new-index/gumletLoader";
 // import ToolsLayout from "@/components/v4/layout/toolbox/ToolsLayout";
-import stc from "string-to-color";
+// import stc from "string-to-color";
 // import { Tag } from "phosphor-react";
 // import TwoColumnCards from "../v4/layout/TwoColumnCards";
 // import ToolsTagsNavRow from "../v4/section/ToolsTagsNavRow";
-import ToolCard from "../v4/card/ToolCard";
+// import ToolCard from "../v4/card/ToolCard";
 import NewsletterSection from "../v4/section/NewsletterSection";
 import useUser from "@/lib/iron-session/useUser";
 import ToolImageCard from "../v4/card/ToolImageCard";
-import ToolBoxHero from "./toolboxHero";
+// import ToolBoxHero from "./toolboxHero";
 import ToolBoxHeroWithSignup from "./ToolboxHeroWithEmailSignup";
 const StickyFooterCTA = dynamic(() => import("@/components/StickyFooterCTA"), {
   ssr: false,

diff --git a/components/v4/layout/Breadcrumbs.js b/components/v4/layout/Breadcrumbs.js
@@ -7,18 +7,18 @@ const Breadcrumbs = ({tagName, background}) =>{
     return(
         <Container padding={false} maxWidth="max-w-[1320px]">
         <div className={`text-sm font-medium ${background?'px-4 py-2 bg-white rounded-xl border border-gray-200':''} inline-flex text-gray-700`}>
-                <Link href={`/`}>
+                <Link className={`${!background?'inline  border border-1 border-blue-300/20 rounded-full p-1.5 px-3 bg-blue-200/30 text-gray-50/90 font-normal':''}`} href={`/`}>
                   <House size={20} className="my-auto"/>
                 </Link>
-                <CaretRight size={12} className="mx-2 my-auto"/>
-                <Link href={`/topics`}>
-                  <span className={`hover:underline ${!tagName?'font-semibold text-blue-700':''}`}>Topics</span>
+                <CaretRight size={12} className="mx-2 text-white my-auto"/>
+                <Link  className={`${!background?'inline  border border-1 border-blue-300/20 rounded-full p-1.5 px-3 bg-blue-200/30 text-gray-50/90 font-normal':''}`} href={`/topics`}>
+                  <span className={`hover:bold text-white ${!tagName?'font-semibold text-blue-700':''}`}>Topics</span>
                 </Link>
                { tagName?
                <>
-                <CaretRight size={12} className="mx-2 my-auto"/>
-                  <Link href={`/posts/${ tagName }/page/1`}>
-                    <span className="font-semibold text-blue-700 capitalize">{tagName}</span>
+                <CaretRight size={12} className="mx-2 text-white my-auto"/>
+                  <Link  className={`${!background?'inline  border border-1 border-blue-300/20 rounded-full p-1.5 px-3 bg-blue-400/60 font-normal':''}`} href={`/posts/${ tagName }/page/1`}>
+                    <span className="font-semibold text-white capitalize">{tagName}</span>
                   </Link>
                </>
                 :''}

diff --git a/components/v4/layout/LargePostGridB.js b/components/v4/layout/LargePostGridB.js
@@ -20,10 +20,10 @@ const LargePostGrid = ({ largePost, smallPosts, showHeading,title }) => {
       {showHeading!==false?<RSSTitle title={title}/>:''}
        <div className="flex relative p-2 mb-1">
             <div className="text-md inline text-gray-800 font-normal font-inter">
-            <Link href={`/topics/`}>See all</Link>
+            <Link href={`/posts/`}>See all</Link>
             </div>
             <div className="my-auto">
-              <Link href={`/topics/`}>
+              <Link href={`/posts/`}>
                 <div className="bg-blue-100 outline outline-1 outline-blue-300/50 ml-2.5 flex justify-center my-auto h-6 w-6 rounded-full">
                     <ArrowRight weight="bold" size={14} className="text-blue-900 my-auto"/>
                 </div>

diff --git a/components/v4/section/PostsSectionHero.js b/components/v4/section/PostsSectionHero.js
@@ -4,8 +4,9 @@ import PostsGridHero from "@/components/v4/layout/PostsGridHero";
 import PostsGroup3Cards from "../layout/PostsGroup3Cards";
 import RSSTitle from "../text/RSSTitle";
 import SectionDivider from "./SectionDivider";
+import TagsNavRow from "./TagsNavRow";
 // import {RssSimple} from 'phosphor-react'
-const PostsSectionHero = ({user, heroCardPost, viewablePosts, jobsSidebar,title, showRecent }) => {
+const PostsSectionHero = ({user, heroCardPost, viewablePosts, showTags,title, showRecent,showTitle }) => {
   return (
     <Container maxWidth="max-w-[1320px]">
       {showRecent && 
@@ -18,11 +19,20 @@ const PostsSectionHero = ({user, heroCardPost, viewablePosts, jobsSidebar,title,
         <SectionDivider py="py-4" transparentLine={true}/>
       </>
 
+      }
+      {showTags && 
+       <div className="-mt-6 -ml-3 mb-4">
+       <TagsNavRow/>
+     </div>
       }
       <div className="w-full h-full grid grid-cols-12 flex justify-center">
-        <div className={`w-full max-w-full flex flex-col gap-2 col-span-12 `}>
+        <div className={`${!showRecent?'-mt-4':''} w-full max-w-full flex flex-col gap-2 col-span-12 `}>
          <div className="flex justify-between">
-            <RSSTitle title={'All posts'}/>
+            {showTitle!==false &&
+            <div className="my-3">
+              <RSSTitle title={`${title?`All ${title}`:'All posts'}`}/>
+              </div>
+            }
             </div>
             <PostsGroup3Cards posts={!showRecent?viewablePosts:viewablePosts?.slice(2,viewablePosts?.length)}/>
         </div>

diff --git a/components/v4/section/TagsNavRow.js b/components/v4/section/TagsNavRow.js
@@ -56,7 +56,7 @@ const tags = [
 
 const TagsNavRow = ({currentPage}) => {
   return (
-    <Container maxWidth="max-w-[1320px] mt-7 mb-2">
+    <Container maxWidth={"max-w-[1320px] mt-7 mb-2"}>
         {/* browse all */}
         <div className="flex flex-wrap">
         <GiantTag classes={`${currentPage=='topics'?'border border-gray-800':''} pl-2 mr-4 md:mr-8`} link={`/topics`}>

diff --git a/pages/posts/[tag]/page/[pageNo].js b/pages/posts/[tag]/page/[pageNo].js
@@ -7,6 +7,8 @@ import Layout from "@/components/new-index/layoutForIndex";
 import Container from "@/components/container";
 import Footer from "@/components/footer";
 // import LargePostGridB from "@/components/v4/layout/LargePostGridB";
+import useUser from "@/lib/iron-session/useUser";
+// const Breadcrumbs = dynamic(() => import("@/components/Breadcrumbs"));
 
 // import PrototyprNetworkCTA from "@/components/Sidebar/NetworkCTA";
 import BreadCrumbs from "@/components/v4/layout/Breadcrumbs";
@@ -18,17 +20,19 @@ import { transformPostList } from "@/lib/locale/transformLocale";
 // import SponsorSidebarCard from "@/components/SponsorSidebarCard";
 // import { Waypoint } from "react-waypoint";
 // import { SIDEBAR_STICKY_OFFSET } from "@/lib/constants";
-import TopicSection from "@/components/v4/section/TopicSection";
+// import TopicSection from "@/components/v4/section/TopicSection";
 import { makeAuthorList, shuffleArray } from "@/lib/utils/postUtils";
 import { Tag } from "phosphor-react/dist";
+import PostsSectionHero from "@/components/v4/section/PostsSectionHero";
+import TagsNavRow from "@/components/v4/section/TagsNavRow";
 // import SmallPostsGroup from "@/components/v4/layout/SmallPostsSection";
 // import Image from "next/image";
 // const Aspiring = dynamic(() => import("@/components/new-index/Aspiring"));
 // const EditorPick2 = dynamic(() => import("@/components/new-index/EditorPick2"));
 // const ProductList = dynamic(() => import("@/components/new-index/ProductList"));
 // const TopicTopItem = dynamic(() => import("@/components/new-index/TopicTopItem"), { ssr: false });
 
-const PAGE_SIZE = 12;
+const PAGE_SIZE = 9;
 const ALL_TAGS = [
   "ux",
   "user-research",
@@ -66,6 +70,9 @@ export default function PostsPage({
     tagName = "UI Design";
   }
 
+  const { user, isLoading } = useUser({
+    redirectIfFound: false,
+  });
   return (
     <>
       <Layout
@@ -84,27 +91,68 @@ export default function PostsPage({
       >
       <div className="mb-8 top-0 w-full">
         <Container padding={false} maxWidth="w-full" >
-          <div className="pt-[120px] pb-[120px] bg-[#CCE6FF]/90 relative overflow-hidden p-6 border-gray-200">
-
-            <img src="/static/images/angleshape.svg" className="absolute -mb-[2%] w-full bottom-0 z-40 left-0"/>
+          <div className="pt-[100px] pb-[120px] bg-[#2f62c7]/90 rounded-b-[3.4rem] relative overflow-hidden p-6 border-gray-200">
+            {/* <img src="/static/images/angleshape.svg" className="absolute -mb-[2%] w-full bottom-0 z-40 left-0"/> */}
 
             {/* <div className="z-20 relative"> */}
             <div className="w-full max-w-[1320px] px-3 mx-auto backdrop-blur-sm backdrop-opacity-20 w-full h-full">
               <BreadCrumbs background={false}tagName={tagName}/>
                 <div className="inline-flex my-4">
                   {/* <div className="p w-8 h-8 my-auto mr-3 rounded-full border-gray-300 bg-white"> */}
-                    <Tag className="mt-6 mx-auto mr-3 my-auto opacity-60" size={38}/>
+                    <Tag className="mt-6 text-white mx-auto mr-3 my-auto opacity-80" size={38}/>
                   {/* </div> */}
-                  <h2 className="text-[#0F1F40] max-w-md mb-8 mt-3 md:max-w-lg font-semibold text-5xl md:text-[56px] font-inter leading-[50px] md:leading-[60px] capitalize">{tagName}</h2>
+                  <h2 className="text-white max-w-md mb-8 mt-3 md:max-w-lg font-semibold text-5xl md:text-[56px] font-inter leading-[50px] md:leading-[60px] capitalize">{tagName}</h2>
                 </div>
               </div>
           </div>
+          <img src='/static/images/toolbox/white-grid.svg' className="pointer-events-none absolute w-full h-full object-cover top-0 left-0"/>
+
         </Container>
       </div>
       {/* <div className="h-[232px]"/> */}
         {allPosts?.length?
-        <div className="pb-10 -mt-32 z-50 relative">
-            <TopicSection
+        <div className="pb-10 -mt-36 z-50 relative">
+
+{
+                pagination.page && pagination.page == 1 ? (
+                    morePosts.length > 0 &&  <PostsSectionHero
+                    user={user}
+                    showTags={true}
+                    title={tagName}
+                    heroCardPost={allPosts[0]}
+                    viewablePosts={allPosts?.slice(1)}
+                    showRecent={true}
+                  />
+
+                ): (
+                    allPosts.length > 0 && 
+                    <div className="pt-4">
+                      <PostsSectionHero
+                        user={user}
+                        showTags={false}
+                        showTitle={false}
+                        // heroCardPost={heroPost}
+                        viewablePosts={allPosts}
+                        showRecent={false}
+                      />
+
+                    </div>
+                )
+              }
+
+                <NewPagination
+            total={pagination?.total}
+            pageSize={PAGE_SIZE}
+            currentPage={pagination?.page}
+            onPageNumChange={(pageNum) => {
+              onPageNumChange(pageNum);
+            }}
+          />
+
+{/* <TagsNavRow/> */}
+
+
+            {/* <TopicSection
                   showTitle={false}
                   showSidebar={false}
                   showTopicCloud={true}
@@ -128,7 +176,7 @@ export default function PostsPage({
                   // sponsors={sponsors}
                   toolsList={tools?.slice(0, 4)}
                   // authorsList={topicRes[topic.slug]?.authors}
-                />
+                /> */}
         </div>:''}
             {/* todo show loading state above */}