add functionality to fetch and display website title in Metadata component

Author: sanjaypinna

app/[locale]/(user)/datasets/[datasetIdentifier]/components/Metadata/index.tsx

@@ -1,8 +1,9 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { Button, Divider, Icon, Text } from 'opub-ui';
 
+import { getWebsiteTitle } from '@/lib/utils';
 import { Icons } from '@/components/icons';
 
 interface MetadataProps {
@@ -47,6 +48,27 @@ const MetadataComponent: React.FC<MetadataProps> = ({ data, setOpen }) => {
     return option ? option.label : value; // fallback to value if no match
   };
 
+  const [sourceTitle, setSourceTitle] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchTitle = async () => {
+      try {
+        const urlItem = data.metadata.find(
+          (item: any) => item.metadataItem?.dataType === 'URL'
+        );
+
+        if (urlItem && urlItem.value) {
+          const title = await getWebsiteTitle(urlItem.value);
+          setSourceTitle(title);
+        }
+      } catch (error) {
+        console.error('Error fetching website title:', error);
+      }
+    };
+
+    fetchTitle();
+  }, [data.metadata]);
+
   return (
     <div className="flex flex-col gap-10">
       <div className=" flex items-center justify-between">
@@ -128,7 +150,7 @@ const MetadataComponent: React.FC<MetadataProps> = ({ data, setOpen }) => {
             ) : (
               <Link href={item.value} target="_blank">
                 <Text className="underline" color="highlight">
-                  Source
+                  {sourceTitle?.trim() ? sourceTitle : 'Source'}
                 </Text>
               </Link>
             )}