markdown features

components/Navbar.tsx

@@ -13,7 +13,7 @@ export const Navbar = () => {
   const [showMenu, setShowMenu] = useState(false);
 
   return (
-    <nav className="py-4 xl:px-10 px-4 flex flex-row justify-between">
+    <nav className="py-4 xl:px-10 px-4 flex flex-row justify-between sticky top-0 bg-gradient-dark z-50 border-b border-gradient-light">
       <Link
         href="/"
         id="logo"

components/PostHeader.tsx

@@ -0,0 +1,47 @@
+import Link from "next/link";
+import { FrontMatter } from "../types/types";
+
+export interface BasicArticleProps extends FrontMatter {
+  title: string;
+  description: string;
+  date: string;
+  author: string;
+  authorLink: string;
+  thumbnail: string;
+}
+export const PostHeader = ({
+  frontMatter,
+  estTime,
+}: {
+  frontMatter: FrontMatter;
+  estTime: number;
+}) => {
+  const { title, author, date, description, authorLink } =
+    frontMatter as BasicArticleProps;
+
+  return (
+    <div>
+      <div className="lg:text-5xl text-3xl font-bold mt-2">{title}</div>
+      <div className="mt-2 text-gray-400">{description}</div>
+      <div className="mt-2 mb-10 flex lg:flex-row flex-col gap-2 xl:items-center">
+        {author && (
+          <div className="font-medium ">
+            By{" "}
+            {authorLink && (
+              <Link href={authorLink} className="text-action">
+                @{author}
+              </Link>
+            )}
+            {!authorLink && <span className="text-action">@{author}</span>}
+          </div>
+        )}
+        <div className="text-sm font-medium text-gray-500 lg:before:content-['•'] lg:after:content-['•'] lg:before:pr-2 lg:after:pl-2">
+          {date}
+        </div>
+        <div className="text-sm font-medium text-gray-500">
+          {estTime} min read
+        </div>
+      </div>
+    </div>
+  );
+};