Merge pull request #553 from Adez017/blogs

Added link to the testimonies card

Author: sanjay-kv

src/components/testimonials/TestimonialCard.tsx

@@ -9,6 +9,7 @@ interface TestimonialCardProps {
   content: string;
   date: string;
   avatar: string;
+  link: string;
 }
 
 const TestimonialCard: React.FC<TestimonialCardProps> = ({
@@ -17,10 +18,22 @@ const TestimonialCard: React.FC<TestimonialCardProps> = ({
   content,
   date,
   avatar,
+  link,
 }) => {
   const { colorMode } = useColorMode();
   const isDark = colorMode === "dark";
 
+  // Function to format the link display
+  const formatLinkDisplay = (url: string) => {
+    try {
+      const urlObj = new URL(url);
+      return urlObj.hostname + urlObj.pathname;
+    } catch {
+      // If URL parsing fails, return the original link
+      return url;
+    }
+  };
+
   return (
     <motion.div
       initial={{ opacity: 0 }}
@@ -53,10 +66,11 @@ const TestimonialCard: React.FC<TestimonialCardProps> = ({
 
       {/* Footer with Hashtags and Date */}
       <div
-        className={`flex items-center justify-between text-sm pt-2 border-t ${
+        className={`flex flex-col gap-2 text-sm pt-2 border-t ${
           isDark ? "border-gray-700" : "border-gray-100"
         }`}
       >
+        {/* Hashtags */}
         <div className="flex gap-2 flex-wrap">
           {content.match(/#\w+/g)?.map((hashtag, index) => (
             <span
@@ -67,10 +81,24 @@ const TestimonialCard: React.FC<TestimonialCardProps> = ({
             </span>
           ))}
         </div>
-        <span className={isDark ? "text-gray-500" : "text-gray-400"}>{date}</span>
+
+        {/* Link and Date Row */}
+        <div className="flex items-center justify-between">
+          <a 
+            href={link} 
+            target="_blank" 
+            rel="noopener noreferrer"
+            className={`hover:underline cursor-pointer ${
+              isDark ? "text-blue-400 hover:text-blue-300" : "text-blue-600 hover:text-blue-700"
+            }`}
+          >
+            {formatLinkDisplay(link)}
+          </a>
+          <span className={isDark ? "text-gray-500" : "text-gray-400"}>{date}</span>
+        </div>
       </div>
     </motion.div>
   );
 };
 
-export default TestimonialCard;
+export default TestimonialCard;

src/components/testimonials/TestimonialCarousel.tsx

@@ -18,21 +18,24 @@ const testimonials = [
     username: "RashiChouhan",
     content: "Valuable insights shared, productive discussions, and actionable outcomes. Looking forward to implementing the strategies discussed.! #TechCommunity #WomenInTech",
     date: "May 18, 2024",
-    avatar: "/icons/adobe.png"
+    avatar: "/icons/adobe.png",
+    link: "https://topmate.io/sanjaykv"
   },
   {
     name: "Namith",
     username: "namith",
     content: "Gave remarkable insights on parts i have to improve and gave me new opportunities . cheers~! #TechCommunity #Grateful",
     date: "April 21, 2023",
-    avatar: "/icons/google.png"
+    avatar: "/icons/google.png",
+    link: "https://topmate.io/sanjaykv"
   },
   {
     name: "Rajdeep Chakraborty",
     username: "RajdeepChakraborty",
     content: "I appreciate Sanjay sir's insights on open source and his suggestions for improving my GitHub profile. I'm excited to hear more and discuss open source further.! #OpenSource #TechCommunity",
     date: "Oct 18, 2024",
-    avatar: "/icons/amazon.png"
+    avatar: "/icons/amazon.png",
+    link: "https://topmate.io/sanjaykv"
   }
 ];