From e46b488339276e9e4117f26a75bdeb558eee2b65 Mon Sep 17 00:00:00 2001
From: 0x74h51N <mr.tahsin@windowslive.com>
Date: Wed, 18 Sep 2024 18:40:43 +0300
Subject: [PATCH] res fix

---
 app/[lang]/blog/[uid]/page.tsx                 |  8 ++++++--
 app/[lang]/blog/components/RichText.tsx        |  2 +-
 app/[lang]/blog/components/ui/ShareButtons.tsx | 13 ++++++++++---
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/app/[lang]/blog/[uid]/page.tsx b/app/[lang]/blog/[uid]/page.tsx
index c693a70..4bcda67 100644
--- a/app/[lang]/blog/[uid]/page.tsx
+++ b/app/[lang]/blog/[uid]/page.tsx
@@ -14,6 +14,7 @@ import { createTranslation } from '@/i18n/server';
 import { Locales } from '@/i18n/settings';
 import { langMap } from '@/utils/langMap';
 import dynamic from 'next/dynamic';
+import ShareButtons from '../components/ui/ShareButtons';
 
 const PostCard = dynamic(
   () => import('../components/PostCard').then((mod) => mod.PostCard),
@@ -103,7 +104,7 @@ export default async function Page({ params }: { params: Params }) {
     <div className="flex flex-col items-center bg-base-100 w-full h-full lg:py-32 md:py-28 py-20">
       <div
         id={'article-wrapper'}
-        className="flex flex-col gap-10 w-full xl:max-w-[1450px] max-w-[1150px] lg:pl-[265px] sm:px-5 px-3 transition-all ease-in-out duration-500"
+        className="flex flex-col gap-10 w-full max-w-[1150px] lg:pl-[265px] sm:px-5 px-3 transition-all ease-in-out duration-500"
       >
         <section className="flex flex-col mb-10 relative">
           <div className="flex flex-col items-center gap-3 w-full mb-6">
@@ -128,9 +129,12 @@ export default async function Page({ params }: { params: Params }) {
           <Toc slices={slices} title={title} />
           <section
             id={'article-content'}
-            className="flex flex-col md:pt-8 pt-4 sm:border rounded-b-lg border-t-base-100 border-base-300 pb-16 xl:px-10 lg:px-6 md:px-2 gap-4"
+            className="flex flex-col md:pt-8 pt-4 sm:border rounded-b-lg border-t-base-100 border-base-300 pb-16 xl:px-10 lg:px-6 md:px-2 gap-4 relative"
           >
             <SliceZone slices={slices} components={components} />
+            <div className="absolute right-3 -bottom-8 bg-base-100 sm:border border-base-300 p-4 ">
+              <ShareButtons textHidden={false} />
+            </div>
           </section>
           <div className="min-h-14"></div>
         </section>
diff --git a/app/[lang]/blog/components/RichText.tsx b/app/[lang]/blog/components/RichText.tsx
index 0f696ac..fcad2c8 100644
--- a/app/[lang]/blog/components/RichText.tsx
+++ b/app/[lang]/blog/components/RichText.tsx
@@ -15,7 +15,7 @@ export const richTextComponents: JSXMapSerializer = {
   heading1: ({ children, node }) => (
     <Heading
       as="h2"
-      className="!mb-10 !mt-24 w-full h1-blog text-h1"
+      className="md:!mb-10 md:!mt-24 !mt-16 !mb-5 w-full h1-blog text-h1"
       id={slugifyHeading(node)}
     >
       {children}
diff --git a/app/[lang]/blog/components/ui/ShareButtons.tsx b/app/[lang]/blog/components/ui/ShareButtons.tsx
index 5742416..758bd86 100644
--- a/app/[lang]/blog/components/ui/ShareButtons.tsx
+++ b/app/[lang]/blog/components/ui/ShareButtons.tsx
@@ -1,11 +1,13 @@
+'use client';
 import IconButton from '@/components/Buttons/IconButton';
+import clsx from 'clsx';
 import { usePathname } from 'next/navigation';
 import { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { MdCheck } from 'react-icons/md';
 import { RiShare2Fill } from 'react-icons/ri';
 
-const ShareButtons = () => {
+const ShareButtons = ({ textHidden = true }) => {
   const [shareUrl, setShareUrl] = useState('');
   const pathname = usePathname();
   const { t } = useTranslation('blog');
@@ -29,7 +31,12 @@ const ShareButtons = () => {
 
   return (
     <div className="flex justify-between items-center">
-      <span className="max-md:hidden cool-text font-bold text-lg antialiased">
+      <span
+        className={clsx(
+          'cool-text font-bold text-lg antialiased',
+          textHidden && 'max-md:hidden',
+        )}
+      >
         {t('blog-post.share.share')}
       </span>
       <div className="flex items-center justify-center ml-2">
@@ -74,7 +81,7 @@ const ShareButtons = () => {
           />
         </div>
         <button
-          className="btn btn-sm btn-ghost px-1 "
+          className="btn btn-sm btn-ghost px-1"
           onClick={handleCopy}
           aria-label={t('blog-post.share.facebook')}
         >