/posts page

Prototypr · Jan 31, 2024 · 46220c8 · 46220c8
1 parent d3c9334
commit 46220c8
Show file tree

Hide file tree

Showing 15 changed files with 406 additions and 39 deletions.
diff --git a/components/Navbar/Navbar.jsx b/components/Navbar/Navbar.jsx
@@ -59,7 +59,7 @@ const Navbar = ({
 
   return (
     <>
-      <nav id="main-nav" className={`font-inter fixed top-3.5 w-full`} style={{zIndex:99}}>
+      <nav id="main-nav" className={`font-inter fixed top-2 w-full`} style={{zIndex:99}}>
         <div
           className={`w-[97%] search-wide ${
             maxWidth ? maxWidth : "max-w-[1020px]"

diff --git a/components/old/toolboxIndexPage.js b/components/old/toolboxIndexPage.js
@@ -117,8 +117,8 @@ export default function ToolboxPage({ allPosts = [], topicPosts = [], featuredPo
         }}
         activeNav={"toolbox"}
       >
-        {!user?.isLoggedIn && <StickyFooterCTA title="Get the latest tools, weekly"
-      description="Collect tools, get published, and earn rewards."
+        {!user?.isLoggedIn && <StickyFooterCTA title="Get the latest stories"
+      description="Join today to make posts and grow with us."
       />}
         <ToolBoxHero />
 

diff --git a/components/toolbox/ToolboxHeroWithEmailSignup.js b/components/toolbox/ToolboxHeroWithEmailSignup.js
@@ -103,7 +103,7 @@ const ProductListData2 = [
 const ToolBoxHeroWithSignup = ({user}) => {
   return (
     <div className="w-full h-full bg-white toolboxheroGradient pt-20 pb-8 -mt-[96px] border-b mb-14">
-      <div className="w-full h-auto py-20 relative z-2">
+      <div className="w-full h-auto pt-16 pb-12 relative z-2">
         <div className="max-w-7xl mx-auto grid place-items-center h-full">
           <div className="flex flex-col justify-center items-center gap-2">
             <div className="rounded-[16px] overflow-hidden shadow-xl">

diff --git a/components/toolbox/ToolboxIndexPage.jsx b/components/toolbox/ToolboxIndexPage.jsx
@@ -129,14 +129,17 @@ const ToolboxIndexPage = ({
           )}
         </div>
       </Container>
-      <div className="grid-cols-12 grid">
+      {/* <div className="grid-cols-12 grid">
         <div className="hidden md:block col-span-2 max-w-[410px]"></div>
           <div className="col-span-12 md:col-span-10">
             {!user?.isLoggedIn && <StickyFooterCTA title="Get the latest tools, weekly"
           description="Collect tools, get published, and earn rewards."
           />}
           </div>
-      </div>
+      </div> */}
+        {!user?.isLoggedIn && <StickyFooterCTA title="Get the latest tools, weekly"
+      description="Join today to make posts and grow with us."
+      />}
     </>
   );
 };

diff --git a/components/v4/card/BigCard/BigCardPost.js b/components/v4/card/BigCard/BigCardPost.js
@@ -0,0 +1,52 @@
+import Image from "next/image";
+import Link from "next/link";
+import Avatar from "../../avatar/Avatar";
+import MediumTag from "../../tag/MediumTag";
+import gumletLoader from "@/components/new-index/gumletLoader";
+
+const BigCardPost = ({ link,title, excerpt, image, tags, date, avatar, author }) => {
+  return (
+    <div className="hover:bg-white transition transition-all duration-300 rounded-2xl p-1 flex flex-col sm:flex-row lg:flex-col font-inter w-full max-w-[985px]">
+      <div className="w-full w-full relative h-[180px] sm:h-[224px] md:h-[248px] rounded-2xl overflow-hidden border border-gray-200">
+        <Link href={link??''}>
+          <Image
+            loader={gumletLoader}
+            className="object-cover cursor-pointer"
+            layout="fill"
+            src={image}
+            alt={title}
+          />
+        </Link>
+      </div>
+      <div className="w-full px-0 sm:px-6 lg:px-0 flex flex-col justify-center">
+        <div className="flex text-xs mb-3 mt-3">
+          {tags?.length
+            ? tags.slice(0, 2).map((tag, index) => {
+                return (
+                  <MediumTag
+                    key={index}
+                    index={index}
+                    link={`/posts/${tag.attributes?.slug}/page/1/`}
+                  >
+                    {tag.attributes?.name}
+                  </MediumTag>
+                );
+              })
+            : ""}
+        </div>
+        <Link href={link??''}>
+          <h2 className="text-xl sm:text-xl font-semibold line-clamp-3">
+            {title}
+          </h2>
+        </Link>
+        <Link href={link??''}>
+          <p className="mt-3 text-gray-500 line-clamp-2">{excerpt}</p>
+        </Link>
+        <div className="mt-3">
+          <Avatar src={avatar} author={author} date={date} size="lg" />
+        </div>
+      </div>
+    </div>
+  );
+};
+export default BigCardPost;
diff --git a/components/v4/card/SmallCard/MediumPost.js b/components/v4/card/SmallCard/MediumPost.js
@@ -0,0 +1,59 @@
+import Image from "next/image";
+import Link from "next/link";
+import Avatar from "../../avatar/AvatarLine";
+import SmallTag from "../../tag/SmallTag";
+import gumletLoader from "@/components/new-index/gumletLoader";
+
+const MediumPost = ({link, title, image, tags, date, avatar, author }) => {
+  return (
+    <div className="flex mt-3 mb-6 sm:mt-0 flex-col hover:bg-white transition transition-all duration-300 p-1 rounded-2xl font-inter w-full">
+      {image ? (
+        <div className="w-full shrink-0 h-[180px] max-w-full sm:max-w-[190px] md:h-[240px] md:max-w-full relative rounded-2xl overflow-hidden border border-gray-100">
+          <Link href={link??''}>
+            <Image
+              className="object-cover cursor-pointer"
+              layout="fill"
+              src={image}
+              loader={gumletLoader}
+              alt={title}
+            />
+          </Link>
+        </div>
+      ) : (
+        ""
+      )}
+      <div className="mt-3 flex flex-col justify-start">
+
+        <div>
+          <Link href={link??''}>
+            <h2 className="text-lg font-semibold leading-snug line-clamp-3">
+              {title}
+            </h2>
+          </Link>
+
+        <div className="mt-2">
+          <Avatar src={avatar} author={author} date={date} size="sm" />
+        </div>
+        </div>
+        <div className="flex mt-3 text-xs">
+            {tags?.length
+              ? tags.slice(0, 2).map((tag, index) => {
+                //2 long tags make break the layout, so remove word 'design'
+                let name = tag.attributes?.name.replace('-', ' ')
+                  return (
+                    <SmallTag
+                      key={index}
+                      index={index}
+                      link={`/posts/${tag.attributes?.slug}/page/1/`}
+                    >
+                      {name}
+                    </SmallTag>
+                  );
+                })
+              : ""}
+          </div>
+      </div>
+    </div>
+  );
+};
+export default MediumPost;
diff --git a/components/v4/card/SmallCard/SmallCardPost.js b/components/v4/card/SmallCard/SmallCardPost.js
@@ -0,0 +1,58 @@
+import Image from "next/image";
+import Link from "next/link";
+import Avatar from "../../avatar/AvatarLine";
+import SmallTag from "../../tag/SmallTag";
+import gumletLoader from "@/components/new-index/gumletLoader";
+
+const SmallCard = ({link, title, image, tags, date, avatar, author }) => {
+  return (
+    <div className="flex mt-3 sm:mt-0 flex-col sm:flex-row hover:bg-white transition transition-all duration-300 p-1 rounded-2xl font-inter w-full">
+      {image ? (
+        <div className="w-full shrink-0 h-[180px] max-w-full sm:max-w-[190px] md:h-[200px] md:max-w-[320px] relative rounded-2xl overflow-hidden border border-gray-100">
+          <Link href={link??''}>
+            <Image
+              className="object-cover cursor-pointer"
+              layout="fill"
+              src={image}
+              loader={gumletLoader}
+              alt={title}
+            />
+          </Link>
+        </div>
+      ) : (
+        ""
+      )}
+      <div className="shrink mt-3 sm:mt-0 sm:px-4 md:pr-0 flex flex-col justify-start">
+          <div className="flex  text-xs mb-1.5">
+            {tags?.length
+              ? tags.slice(0, 2).map((tag, index) => {
+                //2 long tags make break the layout, so remove word 'design'
+                let name = tag.attributes?.name.replace('-', ' ')
+                  return (
+                    <SmallTag
+                      key={index}
+                      index={index}
+                      link={`/posts/${tag.attributes?.slug}/page/1/`}
+                    >
+                      {name}
+                    </SmallTag>
+                  );
+                })
+              : ""}
+          </div>
+        <div>
+          <Link href={link??''}>
+            <h2 className="text-lg font-semibold leading-snug line-clamp-3">
+              {title}
+            </h2>
+          </Link>
+
+        <div className="mt-2">
+          <Avatar src={avatar} author={author} date={date} size="sm" />
+        </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default SmallCard;
diff --git a/components/v4/layout/PostsGridHero.js b/components/v4/layout/PostsGridHero.js
@@ -0,0 +1,43 @@
+import BigCardPost from "../card/BigCard/BigCardPost";
+// import { ArrowRight } from "phosphor-react";
+// import Link from 'next/link'
+
+// import SmallCard from "../card/SmallCard/SmallCardE";
+import SmallPostsGroup2Cards from "./SmallPostsGroup2Cards";
+import RSSTitle from "../text/RSSTitle";
+// import PostsGroup3Cards from "./PostsGroup3Cards";
+
+const PostsGridHero = ({ largePost, smallPosts, showHeading,title }) => {
+  let url = largePost?.attributes?.featuredImage?.data?.attributes?.url;
+  const dummyAvatar = 'https://s3-us-west-1.amazonaws.com/tinify-bucket/%2Fprototypr%2Ftemp%2F1595435549331-1595435549330.png'
+  const largeCoverImage = url
+    ? url
+    : largePost?.attributes?.legacyFeaturedImage?.mediaItemUrl?largePost?.attributes?.legacyFeaturedImage?.mediaItemUrl:dummyAvatar;
+
+    let authorData = largePost?.attributes?.author?.data?.attributes
+    let largePostAvatar = authorData?.avatar?.data?authorData?.avatar?.data?.attributes?.url:authorData?.legacyAvatar?authorData?.legacyAvatar:dummyAvatar
+  return (
+    <>
+    <div className="flex justify-between">
+      {showHeading!==false?<RSSTitle title={'Recent posts'}/>:''}
+    </div>
+    <div className="flex flex-col lg:flex-row justify-between max-w-[1320px]">
+      <div className="w-full lg:w-1/2 md:pr-6">
+        <BigCardPost
+          link={`/post/${largePost?.attributes?.slug}`}
+          avatar={largePostAvatar}
+          excerpt={largePost?.attributes?.excerpt}
+          author={largePost?.attributes?.author?.data?.attributes}
+          image={largeCoverImage}
+          date={largePost?.attributes?.date}
+          title={largePost?.attributes?.title}
+          tags={largePost?.attributes?.tags?.data}
+        />
+      </div>
+        <SmallPostsGroup2Cards smallPosts={smallPosts?.slice(0,2)}/>
+    </div>
+    {/* rows of 3 */}
+    </>
+  );
+};
+export default PostsGridHero;
diff --git a/components/v4/layout/PostsGroup3Cards.js b/components/v4/layout/PostsGroup3Cards.js
@@ -0,0 +1,39 @@
+// import PrototyprNetworkCTA2 from "@/components/Sidebar/NetworkCTA2";
+import MediumPost from "../card/SmallCard/MediumPost";
+const dummyAvatar = 'https://s3-us-west-1.amazonaws.com/tinify-bucket/%2Fprototypr%2Ftemp%2F1595435549331-1595435549330.png'
+// import SingleFancyCard from "./SingleFancyCard";
+
+const PostsGroup3Cards = ({posts}) =>{
+
+    return(
+        <div className="grid grid-cols-3 gap-6 w-full">
+{/* <SingleFancyCard/> */}
+            {/* <PrototyprNetworkCTA2 /> */}
+        {posts?.length ? (
+          posts.map((post, index) => {
+            let url = post?.attributes?.featuredImage?.data?.attributes?.url;
+            const coverImage = url
+              ? url
+              : post?.attributes?.legacyFeaturedImage?.mediaItemUrl;
+              let authorData = post.attributes?.author?.data?.attributes
+              let avatar = authorData?.avatar?.data?authorData?.avatar?.data?.attributes?.url:authorData?.legacyAvatar?authorData?.legacyAvatar:dummyAvatar
+            return (
+              <div key={index} className="w-full">
+                <MediumPost
+                  link={`/post/${post?.attributes?.slug}`}
+                  avatar={avatar}
+                  author={post?.attributes?.author?.data?.attributes}
+                  image={coverImage}
+                  date={post?.attributes?.date}
+                  title={post?.attributes?.title}
+                  tags={post?.attributes?.tags?.data}
+                />
+              </div>
+            );
+          })
+        ) :"" 
+        }
+      </div>
+    )
+}
+export default PostsGroup3Cards
diff --git a/components/v4/layout/PostsRow3.js b/components/v4/layout/PostsRow3.js
@@ -0,0 +1,31 @@
+// import BigCardPost from "../card/BigCard/BigCardPost";
+// import { ArrowRight } from "phosphor-react";
+// import Link from 'next/link'
+
+// import SmallCard from "../card/SmallCard/SmallCardE";
+import PostsGroup3Cards from "./PostsGroup3Cards";
+import RSSTitle from "../text/RSSTitle";
+
+const PostsGridHero = ({ posts, showHeading,title }) => {
+  let url = largePost?.attributes?.featuredImage?.data?.attributes?.url;
+  const dummyAvatar = 'https://s3-us-west-1.amazonaws.com/tinify-bucket/%2Fprototypr%2Ftemp%2F1595435549331-1595435549330.png'
+  const largeCoverImage = url
+    ? url
+    : largePost?.attributes?.legacyFeaturedImage?.mediaItemUrl?largePost?.attributes?.legacyFeaturedImage?.mediaItemUrl:dummyAvatar;
+
+    let authorData = largePost?.attributes?.author?.data?.attributes
+    let largePostAvatar = authorData?.avatar?.data?authorData?.avatar?.data?.attributes?.url:authorData?.legacyAvatar?authorData?.legacyAvatar:dummyAvatar
+  return (
+    <>
+    <div className="flex justify-between">
+      {showHeading!==false?<RSSTitle title={'Recent posts'}/>:''}
+    </div>
+    <div className="flex flex-col lg:flex-row justify-between max-w-[1320px]">
+        <PostsGroup3Cards posts={posts}/>
+    </div>
+    {/* rows of 3 */}
+
+    </>
+  );
+};
+export default PostsGridHero;
diff --git a/components/v4/layout/SmallPostsGroup2Cards.js b/components/v4/layout/SmallPostsGroup2Cards.js
@@ -0,0 +1,39 @@
+// import PrototyprNetworkCTA2 from "@/components/Sidebar/NetworkCTA2";
+import SmallCardPost from "../card/SmallCard/SmallCardPost";
+const dummyAvatar = 'https://s3-us-west-1.amazonaws.com/tinify-bucket/%2Fprototypr%2Ftemp%2F1595435549331-1595435549330.png'
+// import SingleFancyCard from "./SingleFancyCard";
+
+const SmallPostsGroup2Cards = ({smallPosts}) =>{
+
+    return(
+        <div className="flex w-full lg:w-1/2 flex-col mt-4 lg:-mt-3">
+{/* <SingleFancyCard/> */}
+            {/* <PrototyprNetworkCTA2 /> */}
+        {smallPosts?.length ? (
+          smallPosts.map((post, index) => {
+            let url = post?.attributes?.featuredImage?.data?.attributes?.url;
+            const coverImage = url
+              ? url
+              : post?.attributes?.legacyFeaturedImage?.mediaItemUrl;
+              let authorData = post.attributes?.author?.data?.attributes
+              let avatar = authorData?.avatar?.data?authorData?.avatar?.data?.attributes?.url:authorData?.legacyAvatar?authorData?.legacyAvatar:dummyAvatar
+            return (
+              <div key={index} className="w-full mt-3 mb-3">
+                <SmallCardPost
+                  link={`/post/${post?.attributes?.slug}`}
+                  avatar={avatar}
+                  author={post?.attributes?.author?.data?.attributes}
+                  image={coverImage}
+                  date={post?.attributes?.date}
+                  title={post?.attributes?.title}
+                  tags={post?.attributes?.tags?.data}
+                />
+              </div>
+            );
+          })
+        ) :"" 
+        }
+      </div>
+    )
+}
+export default SmallPostsGroup2Cards