merge

components/BlogPosts.tsx

@@ -1,18 +1,24 @@
 import React from 'react'
 import {EyeIcon} from '@heroicons/react/outline'
+import { Post } from '../typings'
+import Link from 'next/link'
 
-function BlogPosts() {
+interface Props {
+  post: Post
+}
+
+function BlogPosts({post}: Props) {
   return (
     <>
-        <div className=' pt-5 pl-5 pr-5 pb-5 cursor-pointer'>
+        <div className=' pt-5 pl-5 pr-5 pb-5'>
       {/* Blog Content */}
       <div className=''>
-        <p className='text-lg md:text-xl font-bold w-full text-gray-900 dark:text-gray-100 tracking-tight '>A TailwindCSS made blog post</p>
-        <p className=' text-xs font-normal text-skin-base leading-5 pt-1 pb-1'><span className=''>Dec 28, 2022</span> .Published in Medium, DevTo and HashNode</p> 
+        <Link key={post._id} href={`post/${post.slug.current}`}>
+            <p className='text-lg md:text-xl font-bold w-full text-gray-900 dark:text-gray-100 tracking-tight cursor-pointer hover:underline '>{post.title}</p>        
+        </Link>
+        <p className=' text-xs font-normal text-skin-base leading-5 pt-1 pb-1'><span className=''>{new Date(post._createdAt).toLocaleString()}</span> .Published in Medium, DevTo and HashNode</p> 
         <p className="mt-3 mb-4 text-md font-normal text-skin-base ">
-          Metus potenti velit sollicitudin porttitor magnis elit lacinia tempor varius, ut cras orci vitae
-          parturient id nisi vulputate consectetur, primis venenatis cursus tristique malesuada viverra
-          congue risus.
+          {post.description}
         </p>
 
         {/* Tags */}
@@ -21,7 +27,8 @@ function BlogPosts() {
             <span
               className="inline-flex items-center leading-none px-2.5 py-1.5 text-sm font-medium text-skin-inverted rounded-full border border-skin-input"
               >
-              Programming
+                {post.categories?.title}
+
             </span>
             <p className=' text-sm font-normal text-skin-base leading-5'>2 mins read</p>  
           </div>

components/CodeBlock.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import SyntaxHighlighter from 'react-syntax-highlighter'
+import d from "react-syntax-highlighter/dist/cjs/styles/prism/nord"
+import vs2015  from "react-syntax-highlighter/dist/cjs/styles/hljs/night-owl";
+
+interface Props {
+  code: string,
+  language: string
+}
+
+
+export default function CodeBlock({ code, language }: Props) {
+
+  return (
+    <SyntaxHighlighter
+      language={language}
+      style={vs2015}
+      showLineNumbers={language !== 'sh'}
+      customStyle={{
+        marginTop: 0,
+        borderTopLeftRadius: 0,
+        borderTopRightRadius: 0,
+      }}
+      wrapLines
+      wrapLongLines
+    >
+      {code}
+    </SyntaxHighlighter>
+  )
+}

components/FeaturedPosts.tsx

@@ -1,23 +1,28 @@
 import React from 'react'
 import {EyeIcon} from '@heroicons/react/outline'
-function FeaturedPosts() {
+import { Post } from '../typings'
+interface Props {
+  post: Post
+}
+
+function FeaturedPosts({post}: Props) {
+
   return (
-          <div className='border bg-surface rounded border-gray-200 p-3 mb-3 overflow-hidden hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer'>
+          <div className='border bg-surface rounded border-gray-200 p-3 mb-3 overflow-hidden'>
             {/* Blog Content */}
             <div className=''>
-              <p className='text-lg md:text-xl font-bold w-full text-gray-900 dark:text-gray-100 tracking-tight '>A TailwindCSS made blog post</p>
+              <p className='text-lg md:text-xl font-bold w-full text-gray-900 dark:text-gray-100 tracking-tight cursor-pointer hover:underline'>{post.title}</p>
+              <p className=' text-xs font-normal text-skin-base leading-5 pt-1 pb-1'><span className=''>{new Date(post._createdAt).toLocaleString()}</span> .Published in Medium, DevTo and HashNode</p> 
               <p className="mt-3 mb-4 text-md font-normal text-skin-base ">
-                Metus potenti velit sollicitudin porttitor magnis elit lacinia tempor varius, ut cras orci vitae
-                parturient id nisi vulputate consectetur, primis venenatis cursus tristique malesuada viverra
-                congue risus.
+
+                {post.description}
               </p>
-              {/* Tags */}
               <div className='mt-2 flex items-center justify-between'>
                 <div className='flex items-center space-x-2'>
                   <span
                     className="inline-flex items-center leading-none px-2.5 py-1.5 text-sm font-medium text-skin-inverted rounded-full border border-skin-input"
                     >
-                    Programming
+                    {post.categories?.title}
                   </span>
                   <p className=' text-sm font-normal text-skin-base leading-5'>2 mins read</p>  
                 </div>

components/Profile.tsx

@@ -67,11 +67,7 @@ function Profile() {
                   </LinkPreview>
                   <LinkPreview href='https://medium.com/@sandeepkumary'>
                     <button className=" bg-slate-200 p-2 font-semibold  inline-flex items-center space-x-2 rounded-full">
-                        <svg className="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg"
-                          aria-label="dev.to" role="img"
-                          viewBox="0 0 512 512"><rect
-                          width="512" height="512"
-                          rx="15%"/><path fill="#ffffff" d="M140.47 203.94h-17.44v104.47h17.45c10.155-.545 17.358-8.669 17.47-17.41v-69.65c-.696-10.364-7.796-17.272-17.48-17.41zm45.73 87.25c0 18.81-11.61 47.31-48.36 47.25h-46.4V172.98h47.38c35.44 0 47.36 28.46 47.37 47.28zm100.68-88.66H233.6v38.42h32.57v29.57H233.6v38.41h53.29v29.57h-62.18c-11.16.29-20.44-8.53-20.72-19.69V193.7c-.27-11.15 8.56-20.41 19.71-20.69h63.19zm103.64 115.29c-13.2 30.75-36.85 24.63-47.44 0l-38.53-144.8h32.57l29.71 113.72 29.57-113.72h32.58z"/></svg>
+                      <svg className="w-6 h-6 fill-current dark:bg-black" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.826 10.083a.784.784 0 0 0-.468-.175h-.701v4.198h.701a.786.786 0 0 0 .469-.175c.155-.117.233-.292.233-.525v-2.798c.001-.233-.079-.408-.234-.525zM19.236 3H4.764C3.791 3 3.002 3.787 3 4.76v14.48c.002.973.791 1.76 1.764 1.76h14.473c.973 0 1.762-.787 1.764-1.76V4.76A1.765 1.765 0 0 0 19.236 3zM9.195 13.414c0 .755-.466 1.901-1.942 1.898H5.389V8.665h1.903c1.424 0 1.902 1.144 1.903 1.899v2.85zm4.045-3.562H11.1v1.544h1.309v1.188H11.1v1.543h2.142v1.188h-2.498a.813.813 0 0 1-.833-.792V9.497a.813.813 0 0 1 .792-.832h2.539l-.002 1.187zm4.165 4.632c-.531 1.235-1.481.99-1.906 0l-1.548-5.818h1.309l1.193 4.569 1.188-4.569h1.31l-1.546 5.818z"/></svg>
                     </button>
                   </LinkPreview>
 

components/VisitorLogs.tsx

@@ -47,6 +47,7 @@ function VisitorLogs() {
             aria-label="Email for newsletter"
             placeholder="Enter your comment"
             type="email"
+            value=""
             autoComplete="email"
             required
             className="px-4 py-2 mt-1 mb-5 outline-none block w-full border border-green-600 rounded-md pr-32"