initial commit -- the front-end prototype

The initial code is base on Anirudh's work.

More to see at:

    https://github.com/techwithanirudh/shadcn-blog

Therefore, the code in this commit is under MIT license.

1 files changed, 40 insertions, 0 deletions

diff --git a/src/app/(home)/_components/posts.tsx b/src/app/(home)/_components/posts.tsx
new file mode 100644
index 0000000..8c8dc33
--- /dev/null
+++ b/src/app/(home)/_components/posts.tsx
@@ -0,0 +1,40 @@
+import { Icons } from '@/components/icons/icons';
+import { PostCard } from '@/components/posts/post-card';
+import { Section } from '@/components/section';
+import { buttonVariants } from '@/components/ui/button';
+import type { Page } from '@/lib/source';
+import Link from 'next/link';
+
+export default function Posts({ posts }: { posts: Page[] }) {
+  return (
+    <Section>
+      <div className='grid divide-y divide-dashed divide-border/70 text-left dark:divide-border'>
+        {posts.map((post) => {
+          const date = new Date(post.data.date).toDateString();
+          return (
+            <PostCard
+              title={post.data.title}
+              description={post.data.description ?? ''}
+              image={post.data.image}
+              url={post.url}
+              date={date}
+              key={post.url}
+              author={post.data.author}
+              tags={post.data.tags}
+            />
+          );
+        })}
+        <Link
+          href='/posts'
+          className={buttonVariants({
+            variant: 'default',
+            className: 'group rounded-none py-4 sm:py-8',
+          })}
+        >
+          View More
+          <Icons.arrowUpRight className='group-hover:-rotate-12 ml-2 size-5 transition-transform' />
+        </Link>
+      </div>
+    </Section>
+  );
+}