chore: Move components into sub-folders

Some components were in folders and others not, move them all for consistent project structure

Author: sparkison

src/components/Contributors.js src/components/Contributors/index.jssrc/components/Contributors.js renamed to src/components/Contributors/index.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import styles from './Contributors.module.css';
+import styles from './styles.module.css';
 
 const REPOS = [
     'sparkison/m3u-editor',

src/components/Contributors.module.css …omponents/Contributors/styles.module.csssrc/components/Contributors.module.css renamed to src/components/Contributors/styles.module.css src/components/Contributors.module.css renamed to src/components/Contributors/styles.module.css

@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from 'react';
+import styles from './styles.module.css';
+
+export default function DownloadBadge() {
+    const [downloadsText, setDownloadsText] = useState('Loading...');
+
+    useEffect(() => {
+        // Fetch from shields.io JSON endpoint (no CORS issues)
+        fetch('https://img.shields.io/docker/pulls/sparkison/m3u-editor.json')
+            .then((r) => {
+                if (!r.ok) throw new Error('Failed to fetch');
+                return r.json();
+            })
+            .then((data) => {
+                if (data && data.value) {
+                    // shields.io returns the value already formatted (e.g., "178k")
+                    // If you want to show the exact number with "+", you can parse it
+                    setDownloadsText(`${data.value}+`);
+                }
+            })
+            .catch(() => {
+                // Fallback to hardcoded value (update periodically)
+                setDownloadsText('100,000+');
+            });
+    }, []);
+
+    return (
+        <a
+            href="https://hub.docker.com/r/sparkison/m3u-editor"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.downloadBadge}
+            role="status"
+            aria-live="polite"
+        >
+            <span className={styles.emoji} aria-hidden="true">🚀</span>
+            {downloadsText} Downloads
+        </a>
+    );
+}

src/components/DownloadBadge.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import styles from './styles.module.css';
+
+// You can update this number or fetch dynamically if needed
+const DOWNLOADS = '120,000+';
+
+// Removed, replaced by CornerStat design in hero
+return (
+    <div className={styles.statContainer}>
+        <span className={styles.emoji} aria-hidden="true">🚀</span>
+        <span className={styles.number}>{DOWNLOADS}</span>
+        <span className={styles.label}>Downloads</span>
+    </div>
+);
+}

src/components/DownloadBadge/index.js

@@ -0,0 +1,88 @@
+import React, { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Navigation, Pagination, A11y } from 'swiper/modules';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+import styles from './styles.module.css';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+import screenshots from '../../data/screenshots';
+
+export default function ScreenshotsCarousel() {
+    const [lightbox, setLightbox] = useState({ open: false, src: '', alt: '' });
+    const [visibleScreenshots, setVisibleScreenshots] = useState(screenshots || []);
+    const baseUrl = useBaseUrl('');
+
+    useEffect(() => {
+        setVisibleScreenshots(screenshots || []);
+    }, [screenshots]);
+
+    useEffect(() => {
+        // Prevent body scroll when lightbox is open
+        if (lightbox.open) {
+            document.body.style.overflow = 'hidden';
+        } else {
+            document.body.style.overflow = '';
+        }
+        return () => {
+            document.body.style.overflow = '';
+        };
+    }, [lightbox.open]);
+
+    const openLightbox = (src, alt) => setLightbox({ open: true, src, alt });
+    const closeLightbox = () => setLightbox({ open: false, src: '', alt: '' });
+
+    const handleImageError = (src) => {
+        setVisibleScreenshots((prev) => prev.filter((s) => s.src !== src));
+    };
+
+    return (
+        <>
+            {visibleScreenshots.length > 0 ? (
+                <Swiper
+                    modules={[Navigation, Pagination, A11y]}
+                    spaceBetween={16}
+                    slidesPerView={1}
+                    navigation
+                    pagination={{ clickable: true }}
+                    breakpoints={{
+                        600: { slidesPerView: 2 },
+                        900: { slidesPerView: 3 },
+                    }}
+                    style={{ paddingBottom: 32 }}
+                    className={styles.carousel}
+                >
+                    {visibleScreenshots.map((img) => {
+                        const src = `${baseUrl.replace(/\/$/, '')}${img.src}`;
+                        return (
+                            <SwiperSlide key={src}>
+                                <img
+                                    src={src}
+                                    alt={img.alt}
+                                    className={styles.screenshotImg}
+                                    onError={() => handleImageError(img.src)}
+                                    onClick={() => openLightbox(src, img.alt)}
+                                    tabIndex={0}
+                                    role="button"
+                                    aria-label={`Expand ${img.alt}`}
+                                    onKeyDown={(e) => { if (e.key === 'Enter') openLightbox(src, img.alt); }}
+                                />
+                            </SwiperSlide>
+                        );
+                    })}
+                </Swiper>
+            ) : (
+                <div style={{ padding: '2rem 1rem', textAlign: 'center', color: '#cbd5e1' }}>No screenshots available.</div>
+            )}
+            {lightbox.open && createPortal(
+                <div className={styles.lightboxOverlay} onClick={closeLightbox} role="dialog" aria-modal="true">
+                    <button className={styles.lightboxClose} onClick={closeLightbox} aria-label="Close">&times;</button>
+                    <img src={lightbox.src} alt={lightbox.alt} className={styles.lightboxImg} />
+                </div>,
+                document.body
+            )}
+        </>
+    );
+}