Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 31 additions & 3 deletions src/components/testimonials/TestimonialCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ interface TestimonialCardProps {
content: string;
date: string;
avatar: string;
link: string;
}

const TestimonialCard: React.FC<TestimonialCardProps> = ({
Expand All @@ -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 }}
Expand Down Expand Up @@ -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
Expand All @@ -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;
9 changes: 6 additions & 3 deletions src/components/testimonials/TestimonialCarousel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
];

Expand Down
Loading