add post info

haaarshsingh · Sep 19, 2024 · 30d5a99 · 30d5a99
1 parent 04c9436
commit 30d5a99
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 9 deletions.
diff --git a/app/[slug]/components/Copy.tsx b/app/[slug]/components/Copy.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { RiCheckFill, RiLinksFill } from 'react-icons/ri'
 import { motion, AnimatePresence } from 'framer-motion'
 import { FC, useEffect, useState } from 'react'
@@ -33,7 +35,7 @@ export const Copy: FC<{ slug: string }> = ({ slug }) => {
         )}
       </AnimatePresence>
       <button
-        className='flex h-[34px] w-[34px] animate-intro cursor-copy items-center justify-center rounded-full bg-neutral-200 text-sm opacity-0 transition-colors [animation-delay:100ms] hover:bg-neutral-300/75 active:bg-neutral-300 dark:bg-neutral-800 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:active:bg-neutral-700/50'
+        className='flex h-[34px] w-[34px] animate-intro cursor-copy items-center justify-center rounded-full text-sm transition-colors [animation-delay:100ms] hover:bg-neutral-300/75 active:bg-neutral-300 bg-neutral-800 text-neutral-400 hover:bg-neutral-700 active:bg-neutral-700/50'
         onPointerEnter={() => setHover(true)}
         onPointerLeave={() => setHover(false)}
         onClick={onClick}

diff --git a/app/[slug]/page.tsx b/app/[slug]/page.tsx
@@ -1,12 +1,11 @@
-'use client'
-
 import localFont from 'next/font/local'
 import { FC } from 'react'
 import MDX from './MDX'
 import Link from 'next/link'
 import posts from './posts'
 import { notFound } from 'next/navigation'
 import { LuCornerUpLeft } from 'react-icons/lu'
+import clsx from 'clsx'
 import './index.css'
 import { Copy } from './components/Copy'
 
@@ -28,7 +27,7 @@ export default (({ params }) => {
   if (!post) notFound()
 
   return (
-    <section className={fira.variable}>
+    <div className={clsx(fira.variable, 'mt-16')}>
       <script
         type='application/ld+json'
         suppressHydrationWarning
@@ -51,22 +50,24 @@ export default (({ params }) => {
       <header>
         <Link
           href='/writing'
-          className='exclude flex h-8 items-center text-neutral-500'
+          className='exclude absolute -mt-1 flex h-8 items-center text-neutral-500 -ml-28'
         >
           <LuCornerUpLeft className='h-4 w-4' />
-          <span className='ml-1.5 text-sm'>UI</span>
+          <span className='ml-1.5'>UI</span>
         </Link>
-        <div className='flex justify-between'>
+        <div className='flex justify-between items-center'>
           <div>
             <h1>{post.metadata.title}</h1>
-            <p>{format(post.metadata.publishedAt)}</p>
+            <p className='text-neutral-500'>
+              {format(post.metadata.publishedAt)}
+            </p>
           </div>
           <Copy slug={params.slug} />
         </div>
       </header>
       <article className='prose animate-children'>
         <MDX source={post.content} />
       </article>
-    </section>
+    </div>
   )
 }) as FC<{ params: { slug: string } }>