social share up and running

frontend/src/components/routes/ArticleDetailComponent.tsx

@@ -7,6 +7,7 @@ import { YouTubeEmbed } from '@/components/ui/youtube-embed'
 import { extractYouTubeVideoId, getVideoPositionClasses } from '@/lib/video-utils'
 import { CommentSection } from '@/components/features/comments/CommentSection'
 import { ReactionButtons } from '@/components/features/comments/ReactionButtons'
+import { SocialShareButtons } from '@/components/features/social-share'
 
 export function ArticleDetailComponent({ id }: { id: string }) {
   const { data, isLoading, error } = useQuery({
@@ -69,9 +70,21 @@ export function ArticleDetailComponent({ id }: { id: string }) {
             <span>By {data.author.name}</span>
           </>
         )}
-      </div>
+       </div>
 
-      {data.featuredImage && data.imagePosition !== 'none' && (
+        {/* Social Sharing */}
+        <div className="mb-8">
+          <SocialShareButtons
+            articleId={data.id}
+            title={data.title}
+            url={typeof window !== 'undefined' ? window.location.href : ''}
+            excerpt={data.excerpt}
+            image={data.featuredImage}
+            tags={data.tags}
+          />
+        </div>
+
+       {data.featuredImage && data.imagePosition !== 'none' && (
         <div className={`relative mb-4 ${
           data.imagePosition === 'top' 
             ? 'w-full mb-8' 
@@ -165,10 +178,26 @@ export function ArticleDetailComponent({ id }: { id: string }) {
           >
             {data.content}
           </ReactMarkdown>
-        </div>
-      </div>
+       </div>
+     </div>
 
-      {data.tags && Array.isArray(data.tags) && data.tags.length > 0 && (
+     {/* Social Sharing Footer */}
+     <div className="mt-8 pt-8 border-t">
+       <div className="flex flex-col items-center">
+         <p className="text-sm text-muted-foreground mb-4">Share this article:</p>
+          <SocialShareButtons
+            articleId={data.id}
+            title={data.title}
+            url={typeof window !== 'undefined' ? window.location.href : ''}
+            excerpt={data.excerpt}
+            image={data.featuredImage}
+            tags={data.tags}
+            variant="footer"
+          />
+       </div>
+     </div>
+
+     {data.tags && Array.isArray(data.tags) && data.tags.length > 0 && (
         <div className="mt-8 pt-8 border-t">
           <h3 className="text-sm font-semibold mb-4 text-muted-foreground">Tags</h3>
           <div className="flex flex-wrap gap-2">