Have blogs load more (#58)

Dev

src/app/(pages)/blog/error.tsx

@@ -0,0 +1,18 @@
+'use client';
+import { useEffect } from 'react';
+
+export default function Error({
+  error,
+}: {
+  error: Error & { digest?: string };
+}) {
+  useEffect(() => {
+    // TODO: handle this better G
+    console.error(error);
+  }, [error]);
+  return (
+    <div className="flex items-center justify-center h-screen">
+      Error | Something happened, try refreshing.
+    </div>
+  );
+}

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

@@ -1,37 +1,19 @@
 import { Suspense } from 'react';
 import LoadingScreen from '@/app/components/reusables/loading-screen';
-import { ChevronDown } from 'lucide-react';
-import BlogPostCard from '@/app/components/blog/blog-card';
+import BlogPosts from './posts';
 import { getBlogPosts } from '@/app/actions/blog';
 
 export default async function BlogPage() {
   const blogPosts = await getBlogPosts();
+
   if (blogPosts) {
     return (
       <Suspense fallback={<LoadingScreen />}>
         <section className="mx-auto container sm:max-w-xl md:max-w-3xl lg:max-w-3xl xl:max-w-3xl">
           <h1 className="font-medium text-2xl mb-8 tracking-tighter hidden">
             Unclassified, raw
           </h1>
-          {blogPosts
-            .sort((b1, b2) => {
-              if (
-                new Date(b1.parsedContent.attributes.firstModDate) >
-                new Date(b2.parsedContent.attributes.firstModDate)
-              ) {
-                return -1;
-              }
-              return 1;
-            })
-            .map((post) => (
-              <BlogPostCard
-                key={post.filenameSlug}
-                blogData={post}
-              ></BlogPostCard>
-            ))}
-          <div className="flex items-center justify-center animate-bounce m-14 cursor-pointer">
-            <ChevronDown className="mt-5" />
-          </div>
+          <BlogPosts blogPosts={blogPosts} />
           <div className="w-auto h-1"></div>
         </section>
       </Suspense>

src/app/(pages)/blog/posts.tsx

@@ -0,0 +1,53 @@
+'use client';
+import type { BlogData } from '@/lib/types/mdx';
+import BlogPostCard from '@/app/components/blog/blog-card';
+import { ChevronDown } from 'lucide-react';
+import { CheckCheck } from 'lucide-react';
+import { useState } from 'react';
+import type { ButtonHTMLAttributes } from 'react';
+
+const NoMoreImTiredBoss: React.FC<
+  ButtonHTMLAttributes<HTMLButtonElement>
+> = () => {
+  return (
+    <button className="cursor-default">
+      <CheckCheck className="mt-5" />
+    </button>
+  );
+};
+
+export default function BlogPosts({ blogPosts }: { blogPosts: BlogData[] }) {
+  let [numVisible, setNumVisible] = useState<number>(2);
+  const loadMore = numVisible !== blogPosts.length;
+
+  return (
+    <>
+      {blogPosts
+        .sort((b1, b2) => {
+          if (
+            new Date(b1.parsedContent.attributes.firstModDate) >
+            new Date(b2.parsedContent.attributes.firstModDate)
+          ) {
+            return -1;
+          }
+          return 1;
+        })
+        .slice(0, numVisible)
+        .map((post) => (
+          <BlogPostCard key={post.filenameSlug} blogData={post}></BlogPostCard>
+        ))}
+      <div className="flex items-center justify-center m-14">
+        {loadMore ? (
+          <button>
+            <ChevronDown
+              onClick={() => setNumVisible(numVisible + 1)}
+              className="mt-5 animate-bounce cursor-pointer"
+            />
+          </button>
+        ) : (
+          <NoMoreImTiredBoss />
+        )}
+      </div>
+    </>
+  );
+}

src/app/(pages)/x/page.tsx

@@ -1,10 +1,47 @@
-import LoadingScreen from '@/app/components/reusables/loading-screen';
-import Nav from '@/app/components/nav/nav';
-export default function Fun() {
+'use client';
+
+import React, { useState } from 'react';
+
+interface Todo {
+  id: number;
+  text: string;
+}
+
+const TodoComponent: React.FC = () => {
+  const [todos, setTodos] = useState<Todo[]>([
+    { id: 1, text: 'Todo 1' },
+    { id: 2, text: 'Todo 2' },
+    { id: 3, text: 'Todo 3' },
+  ]);
+
+  const addTodos = () => {
+    // You can add more todos to the list when the button is clicked
+    const newTodos: Todo[] = [
+      { id: 4, text: 'Todo 4' },
+      { id: 5, text: 'Todo 5' },
+    ];
+
+    setTodos((prevTodos) => [...prevTodos, ...newTodos]);
+  };
+
   return (
-    <>
-      <Nav></Nav>
-      <LoadingScreen></LoadingScreen>
-    </>
+    <div className="todo-container transition-all duration-500 ease-in-out">
+      <h1 className="text-2xl font-bold mb-4">Todos</h1>
+      <ul>
+        {todos.map((todo) => (
+          <li key={todo.id} className="border p-2 mb-2 rounded">
+            {todo.text}
+          </li>
+        ))}
+      </ul>
+      <button
+        onClick={addTodos}
+        className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700"
+      >
+        Add More Todos
+      </button>
+    </div>
   );
-}
+};
+
+export default TodoComponent;

src/app/actions/blog.ts

@@ -1,3 +1,4 @@
+'use server';
 import { pub, nextJS } from '@/lib/env';
 import type { BlogData } from '@/lib/types/mdx';
 import { Maybe } from '@/lib/types/global';

src/app/components/mdx/styled-mdx.tsx

@@ -4,7 +4,7 @@ import { Image, Skeleton } from '@nextui-org/react';
 import { cn } from '@/lib/utils';
 import NextImage from 'next/image';
 import { Divider as _Divider } from '@nextui-org/react';
-import CodeBlock from '@/app/components/reusables/code-block';
+import CodeBlock from '@/app/components/reusables/code/code-block';
 import {
   Heading2,
   Heading3,

src/app/components/nav/nav.tsx

@@ -1,13 +1,13 @@
 import { Button } from '../ui/button';
 import { OutLineButton } from './buttons';
 import Link from 'next/link';
-import clsx from 'clsx';
+import { cn } from '@/lib/utils';
 
 const Nav = () => {
   return (
     <nav className="mx-auto flex h-[5.5rem] w-full max-w-[1344px] items-center px-5 sm:px-10">
       <div
-        className={clsx(
+        className={cn(
           'relative left-0 top-[4.375rem] z-20 h-[calc(100vh-4.375rem)] w-full overflow-y-auto  p-5  sm:px-10 xl:static xl:ml-10 xl:flex xl:h-auto xl:items-center xl:overflow-y-visible xl:bg-transparent xl:p-0 xl:dark:bg-transparent'
         )}
       >

src/app/components/reusables/code-block.tsx → src/app/components/reusables/code/code-block.tsx

@@ -1,6 +1,6 @@
 // react-syntax-highlighter has no types
 // @ts-nocheck
-import clsx from 'clsx';
+import { cn } from '@/lib/utils';
 import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
 import rust from 'react-syntax-highlighter/dist/cjs/languages/prism/rust';
 import python from 'react-syntax-highlighter/dist/cjs/languages/prism/python';
@@ -33,7 +33,7 @@ export default function CodeBlock({
 }: Props) {
   return (
     <div
-      className={clsx(
+      className={cn(
         'mx-2 relative rounded-2xl !bg-black p-4 shadow-lg',
         className
       )}

src/app/components/reusables/copy-code.tsx → src/app/components/reusables/code/copy-code.tsx

@@ -1,7 +1,7 @@
 'use client';
 import { FC } from 'react';
 import { Copy } from 'lucide-react';
-import clsx from 'clsx';
+import { cn } from '@/lib/utils';
 import { useCopyToClipboard } from 'react-use';
 
 interface CopyButtonProps {
@@ -13,7 +13,7 @@ const CopyButton: FC<CopyButtonProps> = ({ code, className }) => {
   const [_, copyToClipboard] = useCopyToClipboard();
   return (
     <button
-      className={clsx(
+      className={cn(
         'rounded-xl border-2 border-[#191919] p-2 px-3 py-2 average-transition  hover:average-translate  hover:border-[#340929]   active:bg-[#340929]',
         className
       )}

src/app/components/reusables/loading-screen.tsx

@@ -2,10 +2,7 @@ import Loader from '@/app/components/reusables/loader';
 
 function LoadingScreen() {
   return (
-    <div
-      className="flex items-center justify-center h-screen"
-      style={{ height: '100vh' }}
-    >
+    <div className="flex items-center justify-center h-screen">
       <Loader></Loader>
     </div>
   );