Refactor social share component CSS styles for better responsiveness …

…and usability

css/components/social-share.css

@@ -0,0 +1,93 @@
+.social-share {
+    margin: 2rem 0;
+    padding: 1.5rem;
+    background: var(--bg-secondary);
+    border-radius: 8px;
+}
+
+.social-share h3 {
+    margin-bottom: 1rem;
+    color: var(--text-primary);
+}
+
+.share-buttons {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+
+.share-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.5rem;
+    border: none;
+    border-radius: 4px;
+    font-size: 1rem;
+    font-weight: 500;
+    text-decoration: none;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.share-button i {
+    font-size: 1.2rem;
+}
+
+/* Twitter */
+.share-button.twitter {
+    background: #1DA1F2;
+    color: white;
+}
+
+.share-button.twitter:hover {
+    background: #0d8ed9;
+}
+
+/* Facebook */
+.share-button.facebook {
+    background: #4267B2;
+    color: white;
+}
+
+.share-button.facebook:hover {
+    background: #365899;
+}
+
+/* Reddit */
+.share-button.reddit {
+    background: #FF4500;
+    color: white;
+}
+
+.share-button.reddit:hover {
+    background: #e63e00;
+}
+
+/* Copy Link */
+.share-button.copy-link {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+}
+
+.share-button.copy-link:hover {
+    background: var(--border-color);
+}
+
+/* Success State */
+.share-button.copy-link.success {
+    background: var(--success-color);
+    color: white;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .share-buttons {
+        flex-direction: column;
+    }
+
+    .share-button {
+        width: 100%;
+        justify-content: center;
+    }
+} 

js/utils/template-generator.js

@@ -109,4 +109,47 @@ export function generateToolList() {
     return Object.keys(CATEGORIES)
         .map(category => generateCategorySection(category))
         .join('');
+}
+
+export function generateSocialShare(url, title) {
+    const encodedUrl = encodeURIComponent(url);
+    const encodedTitle = encodeURIComponent(title);
+
+    return `
+        <div class="social-share">
+            <h3>Share</h3>
+            <div class="share-buttons">
+                <a href="https://twitter.com/intent/tweet?url=${encodedUrl}&text=${encodedTitle}" 
+                   target="_blank" 
+                   rel="noopener noreferrer"
+                   class="share-button twitter"
+                   aria-label="Share on Twitter">
+                    <i class="fab fa-twitter"></i>
+                    Twitter
+                </a>
+                <a href="https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}" 
+                   target="_blank" 
+                   rel="noopener noreferrer"
+                   class="share-button facebook"
+                   aria-label="Share on Facebook">
+                    <i class="fab fa-facebook"></i>
+                    Facebook
+                </a>
+                <a href="https://www.reddit.com/submit?url=${encodedUrl}&title=${encodedTitle}" 
+                   target="_blank" 
+                   rel="noopener noreferrer"
+                   class="share-button reddit"
+                   aria-label="Share on Reddit">
+                    <i class="fab fa-reddit"></i>
+                    Reddit
+                </a>
+                <button class="share-button copy-link" 
+                        data-url="${url}"
+                        aria-label="Copy link to clipboard">
+                    <i class="fas fa-link"></i>
+                    Copy Link
+                </button>
+            </div>
+        </div>
+    `;
 } 

js/utils/ui.js

@@ -392,4 +392,24 @@ export const responsiveHelper = {
         window.addEventListener('resize', handler);
         return () => window.removeEventListener('resize', handler);
     }
-}; 
+};
+
+export function initializeSocialShare() {
+    document.querySelectorAll('.share-button.copy-link').forEach(button => {
+        button.addEventListener('click', async () => {
+            const url = button.dataset.url;
+            try {
+                await navigator.clipboard.writeText(url);
+                button.innerHTML = '<i class="fas fa-check"></i> Copied!';
+                button.classList.add('success');
+                setTimeout(() => {
+                    button.innerHTML = '<i class="fas fa-link"></i> Copy Link';
+                    button.classList.remove('success');
+                }, 2000);
+            } catch (err) {
+                console.error('Failed to copy:', err);
+                showNotification('Failed to copy link', 'error');
+            }
+        });
+    });
+}