[V0_FILE]typescriptreact:file="components/social-media-block.tsx" import { Button } from "@/components/ui/button" import { Facebook, Twitter, Instagram, Linkedin, Github } from "lucide-react" type SocialPlatform = "facebook" | "twitter" | "instagram" | "linkedin" | "github" interface SocialMediaProps { platforms: SocialPlatform[] shareUrl?: string className?: string } const platformIcons = { facebook: Facebook, twitter: Twitter, instagram: Instagram, linkedin: Linkedin, github: Github, } const platformUrls = { facebook: "https://www.facebook.com/sharer/sharer.php?u=", twitter: "https://twitter.com/intent/tweet?url=", instagram: "https://www.instagram.com/", linkedin: "https://www.linkedin.com/sharing/share-offsite/?url=", github: "https://github.com/", } export function SocialMediaBlock({ platforms, shareUrl, className = "" }: SocialMediaProps) { const handleShare = (platform: SocialPlatform) => { if (shareUrl) { window.open(`${platformUrls[platform]}${encodeURIComponent(shareUrl)}`, "_blank") } else { window.open(platformUrls[platform], "_blank") } } return (

{platforms.map((platform) => { const Icon = platformIcons[platform] return ( ) })}

) } [V0_FILE]typescriptreact:file="app/page.tsx" import { SocialMediaBlock } from "@/components/social-media-block" export default function Home() { return (

Social Media Block Example

This example demonstrates a social media block with share buttons. Click on a button to share the provided URL on the respective platform.

) }

About

Tags

Share

About

Tags

Share

More from patelmaya9812-4362

More Templates Like This

About

Tags

Share

About

Tags

Share

More from patelmaya9812-4362

More Templates Like This