added a share button, added card name to error (#79)

* added a share button, added card name to error

* new colors for share button

src/api-helpers/vercel-generator.tsx

@@ -43,10 +43,10 @@ export const createImageUsingVercel = async (
       imageArrayBuffer = await generatedImage.arrayBuffer();
     } catch (arrayBufferError) {
       console.error(
-        'Error converting image to array buffer:',
+        `Error converting image to array buffer for ${cardType}:`,
         arrayBufferError
       );
-      throw new Error('Image array buffer conversion failed');
+      throw new Error(`Image buffer creation failed for ${cardType}`);
     }
 
     const imageBuffer = arrayBufferToBuffer(imageArrayBuffer);
@@ -57,7 +57,7 @@ export const createImageUsingVercel = async (
       image: imageCopy
     };
   } catch (error) {
-    console.error('Error in createImageUsingVercel:', error);
-    throw new Error('Image creation failed');
+    console.error(`Error in createImageUsingVercel for ${cardType}:`, error);
+    throw new Error(`Image creation failed for ${cardType}`);
   }
 };

src/components/ShareButton.tsx

@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+import { GiShare } from 'react-icons/gi';
+import {} from 'react-icons';
+import { FaTwitter, FaDownload } from 'react-icons/fa';
+
+type ShareButtonProps = {
+  imageUrl?: string;
+  callBack?: (e?: any) => void;
+  className?: string;
+};
+
+export const ShareButton: React.FC<ShareButtonProps> = ({
+  imageUrl = 'https://picsum.photos/200',
+  callBack,
+  className
+}) => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [tweetText, setTweetText] = useState('');
+
+  const shareToTwitter = () => {
+    const encodedText = encodeURIComponent(
+      tweetText || 'Check out my GitHub journey of 2023!'
+    );
+    const encodedImageUrl = encodeURIComponent(imageUrl);
+
+    const twitterShareUrl = `https://twitter.com/intent/tweet?text=${encodedText}&url=${encodedImageUrl}`;
+
+    window.open(twitterShareUrl, '_blank');
+    closeMenu();
+  };
+
+  const toggleMenu = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
+
+  const closeMenu = () => {
+    setIsMenuOpen(false);
+    setTweetText('');
+  };
+
+  return (
+    <div className={'relative inline-block ' + className}>
+      <GiShare
+        size={28}
+        fill="rgb(20, 24, 59)"
+        className="cursor-pointer"
+        onClick={toggleMenu}
+      />
+
+      {isMenuOpen && (
+        <div className="absolute md:w-96 w-72 md:right-12 right-4 top-12 bg-[#11142e] rounded-md shadow-lg p-4">
+          <textarea
+            placeholder="Check out my GitHub journey of 2023!"
+            value={tweetText}
+            onChange={(e) => setTweetText(e.target.value)}
+            className="w-full border text-white outline-none rounded-md p-2 mb-2 bg-[#1c2045] border-[#2d3479]"
+          />
+
+          <div className="w-full flex justify-between">
+            <div className="flex gap-2">
+              <button
+                type="button"
+                onClick={shareToTwitter}
+                className="bg-[#2d3479] text-[#fff] px-2 py-1 rounded hover:bg-[#424db1] focus:outline-none focus:ring focus:border-blue-300"
+              >
+                <FaTwitter size={20} />
+              </button>
+              <button
+                type="button"
+                onClick={callBack}
+                className="bg-[#2d3479] text-white px-2 py-1 rounded hover:bg-[#424db1] focus:outline-none focus:ring focus:border-blue-300"
+              >
+                <FaDownload size={18} />
+              </button>
+            </div>
+            <button
+              type="button"
+              onClick={toggleMenu}
+              className="bg-[#a23333] text-white px-2 py-1 rounded hover:bg-[#cd4a4a] focus:outline-none focus:ring focus:border-red-300"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

src/components/SwiperCarousel.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useRef } from 'react';
 import { EffectCoverflow, Pagination, Navigation } from 'swiper/modules';
 import { Swiper, SwiperSlide, SwiperRef } from 'swiper/react';
-import { GiShare } from 'react-icons/gi';
 import {
   IoIosArrowDropleftCircle,
   IoIosArrowDroprightCircle
@@ -11,6 +10,7 @@ import 'swiper/css';
 import 'swiper/css/effect-coverflow';
 import 'swiper/css/pagination';
 import 'swiper/css/navigation';
+import { ShareButton } from './ShareButton';
 
 interface SwiperCarouselProps {
   images: string[];
@@ -78,11 +78,9 @@ const SwiperCarousel: React.FC<SwiperCarouselProps> = ({
       >
         {images.map((image, index) => (
           <SwiperSlide key={index} className="swiper-slide-img">
-            <GiShare
-              size={28}
-              fill="rgb(20, 24, 59)"
+            <ShareButton
               className="share-active-image cursor-pointer"
-              onClick={() => singleImageSharingCallback({ images: image })}
+              callBack={() => singleImageSharingCallback({ images: image })}
             />
             {index !== 0 && (
               <IoIosArrowDropleftCircle

src/components/templates/CodeReviews.tsx

@@ -18,7 +18,7 @@ export const CodeReviews: FC<CodeReviewsData & Username> = ({
   return (
     <RootCard bgColor="yellow" username={username} decoType="fireworks">
       <div tw="flex absolute w-[300px] top-[-40px] left-[-20px] text-md font-semibold">
-        <img width={160} src={drakeNope} alt="" />
+        <img width={160} height={290} src={drakeNope} alt="" />
         <div tw="flex relative top-[90px] right-[45px] flex-col">
           <p tw="m-0">Having a lot of</p>
           <p tw="m-0 mt-2">Insta followers</p>
@@ -46,6 +46,7 @@ export const CodeReviews: FC<CodeReviewsData & Username> = ({
         <img
           tw="absolute bottom-0 right-0"
           width={250}
+          height={210}
           src={drakeYeah}
           alt=""
         />

src/pages/previews.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { CARD_HEIGHT, CARD_WIDTH } from '../constants/general';
 import Image from 'next/image';
+import { ShareButton } from '@/components/ShareButton';
 
 const Previews = () => {
   const links = [
@@ -46,6 +47,7 @@ const Previews = () => {
             </div>
           );
         })}
+        <ShareButton />
       </div>
     </div>
   );