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, 112 insertions, 0 deletions

diff --git a/src/components/sections/footer.tsx b/src/components/sections/footer.tsx
new file mode 100644
index 0000000..8d0d876
--- /dev/null
+++ b/src/components/sections/footer.tsx
@@ -0,0 +1,112 @@
+import { baseOptions, linkItems, postsPerPage } from '@/app/layout.config';
+import { InlineLink } from '@/components/inline-link';
+import { getSortedByDatePosts, getTags } from '@/lib/source';
+import { cn } from '@/lib/utils';
+import { getLinks } from 'fumadocs-ui/layouts/shared';
+import { ActiveLink } from '../active-link';
+
+export function Footer() {
+  const links = getLinks(linkItems, baseOptions.githubUrl);
+  const navItems = links.filter((item) =>
+    ['nav', 'all'].includes(item.on ?? 'all'),
+  );
+
+  const posts = getSortedByDatePosts();
+  const tags = getTags();
+
+  return (
+    <footer className={cn('flex flex-col gap-4')}>
+      <div
+        className={cn(
+          'grid gap-8 text-muted-foreground text-sm sm:grid-cols-4',
+          'container mx-auto sm:gap-16 sm:px-8 sm:py-16',
+          'border-border/70 border-b border-dashed dark:border-border',
+        )}
+      >
+        <div className='flex flex-col gap-6'>
+          <p className='font-medium text-foreground'>Pages</p>
+
+          <ul className='flex flex-col gap-3'>
+            <li className='flex items-center gap-2'>
+              <ActiveLink href={'/'}>Home</ActiveLink>
+            </li>
+            {navItems
+              .filter(
+                (item) =>
+                  item.type !== 'menu' &&
+                  item.type !== 'custom' &&
+                  item.type !== 'icon',
+              )
+              .map((item, i) => (
+                <li key={item.url}>
+                  <ActiveLink key={i.toString()} href={item.url}>
+                    {item.text}
+                  </ActiveLink>
+                </li>
+              ))}
+          </ul>
+        </div>
+
+        <div className='flex flex-col gap-6'>
+          <p className='font-medium text-foreground'>Posts</p>
+
+          <ul className='flex flex-col gap-3'>
+            {posts.slice(0, postsPerPage).map((post, i) => (
+              <li key={post.url}>
+                <ActiveLink key={i.toString()} href={post.url}>
+                  {post.data.title}
+                </ActiveLink>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className='flex flex-col gap-6'>
+          <p className='font-medium text-foreground'>Tags</p>
+
+          <ul className='flex flex-col gap-3'>
+            {tags.slice(0, postsPerPage).map((name, i) => (
+              <li key={`/tags/${name}`}>
+                <ActiveLink key={i.toString()} href={`/tags/${name}`}>
+                  <span className='capitalize'>{name}</span>
+                </ActiveLink>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className='flex flex-col gap-6'>
+          <p className='font-medium text-foreground'>Socials</p>
+
+          <ul className='flex flex-col gap-3'>
+            {navItems
+              .filter((item) => item.type === 'icon')
+              .map((item, i) => (
+                <li key={item.url}>
+                  <InlineLink
+                    key={i.toString()}
+                    href={item.url}
+                    className='inline-flex items-center gap-1.5 text-muted-foreground no-underline [&_svg]:size-4'
+                  >
+                    {item.icon}
+                    {item.text}
+                  </InlineLink>
+                </li>
+              ))}
+          </ul>
+        </div>
+      </div>
+      {/* <Design /> */}
+    </footer>
+  );
+}
+
+function Design() {
+  return (
+    <div className='footer'>
+      <span className='footer-text font-mono'>john•doe</span>
+      <div className='footer-grid' />
+      <div className='footer-gradient' />
+    </div>
+  );
+}