Add button to share generated meme on twitter

src/app/memes/[id]/page.tsx

@@ -4,18 +4,9 @@ interface Props {
   params: { id: string };
 }
 
-interface Meme {
-  title: string;
-  imageUrl: string;
-  description: string;
-}
-
-function getMeme(baseUrl: string, id: string): Meme {
-  return {
-    title: 'Generated meme',
-    imageUrl: `${baseUrl}/api/images/${id}`,
-    description: 'A funny meme',
-  };
+function getMeme(id: string): string {
+  const pinataImageUrl = `https://${process.env.PINATA_GATEWAY}/ipfs/${id}`
+  return pinataImageUrl;
 }
 
 export async function generateMetadata(
@@ -23,37 +14,34 @@ export async function generateMetadata(
   parent: ResolvingMetadata
 ): Promise<Metadata> {
   const baseUrl = process.env.SITE_URL!;
-  const meme = getMeme(baseUrl, params.id);
+  const meme = getMeme(params.id);
 
   return {
-    title: meme.title,
-    description: meme.description,
+    title: '',
+    description: '',
     metadataBase: new URL(baseUrl),
     openGraph: {
       type: 'website',
       url: `${baseUrl}/memes/${params.id}`,
       siteName: "Mark's meme market",
-      images: [{ url: meme.imageUrl }],
+      images: [{ url: meme }],
     },
   };
 }
 
 export default function MemePage({ params }: Props) {
-  const baseUrl = process.env.SITE_URL!;
-  const meme = getMeme(baseUrl, params.id);
+  const meme = getMeme(params.id);
 
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-24">
       <div className="relative flex flex-col items-center">
-        <h1 className="text-4xl font-bold mb-8">{meme.title}</h1>
         <div className="relative w-full max-w-2xl aspect-square">
           <img
-            src={meme.imageUrl}
-            alt={meme.title}
+            src={meme}
+            alt='Generated image'
             className="object-contain rounded-lg w-full h-full"
           />
         </div>
-        <p className="mt-4 text-lg text-gray-600">{meme.description}</p>
       </div>
     </main>
   );

src/components/AIServiceCard.tsx

@@ -86,6 +86,14 @@ const AIServiceCard: React.FC<AIServiceCardProps> = ({
     }
   }
 
+  const generateTwitterShareUrl = (imageUrl: string): string => {
+    const baseUrl = window.location.href;
+    const ipfsImageUrl = imageUrl.split("/ipfs/")[1];
+    const memeUrl = `${baseUrl}/memes/${ipfsImageUrl}`;
+
+    return `https://twitter.com/intent/tweet?text=Check%20out%20this%20generated%20image!&url=${encodeURIComponent(memeUrl)}`;
+  };
+
   return (
     <div className="w-full bg-gray-800/50 backdrop-blur-lg rounded-2xl shadow-xl border border-gray-700/50 mb-8">
       <div className="p-6">
@@ -136,6 +144,16 @@ const AIServiceCard: React.FC<AIServiceCardProps> = ({
               alt="Generated content"
               className="w-full h-auto rounded-xl shadow-2xl"
             />
+            <div className="mt-4 text-center">
+              <a
+                href={generateTwitterShareUrl(generationState.imageUrl)}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-block w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-4 px-6 rounded-xl transition-all duration-200 shadow-lg hover:shadow-blue-500/25"
+              >
+                Share on Twitter
+              </a>
+            </div>
           </div>
         )}
       </div>