@stackshift-ui/blog 6.0.5 → 6.0.7-beta.0

package/src/blog_b.tsx

@@ -0,0 +1,160 @@
+import { Button } from "@stackshift-ui/button";
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Heading } from "@stackshift-ui/heading";
+import { Image } from "@stackshift-ui/image";
+import { Link } from "@stackshift-ui/link";
+import { Section } from "@stackshift-ui/section";
+import { Text } from "@stackshift-ui/text";
+import { format } from "date-fns";
+import { BlogProps } from ".";
+import { useMediaQuery } from "./hooks/useMediaQuery";
+import { BlogPost, LabeledRoute } from "./types";
+
+export default function Blog_B({ subtitle, title, posts, primaryButton }: BlogProps) {
+  const blogsPerPage = 5;
+  const count = 0;
+
+  return (
+    <Section className="py-20 bg-background">
+      <Container maxWidth={1280}>
+        <SubtitleAndTitle subtitle={subtitle} title={title} />
+        <BlogPosts posts={posts} count={count} blogsPerPage={blogsPerPage} />
+        <PrimaryButton primaryButton={primaryButton} />
+      </Container>
+    </Section>
+  );
+}
+
+function SubtitleAndTitle({ subtitle, title }: { subtitle?: string; title?: string }) {
+  return (
+    <div className="w-full mb-16 text-center">
+      {subtitle ? (
+        <Text weight="bold" className="text-secondary">
+          {subtitle}
+        </Text>
+      ) : null}
+      {title ? <Heading fontSize="3xl">{title}</Heading> : null}
+    </div>
+  );
+}
+
+function BlogPosts({
+  posts,
+  count,
+  blogsPerPage,
+}: {
+  posts?: BlogPost[];
+  count: number;
+  blogsPerPage: number;
+}) {
+  return (
+    <Flex wrap justify="center" className="mb-16" gap={4}>
+      <div className="w-full lg:w-[45%]">
+        {posts
+          ?.slice(count, count + 1)
+          .map((post, key) => <BlogItem size="lg" post={post} key={key} />)}
+      </div>
+      <Flex wrap className="w-full lg:w-[45%]" gap={4}>
+        {posts?.slice(count + 1, blogsPerPage).map((post, key) => (
+          <div className="w-full lg:basis-[45%]" key={key}>
+            <BlogItem post={post} size="sm" key={key} />
+          </div>
+        ))}
+      </Flex>
+    </Flex>
+  );
+}
+
+function BlogItem({ post, size, key }: { post: BlogPost; size?: string; key: number }) {
+  const breakpoints = useMediaQuery("1024");
+
+  return (
+    <div className="overflow-hidden rounded-md shadow">
+      {post?.mainImage ? (
+        <ImageContainer post={post} size={size} breakpoints={breakpoints} key={key} />
+      ) : null}
+      <div className="p-6 bg-white flex flex-col justify-between" style={{ height: "295px" }}>
+        <div>
+          {post?.publishedAt ? (
+            <Text muted className="text-sm">
+              {format(new Date(post.publishedAt), " dd MMM, yyyy")}
+            </Text>
+          ) : null}
+          {post?.title ? (
+            <Heading type="h4" className="my-2">
+              {post.title.length > 25 ? `${post.title.substring(0, 25)}...` : post.title}
+            </Heading>
+          ) : null}
+          {post?.excerpt ? (
+            <Text muted className="mb-6 text-justify">
+              {post.excerpt.length > 41 ? `${post.excerpt.substring(0, 41)}...` : post.excerpt}
+            </Text>
+          ) : null}
+        </div>
+        {post?.link ? (
+          <Link
+            aria-label="View Blog Post"
+            className="font-bold text-primary hover:text-secondary"
+            href={`/${post?.link}`}>
+            View Blog Post
+          </Link>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function ImageContainer({
+  post,
+  size,
+  breakpoints,
+  key,
+}: {
+  post: BlogPost;
+  size?: string;
+  breakpoints: boolean;
+  key: number;
+}) {
+  return (
+    <>
+      {breakpoints ? (
+        <Image
+          className="object-cover w-full overflow-hidden"
+          src={`${post.mainImage}`}
+          sizes="100vw"
+          style={{ width: "100%", height: "auto", objectFit: "cover" }}
+          width={271}
+          height={248}
+          alt={post?.mainImage ?? `blog-variantB-image-${key}`}
+        />
+      ) : (
+        <div className={`${size === "lg" ? "h-[44.5rem]" : "h-[12.5rem]"}`}>
+          <Image
+            className="object-cover w-full overflow-hidden rounded-t-md"
+            src={`${post.mainImage}`}
+            sizes="100vw"
+            style={{ width: "100%", height: "100%", objectFit: "cover" }}
+            width={271}
+            height={248}
+            alt={`blog-variantB-image-${post.title}`}
+          />
+        </div>
+      )}
+    </>
+  );
+}
+
+function PrimaryButton({ primaryButton }: { primaryButton?: LabeledRoute }) {
+  if (!primaryButton?.label) return null;
+
+  return (
+    <div className="text-center">
+      <Button as="link" link={primaryButton} ariaLabel={primaryButton?.label}>
+        {primaryButton?.label}
+      </Button>
+    </div>
+  );
+}
+
+export { Blog_B };

package/src/blog_c.tsx

@@ -0,0 +1,142 @@
+import { Badge } from "@stackshift-ui/badge";
+import { Button } from "@stackshift-ui/button";
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Heading } from "@stackshift-ui/heading";
+import { Image } from "@stackshift-ui/image";
+import { Link } from "@stackshift-ui/link";
+import { Section } from "@stackshift-ui/section";
+import { Text } from "@stackshift-ui/text";
+import { format } from "date-fns";
+import React from "react";
+import { BlogProps } from ".";
+import { useMediaQuery } from "./hooks/useMediaQuery";
+import { BlogPost, LabeledRoute } from "./types";
+
+export default function Blog_C({ subtitle, title, posts, primaryButton }: BlogProps) {
+  let blogsPerPage = 3;
+
+  return (
+    <Section className="py-20 bg-background">
+      <Container maxWidth={1280}>
+        <Flex align="center" justify="between" className="flex-col mb-16 md:flex-row" gap={4}>
+          <SubtitleAndTitleText subtitle={subtitle} title={title} />
+          <PrimaryButton primaryButton={primaryButton} />
+        </Flex>
+        <BlogPosts posts={posts} blogsPerPage={blogsPerPage} />
+        <PrimaryButton primaryButton={primaryButton} />
+      </Container>
+    </Section>
+  );
+}
+
+function SubtitleAndTitleText({ subtitle, title }: { subtitle?: string; title?: string }) {
+  return (
+    <div className="text-center md:text-left">
+      {subtitle ? (
+        <Text weight="bold" className="text-primary">
+          {subtitle}
+        </Text>
+      ) : null}
+      {title ? <Heading fontSize="3xl">{title}</Heading> : null}
+    </div>
+  );
+}
+
+function BlogPosts({ posts, blogsPerPage }: { posts?: BlogPost[]; blogsPerPage?: number }) {
+  if (!posts) return null;
+  return (
+    <div>
+      {posts?.slice(0, blogsPerPage)?.map((post, key) => (
+        <div className="flex flex-wrap mb-8 overflow-hidden rounded-md shadow" key={key}>
+          <BlogItem
+            post={post}
+            className={`${key % 2 === 0 ? "flex-row" : "flex-row-reverse"}`}
+            key={key}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function BlogItem({ post, className, key }: { key: number; post: BlogPost; className?: string }) {
+  const breakpoints = useMediaQuery("1100");
+  const maxExcerptLength = breakpoints ? 70 : 200;
+
+  return (
+    <Flex wrap className={`bg-white overflow-hidden rounded-lg shadow  w-full ${className}`}>
+      {post?.mainImage && (
+        <Image
+          className="object-cover w-full h-auto rounded-l lg:w-1/2"
+          src={`${post?.mainImage}`}
+          sizes="100vw"
+          width={554}
+          height={416}
+          alt={post?.alt ?? `blog-variantC-image-${key}`}
+        />
+      )}
+      <div className="w-full px-6 py-6 rounded-r lg:w-1/2 lg:pt-10">
+        <Flex gap={2}>
+          {post?.categories &&
+            post?.categories?.map((category, index) => (
+              <Badge className=" bg-secondary-foreground text-primary" key={index}>
+                {category?.title}
+              </Badge>
+            ))}
+        </Flex>
+
+        {post?.publishedAt && (
+          <Text muted className="m-1">
+            {format(new Date(post?.publishedAt), " dd MMM, yyyy")}
+          </Text>
+        )}
+        {post?.title && (
+          <Heading className="my-4" type="h3">
+            {post?.title?.length > 40 ? post?.title?.substring(0, 40) + "..." : post?.title}
+          </Heading>
+        )}
+        {post?.authors && (
+          <div className="flex mb-10 flex-wrap">
+            <span className="italic text-primary">By&nbsp;</span>
+            {post?.authors?.map((author, index, { length }) => (
+              <>
+                <Text className="italic text-primary">{author?.name}</Text>
+                {index + 1 !== length ? <span>&nbsp;,&nbsp;</span> : null}
+              </>
+            ))}
+          </div>
+        )}
+        {post?.excerpt && (
+          <Text muted className="mb-6 leading-loose text-justify">
+            {post?.excerpt?.length > maxExcerptLength
+              ? post?.excerpt?.substring(0, maxExcerptLength) + "..."
+              : post?.excerpt}
+          </Text>
+        )}
+        {post?.link && (
+          <Link
+            aria-label="View Blog Post"
+            className="font-bold text-primary hover:text-primary-foreground"
+            href={`/${post?.link}`}>
+            View Blog Post
+          </Link>
+        )}
+      </div>
+    </Flex>
+  );
+}
+
+function PrimaryButton({ primaryButton }: { primaryButton?: LabeledRoute }) {
+  if (!primaryButton?.label) return null;
+
+  return (
+    <React.Fragment>
+      <Button as="link" link={primaryButton} ariaLabel={primaryButton?.label}>
+        {primaryButton?.label}
+      </Button>
+    </React.Fragment>
+  );
+}
+
+export { Blog_C };

package/src/blog_d.tsx

@@ -0,0 +1,350 @@
+import { Button } from "@stackshift-ui/button";
+import { Card } from "@stackshift-ui/card";
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Heading } from "@stackshift-ui/heading";
+import { Image } from "@stackshift-ui/image";
+import { Input } from "@stackshift-ui/input";
+import { Link } from "@stackshift-ui/link";
+import { Section } from "@stackshift-ui/section";
+import { Text } from "@stackshift-ui/text";
+import { format } from "date-fns";
+import React from "react";
+import { BlogProps } from ".";
+import { Author, BlogPost, SanityBody } from "./types";
+
+interface BlogPostProps extends SanityBody {
+  category?: string;
+  title?: string;
+  slug?: {
+    _type: "slug";
+    current: string;
+  };
+  excerpt?: string;
+  publishedAt?: string;
+  mainImage?: string;
+  authors?: Author[];
+}
+
+export default function Blog_D({ subtitle, title, posts }: BlogProps) {
+  const [activeTab, setActiveTab] = React.useState<string>("All");
+  const [currentPage, setCurrentPage] = React.useState<number>(1);
+  const [searchQuery, setSearchQuery] = React.useState<string>("");
+  let blogsPerPage = 6;
+
+  React.useEffect(() => {
+    setCurrentPage(1);
+  }, [activeTab]);
+
+  const transformedPosts: BlogPostProps[] = (posts ?? []).flatMap(post =>
+    (post?.categories ?? []).map(
+      category =>
+        ({
+          category: category?.title,
+          title: post?.title,
+          slug: post?.slug,
+          excerpt: post?.excerpt,
+          publishedAt: post?.publishedAt,
+          mainImage: post?.mainImage,
+          authors: post?.authors,
+        }) as BlogPostProps,
+    ),
+  );
+
+  // get all categories
+  const categories: string[] = transformedPosts?.reduce((newArr: any[], items: BlogPostProps) => {
+    const titles = items?.category;
+
+    if (newArr.indexOf(titles) === -1) {
+      newArr.push(titles);
+    }
+    return newArr;
+  }, []);
+
+  // filtered posts per category
+  const filteredPosts =
+    activeTab === "All"
+      ? posts?.filter(post => post?.title?.toLowerCase().includes(searchQuery.toLowerCase()))
+      : transformedPosts.filter(
+          item =>
+            item?.category === activeTab &&
+            item?.title?.toLowerCase().includes(searchQuery.toLowerCase()),
+        );
+
+  //Pagination
+  const indexOfLastPost = currentPage * blogsPerPage;
+  const indexOfFirstPost = indexOfLastPost - blogsPerPage;
+  const currentPosts = filteredPosts?.slice(indexOfFirstPost, indexOfLastPost);
+
+  //Change page
+  const paginate = (pageNumber: number) => setCurrentPage(pageNumber);
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchQuery(e.target.value);
+    setActiveTab("All");
+    setCurrentPage(1);
+  };
+
+  return (
+    <Section className="py-20 bg-background">
+      <Container maxWidth={1280}>
+        <SubtitleAndTitleText subtitle={subtitle} title={title} />
+        <SearchInput handleSearchChange={handleSearchChange} />
+        <Flex wrap>
+          <CategoryTab categories={categories} activeTab={activeTab} setActiveTab={setActiveTab} />
+          {filteredPosts?.length === 0 ? (
+            <NoPostsMessage />
+          ) : (
+            <PostItems
+              currentPosts={currentPosts}
+              activeTab={activeTab}
+              blogsPerPage={blogsPerPage}
+            />
+          )}
+        </Flex>
+        <Pagination
+          blogsPerPage={blogsPerPage}
+          totalBlogs={filteredPosts?.length as number}
+          paginate={paginate}
+          currentPage={currentPage}
+        />
+      </Container>
+    </Section>
+  );
+}
+
+function NoPostsMessage({ message = "No post available." }) {
+  return <div className="w-full px-3 lg:w-3/4 font-medium text-lg">{message}</div>;
+}
+
+function SubtitleAndTitleText({ subtitle, title }: { subtitle?: string; title?: string }) {
+  return (
+    <div className="w-full mb-16">
+      {subtitle ? (
+        <Text weight={"bold"} className="text-secondary">
+          {subtitle}
+        </Text>
+      ) : null}
+      {title ? <Heading fontSize="3xl">{title}</Heading> : null}
+    </div>
+  );
+}
+
+function SearchInput({
+  handleSearchChange,
+}: {
+  handleSearchChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}) {
+  return (
+    <div className="relative mb-5 w-full lg:w-1/4">
+      <Input
+        type="text"
+        aria-label="Search, find any question you want to ask..."
+        className="w-full bg-white border rounded-global font-heading focus:border-gray-500 focus:outline-none"
+        placeholder="Search posts..."
+        onChange={handleSearchChange}
+      />
+      <Button
+        as="button"
+        variant="unstyled"
+        ariaLabel="Search button"
+        className="absolute right-0 top-0 h-full px-3 bg-white border-r rounded-global text-primary flex items-center">
+        <svg
+          className="w-6 h-6"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg">
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+          />
+        </svg>
+      </Button>
+    </div>
+  );
+}
+
+function CategoryTab({
+  categories,
+  activeTab,
+  setActiveTab,
+}: {
+  categories?: string[];
+  activeTab: string;
+  setActiveTab: (category: string) => void;
+}) {
+  return (
+    <Card className="w-full px-3 mb-8 bg-white lg:mb-0 lg:w-1/4" borderRadius="md">
+      {categories && (
+        <React.Fragment>
+          <Heading
+            type="h3"
+            muted
+            weight={"bold"}
+            className="mb-4 text-base uppercase lg:text-base">
+            Topics
+          </Heading>
+          <ul>
+            {categories?.length > 1 && (
+              <CategoryItem activeTab={activeTab} setActiveTab={setActiveTab} category={"All"} />
+            )}
+            {categories?.map((category, index) => (
+              <CategoryItem
+                key={index}
+                activeTab={activeTab}
+                setActiveTab={setActiveTab}
+                category={category}
+              />
+            ))}
+          </ul>
+        </React.Fragment>
+      )}
+    </Card>
+  );
+}
+
+function CategoryItem({
+  key,
+  activeTab,
+  setActiveTab,
+  category,
+}: {
+  key?: number;
+  activeTab: string;
+  setActiveTab: (category: string) => void;
+  category: string;
+}) {
+  return (
+    <li key={key}>
+      <Button
+        as="button"
+        variant="unstyled"
+        ariaLabel="Show all blog posts"
+        className={`mb-4 block ${
+          !category ? "hidden" : "block"
+        } px-3 py-2 hover:bg-secondary-foreground focus:outline-none w-full text-left rounded ${
+          activeTab === category
+            ? "font-bold text-primary focus:outline-none bg-secondary-foreground"
+            : null
+        }`}
+        onClick={() => setActiveTab(category)}>
+        {category}
+      </Button>
+    </li>
+  );
+}
+
+function PostItems({
+  currentPosts,
+  activeTab,
+  blogsPerPage,
+}: {
+  currentPosts?: BlogPost[];
+  activeTab: string;
+  blogsPerPage: number;
+}) {
+  if (!currentPosts) return null;
+
+  return (
+    <div className="w-full px-3 lg:w-3/4">
+      {activeTab === "All"
+        ? currentPosts?.map((post, index) => <PostItem post={post} key={index} />)
+        : currentPosts
+            ?.slice(0, blogsPerPage)
+            ?.map((post, index) => <PostItem post={post} key={index} />)}
+    </div>
+  );
+}
+
+function PostItem({ post }: { post?: BlogPost }) {
+  if (!post) return null;
+
+  return (
+    <Flex wrap className="mb-8 lg:mb-6 bg-white shadow rounded-lg">
+      <div className="w-full h-full mb-4 lg:mb-0 lg:w-1/4">
+        <Image
+          className="object-cover w-full h-full overflow-hidden rounded"
+          src={`${post?.mainImage}`}
+          sizes="100vw"
+          width={188}
+          height={129}
+          alt={post?.alt ?? `blog-variantD-image-${post?.title}`}
+        />
+      </div>
+      <div className="w-full px-3 py-2 lg:w-3/4">
+        {post?.title && (
+          <Link
+            aria-label={post?.title}
+            className="mb-1 text-2xl font-bold hover:text-secondary font-heading"
+            href={`/${post?.link ?? "page-not-added"}`}>
+            {post?.title.length > 25 ? post?.title?.substring(0, 25) + "..." : post?.title}
+          </Link>
+        )}
+        <Flex wrap align="center" gap={1} className="mb-2 text-sm">
+          {post?.authors
+            ? post?.authors?.map((author, index, { length }) => (
+                <Flex key={index}>
+                  <Text className="text-primary">{author?.name}</Text>
+                  {index + 1 !== length ? <span>&nbsp;,&nbsp;</span> : null}
+                </Flex>
+              ))
+            : null}
+          {post?.publishedAt && post?.authors ? (
+            <span className="mx-2 text-gray-500">•</span>
+          ) : null}
+          {post?.publishedAt ? (
+            <Text muted>{format(new Date(post?.publishedAt), " dd MMM, yyyy")}</Text>
+          ) : null}
+        </Flex>
+        {post?.excerpt ? (
+          <Text muted>
+            {post?.excerpt.length > 60 ? post?.excerpt.substring(0, 60) + "..." : post?.excerpt}
+          </Text>
+        ) : null}
+      </div>
+    </Flex>
+  );
+}
+
+interface PaginationProps {
+  blogsPerPage: number;
+  totalBlogs: number;
+  paginate: (pageNumber: number) => void;
+  currentPage: number;
+}
+
+function Pagination({ blogsPerPage, totalBlogs, paginate, currentPage }: PaginationProps) {
+  if (!blogsPerPage) return null;
+  const pageNumber = [];
+
+  for (let i = 1; i <= Math.ceil(totalBlogs / blogsPerPage); i++) {
+    pageNumber.push(i);
+  }
+
+  return (
+    <nav className="mt-4" aria-label="Pagination">
+      <ul className="flex space-x-2 justify-end mr-5">
+        {pageNumber.map(number => (
+          <Button
+            variant="unstyled"
+            as="button"
+            ariaLabel={`Page ${number}`}
+            key={number}
+            className={`${
+              currentPage === number
+                ? "bg-secondary-foreground text-gray-500"
+                : "bg-white hover:bg-secondary-foreground hover:text-gray-500"
+            } text-primary font-medium py-2 px-4 border border-primary rounded-global focus:outline-none`}
+            onClick={() => paginate(number)}>
+            {number}
+          </Button>
+        ))}
+      </ul>
+    </nav>
+  );
+}
+
+export { Blog_D };

package/src/hooks/useMediaQuery.ts

@@ -0,0 +1,27 @@
+import React from "react";
+
+export const useMediaQuery = (width: string) => {
+  const [targetReached, setTargetReached] = React.useState(false);
+
+  const updateTarget = React.useCallback((e: any) => {
+    if (e.matches) {
+      setTargetReached(true);
+    } else {
+      setTargetReached(false);
+    }
+  }, []);
+
+  React.useEffect(() => {
+    const media = window.matchMedia(`(max-width: ${width}px)`);
+    media.addEventListener("change", updateTarget);
+
+    // Check on mount (callback is not called until a change occurs)
+    if (media.matches) {
+      setTargetReached(true);
+    }
+
+    return () => media.removeEventListener("change", updateTarget);
+  }, []);
+
+  return targetReached;
+};

package/src/index.ts

@@ -0,0 +1,8 @@
+"use client";
+
+// component exports
+export * from "./blog";
+export * from "./blog_a";
+export * from "./blog_b";
+export * from "./blog_c";
+export * from "./blog_d";