feat: add LinkResult, Pagination, and StatsCards components; implement server actions for link management and global stats retrieval

2026-06-05 13:52:29 +02:00 · 2026-03-30 19:28:58 +02:00
parent 4ede5021b1
commit f95587fc7a
46 changed files with 4224 additions and 177 deletions
@@ -0,0 +1,91 @@
+import Link from 'next/link'
+
+// Composant Footer
+export default function Footer() {
+  const currentYear = new Date().getFullYear()
+
+  return (
+    <footer className="mt-auto border-t border-gray-200 bg-gray-50">
+      <div className="mx-auto max-w-6xl px-4 py-12 sm:px-6 lg:px-8">
+        <div className="grid gap-8 md:grid-cols-3">
+          {/* À propos */}
+          <div>
+            <h3 className="flex items-center gap-2 text-lg font-semibold text-gray-900">
+              <svg
+                className="h-6 w-6 text-blue-600"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                aria-hidden="true"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
+                />
+              </svg>
+              ReduceLink
+            </h3>
+            <p className="mt-2 text-sm text-gray-600">
+              Service gratuit de raccourcissement de liens. Simple, rapide et sans inscription.
+            </p>
+          </div>
+
+          {/* Liens rapides */}
+          <div>
+            <h3 className="text-lg font-semibold text-gray-900">Liens rapides</h3>
+            <ul className="mt-2 space-y-2 text-sm">
+              <li>
+                <Link href="/liens" className="text-gray-600 transition-colors hover:text-blue-600">
+                  Tous les liens
+                </Link>
+              </li>
+              <li>
+                <Link href="/stats" className="text-gray-600 transition-colors hover:text-blue-600">
+                  Statistiques
+                </Link>
+              </li>
+              <li>
+                <Link href="/a-propos" className="text-gray-600 transition-colors hover:text-blue-600">
+                  À propos
+                </Link>
+              </li>
+              <li>
+                <Link href="/conditions" className="text-gray-600 transition-colors hover:text-blue-600">
+                  Conditions d&apos;utilisation
+                </Link>
+              </li>
+            </ul>
+          </div>
+
+          {/* Contact */}
+          <div>
+            <h3 className="text-lg font-semibold text-gray-900">Information</h3>
+            <ul className="mt-2 space-y-2 text-sm text-gray-600">
+              <li>✓ Gratuit et sans inscription</li>
+              <li>✓ Liens publics et permanents</li>
+              <li>✓ Statistiques transparentes</li>
+              <li>✓ Respectueux de la vie privée</li>
+            </ul>
+          </div>
+        </div>
+
+        {/* Copyright */}
+        <div className="mt-8 border-t border-gray-200 pt-8 text-center text-sm text-gray-600">
+          <p>
+            © {currentYear} ReduceLink. Tous droits réservés.
+            <span className="mx-2">•</span>
+            <Link href="/conditions" className="hover:text-blue-600">
+              Conditions
+            </Link>
+            <span className="mx-2">•</span>
+            <Link href="/a-propos" className="hover:text-blue-600">
+              À propos
+            </Link>
+          </p>
+        </div>
+      </div>
+    </footer>
+  )
+}
@@ -0,0 +1,113 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+
+// Composant Header avec navigation
+export default function Header() {
+  const pathname = usePathname()
+
+  const navLinks = [
+    { href: '/', label: 'Accueil' },
+    { href: '/liens', label: 'Liens' },
+    { href: '/stats', label: 'Statistiques' },
+    { href: '/a-propos', label: 'À propos' },
+  ]
+
+  return (
+    <header className="sticky top-0 z-50 w-full border-b border-gray-200 bg-white/80 backdrop-blur-md">
+      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
+        <div className="flex h-16 items-center justify-between">
+          {/* Logo */}
+          <Link href="/" className="flex items-center gap-2 transition-opacity hover:opacity-80">
+            <svg
+              className="h-8 w-8 text-blue-600"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
+              />
+            </svg>
+            <span className="text-xl font-bold text-gray-900">
+              Reduce<span className="text-blue-600">Link</span>
+            </span>
+          </Link>
+
+          {/* Navigation */}
+          <nav className="hidden md:flex md:items-center md:gap-1" aria-label="Navigation principale">
+            {navLinks.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                className={`rounded-lg px-4 py-2 text-sm font-medium transition-colors ${
+                  pathname === link.href
+                    ? 'bg-blue-100 text-blue-700'
+                    : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
+                }`}
+                aria-current={pathname === link.href ? 'page' : undefined}
+              >
+                {link.label}
+              </Link>
+            ))}
+          </nav>
+
+          {/* Menu mobile */}
+          <MobileMenu navLinks={navLinks} pathname={pathname} />
+        </div>
+      </div>
+    </header>
+  )
+}
+
+function MobileMenu({ navLinks, pathname }: { navLinks: { href: string; label: string }[]; pathname: string }) {
+  return (
+    <div className="md:hidden">
+      <details className="group">
+        <summary className="flex h-10 w-10 cursor-pointer items-center justify-center rounded-lg text-gray-600 hover:bg-gray-100 list-none">
+          <svg
+            className="h-6 w-6 group-open:hidden"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+          </svg>
+          <svg
+            className="hidden h-6 w-6 group-open:block"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+          <span className="sr-only">Menu</span>
+        </summary>
+        <div className="absolute left-0 right-0 top-16 border-b border-gray-200 bg-white p-4 shadow-lg">
+          <nav className="flex flex-col gap-1">
+            {navLinks.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                className={`rounded-lg px-4 py-3 text-sm font-medium transition-colors ${
+                  pathname === link.href
+                    ? 'bg-blue-100 text-blue-700'
+                    : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
+                }`}
+              >
+                {link.label}
+              </Link>
+            ))}
+          </nav>
+        </div>
+      </details>
+    </div>
+  )
+}
@@ -0,0 +1,113 @@
+'use client'
+
+import { useState } from 'react'
+import Link from 'next/link'
+import type { Link as LinkType } from '@/lib/types'
+import { extractDomain, formatNumber, formatRelativeDate, getShortUrl } from '@/lib/utils'
+
+interface LinkCardProps {
+  link: LinkType
+  showFullUrl?: boolean
+}
+
+// Carte d'affichage d'un lien
+export default function LinkCard({ link, showFullUrl = false }: LinkCardProps) {
+  const [copied, setCopied] = useState(false)
+  const shortUrl = getShortUrl(link.shortCode)
+  const domain = extractDomain(link.originalUrl)
+
+  const copyLink = async () => {
+    try {
+      await navigator.clipboard.writeText(shortUrl)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch (error) {
+      console.error('Erreur lors de la copie:', error)
+    }
+  }
+
+  return (
+    <div className="group rounded-xl border border-gray-200 bg-white p-4 shadow-sm transition-all hover:border-blue-200 hover:shadow-md">
+      <div className="flex items-start gap-3">
+        {/* Favicon */}
+        {link.favicon && (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={link.favicon}
+            alt=""
+            className="h-10 w-10 rounded-lg bg-gray-100 object-contain p-1"
+            onError={(e) => (e.currentTarget.style.display = 'none')}
+          />
+        )}
+
+        <div className="flex-1 min-w-0">
+          {/* Titre ou domaine */}
+          <h3 className="font-medium text-gray-900 truncate">
+            {link.title || domain}
+          </h3>
+
+          {/* Lien raccourci */}
+          <Link
+            href={`/${link.shortCode}`}
+            target="_blank"
+            className="text-sm text-blue-600 hover:text-blue-700 hover:underline"
+          >
+            {shortUrl}
+          </Link>
+
+          {/* URL originale */}
+          {showFullUrl && (
+            <p className="mt-1 text-xs text-gray-500 truncate">
+              {link.originalUrl}
+            </p>
+          )}
+
+          {/* Méta infos */}
+          <div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-gray-500">
+            <span className="flex items-center gap-1">
+              <svg className="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+              </svg>
+              {formatNumber(link.clickCount)} clic{link.clickCount !== 1 ? 's' : ''}
+            </span>
+            <span className="flex items-center gap-1">
+              <svg className="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+              </svg>
+              {formatRelativeDate(link.createdAt)}
+            </span>
+            <span className="flex items-center gap-1 text-gray-400">
+              <svg className="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
+              </svg>
+              {domain}
+            </span>
+          </div>
+        </div>
+
+        {/* Bouton copier */}
+        <button
+          onClick={copyLink}
+          className={`shrink-0 rounded-lg p-2 transition-all ${
+            copied
+              ? 'bg-green-500 text-white'
+              : 'bg-gray-100 text-gray-600 hover:bg-blue-100 hover:text-blue-600'
+          }`}
+          aria-label="Copier le lien"
+          title="Copier le lien"
+        >
+          {copied ? (
+            <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+            </svg>
+          ) : (
+            <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+            </svg>
+          )}
+        </button>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,110 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import { useRouter } from 'next/navigation'
+import type { SortOption } from '@/lib/types'
+
+interface LinkFiltersProps {
+  initialSort: SortOption
+  initialSearch: string
+}
+
+// Filtres et recherche pour la liste des liens
+export default function LinkFilters({ initialSort, initialSearch }: LinkFiltersProps) {
+  const router = useRouter()
+  const [search, setSearch] = useState(initialSearch)
+  const [sort, setSort] = useState<SortOption>(initialSort)
+
+  // Mettre à jour l'URL avec les paramètres
+  const updateUrl = useCallback((newSort: SortOption, newSearch: string) => {
+    const params = new URLSearchParams()
+    if (newSort !== 'recent') params.set('sort', newSort)
+    if (newSearch) params.set('search', newSearch)
+    params.set('page', '1')
+    
+    const queryString = params.toString()
+    router.push(`/liens${queryString ? `?${queryString}` : ''}`)
+  }, [router])
+
+  // Debounce pour la recherche
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (search !== initialSearch) {
+        updateUrl(sort, search)
+      }
+    }, 300)
+    return () => clearTimeout(timer)
+  }, [search, sort, initialSearch, updateUrl])
+
+  const handleSortChange = (newSort: SortOption) => {
+    setSort(newSort)
+    updateUrl(newSort, search)
+  }
+
+  const sortOptions: { value: SortOption; label: string }[] = [
+    { value: 'recent', label: 'Plus récents' },
+    { value: 'popular', label: 'Plus cliqués' },
+    { value: 'alphabetical', label: 'Alphabétique' },
+  ]
+
+  return (
+    <div className="flex flex-col sm:flex-row gap-4 mb-6">
+      {/* Barre de recherche */}
+      <div className="relative flex-1">
+        <svg
+          className="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+          />
+        </svg>
+        <input
+          type="search"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Rechercher un lien..."
+          className="w-full rounded-lg border border-gray-300 bg-white py-2.5 pl-10 pr-4 text-sm text-gray-900 placeholder-gray-400 transition-colors focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
+          aria-label="Rechercher"
+        />
+        {search && (
+          <button
+            onClick={() => {
+              setSearch('')
+              updateUrl(sort, '')
+            }}
+            className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+            aria-label="Effacer la recherche"
+          >
+            <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        )}
+      </div>
+
+      {/* Tri */}
+      <div className="flex gap-2">
+        {sortOptions.map((option) => (
+          <button
+            key={option.value}
+            onClick={() => handleSortChange(option.value)}
+            className={`rounded-lg px-4 py-2.5 text-sm font-medium transition-colors ${
+              sort === option.value
+                ? 'bg-blue-600 text-white'
+                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+            }`}
+            aria-pressed={sort === option.value}
+          >
+            {option.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,222 @@
+'use client'
+
+import { useState, useRef, useCallback } from 'react'
+import { createLink, previewLink } from '@/lib/actions'
+import type { CreateLinkResponse, LinkPreview } from '@/lib/types'
+import { getShortUrl } from '@/lib/utils'
+import LinkResult from './LinkResult'
+
+// Formulaire de création de liens
+export default function LinkForm() {
+  const [url, setUrl] = useState('')
+  const [customAlias, setCustomAlias] = useState('')
+  const [useCustomAlias, setUseCustomAlias] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+  const [result, setResult] = useState<CreateLinkResponse | null>(null)
+  const [preview, setPreview] = useState<LinkPreview | null>(null)
+  const [previewLoading, setPreviewLoading] = useState(false)
+  const debounceRef = useRef<NodeJS.Timeout | null>(null)
+
+  // Aperçu du lien avec debounce
+  const handleUrlChange = useCallback((value: string) => {
+    setUrl(value)
+    setResult(null)
+
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current)
+    }
+
+    if (value.length > 10) {
+      debounceRef.current = setTimeout(async () => {
+        setPreviewLoading(true)
+        try {
+          const previewData = await previewLink(value)
+          setPreview(previewData as LinkPreview)
+        } catch {
+          setPreview(null)
+        } finally {
+          setPreviewLoading(false)
+        }
+      }, 500)
+    } else {
+      setPreview(null)
+    }
+  }, [])
+
+  // Soumission du formulaire
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsLoading(true)
+    setResult(null)
+
+    try {
+      const response = await createLink(url, useCustomAlias ? customAlias : undefined)
+      setResult(response)
+      
+      if (response.success) {
+        // Ne pas réinitialiser le formulaire pour permettre de voir le résultat
+      }
+    } catch {
+      setResult({
+        success: false,
+        error: 'Une erreur est survenue. Veuillez réessayer.',
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  // Réinitialiser le formulaire
+  const handleReset = () => {
+    setUrl('')
+    setCustomAlias('')
+    setUseCustomAlias(false)
+    setResult(null)
+    setPreview(null)
+  }
+
+  return (
+    <div className="w-full max-w-2xl mx-auto">
+      <form onSubmit={handleSubmit} className="space-y-6">
+        {/* Champ URL */}
+        <div>
+          <label htmlFor="url" className="block text-sm font-medium text-gray-700 mb-2">
+            URL à raccourcir
+          </label>
+          <div className="relative">
+            <input
+              type="url"
+              id="url"
+              value={url}
+              onChange={(e) => handleUrlChange(e.target.value)}
+              placeholder="https://exemple.com/votre-lien-tres-long"
+              className="w-full rounded-xl border border-gray-300 px-4 py-4 pr-12 text-gray-900 placeholder-gray-400 shadow-sm transition-all focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
+              required
+              disabled={isLoading}
+              aria-describedby="url-description"
+            />
+            {previewLoading && (
+              <div className="absolute right-4 top-1/2 -translate-y-1/2">
+                <svg className="h-5 w-5 animate-spin text-gray-400" fill="none" viewBox="0 0 24 24">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                </svg>
+              </div>
+            )}
+          </div>
+          <p id="url-description" className="mt-1 text-xs text-gray-500">
+            Collez votre URL longue ici
+          </p>
+        </div>
+
+        {/* Aperçu du lien */}
+        {preview && preview.isValid && (
+          <div className={`rounded-xl border p-4 transition-all ${
+            preview.isSuspicious ? 'border-yellow-300 bg-yellow-50' : 'border-gray-200 bg-gray-50'
+          }`}>
+            <div className="flex items-start gap-3">
+              {preview.favicon && (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img
+                  src={preview.favicon}
+                  alt=""
+                  className="h-8 w-8 rounded"
+                  onError={(e) => (e.currentTarget.style.display = 'none')}
+                />
+              )}
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium text-gray-900 truncate">
+                  {preview.title || preview.domain}
+                </p>
+                <p className="text-xs text-gray-500 truncate">{preview.domain}</p>
+              </div>
+            </div>
+            {preview.isSuspicious && (
+              <div className="mt-3 flex items-center gap-2 text-yellow-700">
+                <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+                </svg>
+                <span className="text-sm">{preview.suspiciousReason}</span>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Option alias personnalisé */}
+        <div className="space-y-3">
+          <label className="flex items-center gap-3 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={useCustomAlias}
+              onChange={(e) => setUseCustomAlias(e.target.checked)}
+              className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+              disabled={isLoading}
+            />
+            <span className="text-sm text-gray-700">Utiliser un alias personnalisé</span>
+          </label>
+
+          {useCustomAlias && (
+            <div className="relative">
+              <span className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 text-sm">
+                reducelink.arthurp.fr/
+              </span>
+              <input
+                type="text"
+                value={customAlias}
+                onChange={(e) => setCustomAlias(e.target.value.toLowerCase().replace(/[^a-z0-9-_]/g, ''))}
+                placeholder="mon-alias"
+                className="w-full rounded-xl border border-gray-300 py-3 pl-32 pr-4 text-gray-900 placeholder-gray-400 shadow-sm transition-all focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
+                minLength={3}
+                maxLength={50}
+                disabled={isLoading}
+                aria-label="Alias personnalisé"
+              />
+            </div>
+          )}
+        </div>
+
+        {/* Bouton soumettre */}
+        <button
+          type="submit"
+          disabled={isLoading || !url}
+          className="w-full rounded-xl bg-blue-600 px-6 py-4 text-base font-semibold text-white shadow-lg transition-all hover:bg-blue-700 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:bg-gray-400 disabled:shadow-none"
+        >
+          {isLoading ? (
+            <span className="flex items-center justify-center gap-2">
+              <svg className="h-5 w-5 animate-spin" fill="none" viewBox="0 0 24 24">
+                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+              </svg>
+              Création en cours...
+            </span>
+          ) : (
+            'Raccourcir le lien'
+          )}
+        </button>
+      </form>
+
+      {/* Résultat */}
+      {result && (
+        <div className="mt-8">
+          {result.success && result.link ? (
+            <LinkResult
+              link={result.link}
+              shortUrl={getShortUrl(result.link.shortCode)}
+              isReused={result.isReused}
+              onReset={handleReset}
+            />
+          ) : (
+            <div className="rounded-xl border border-red-200 bg-red-50 p-4">
+              <div className="flex items-center gap-3">
+                <svg className="h-5 w-5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+                </svg>
+                <p className="text-sm text-red-700">{result.error}</p>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
@@ -0,0 +1,200 @@
+'use client'
+
+import { useState, useRef } from 'react'
+import { QRCodeCanvas } from 'qrcode.react'
+import type { Link } from '@/lib/types'
+import { formatNumber } from '@/lib/utils'
+
+interface LinkResultProps {
+  link: Link
+  shortUrl: string
+  isReused?: boolean
+  onReset: () => void
+}
+
+// Composant d'affichage du résultat après création de lien
+export default function LinkResult({ link, shortUrl, isReused, onReset }: LinkResultProps) {
+  const [copied, setCopied] = useState(false)
+  const [qrCopied, setQrCopied] = useState(false)
+  const qrRef = useRef<HTMLDivElement>(null)
+
+  // Copier le lien dans le presse-papier
+  const copyLink = async () => {
+    try {
+      await navigator.clipboard.writeText(shortUrl)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch (error) {
+      console.error('Erreur lors de la copie:', error)
+    }
+  }
+
+  // Copier le QR Code dans le presse-papier
+  const copyQRCode = async () => {
+    try {
+      const canvas = qrRef.current?.querySelector('canvas')
+      if (!canvas) return
+
+      const blob = await new Promise<Blob>((resolve) => {
+        canvas.toBlob((b) => resolve(b!), 'image/png')
+      })
+
+      await navigator.clipboard.write([
+        new ClipboardItem({ 'image/png': blob }),
+      ])
+      setQrCopied(true)
+      setTimeout(() => setQrCopied(false), 2000)
+    } catch {
+      // Fallback: télécharger si la copie échoue
+      downloadQRCode()
+    }
+  }
+
+  // Télécharger le QR Code
+  const downloadQRCode = () => {
+    const canvas = qrRef.current?.querySelector('canvas')
+    if (!canvas) return
+
+    const url = canvas.toDataURL('image/png')
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `reducelink-${link.shortCode}-qr.png`
+    a.click()
+  }
+
+  return (
+    <div className="rounded-2xl border border-green-200 bg-green-50 p-6 animate-in fade-in slide-in-from-bottom-4 duration-300">
+      {/* Message de réutilisation */}
+      {isReused && (
+        <div className="mb-4 flex items-center gap-2 rounded-lg bg-blue-100 px-4 py-2 text-sm text-blue-700">
+          <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
+            <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
+          </svg>
+          <span>Ce lien existait déjà, nous l&apos;avons réutilisé.</span>
+        </div>
+      )}
+
+      {/* En-tête succès */}
+      <div className="flex items-center gap-3 mb-4">
+        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-green-500">
+          <svg className="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+          </svg>
+        </div>
+        <div>
+          <h3 className="font-semibold text-green-800">Lien créé avec succès !</h3>
+          <p className="text-sm text-green-600">{formatNumber(link.clickCount)} clic{link.clickCount !== 1 ? 's' : ''}</p>
+        </div>
+      </div>
+
+      {/* Lien raccourci */}
+      <div className="mb-6">
+        <label className="text-sm font-medium text-gray-700 mb-1 block">Votre lien raccourci</label>
+        <div className="flex items-center gap-2">
+          <div className="flex-1 rounded-lg border border-green-300 bg-white px-4 py-3">
+            <a
+              href={shortUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-blue-600 hover:text-blue-700 font-medium break-all"
+            >
+              {shortUrl}
+            </a>
+          </div>
+          <button
+            onClick={copyLink}
+            className={`flex h-12 w-12 shrink-0 items-center justify-center rounded-lg transition-all ${
+              copied
+                ? 'bg-green-500 text-white'
+                : 'bg-white border border-green-300 text-gray-600 hover:bg-green-100'
+            }`}
+            aria-label="Copier le lien"
+          >
+            {copied ? (
+              <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+              </svg>
+            ) : (
+              <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+              </svg>
+            )}
+          </button>
+        </div>
+      </div>
+
+      {/* URL originale */}
+      <div className="mb-6">
+        <label className="text-sm font-medium text-gray-700 mb-1 block">URL originale</label>
+        <p className="text-sm text-gray-600 truncate bg-white rounded-lg border border-gray-200 px-4 py-2">
+          {link.originalUrl}
+        </p>
+      </div>
+
+      {/* QR Code */}
+      <div className="border-t border-green-200 pt-6">
+        <label className="text-sm font-medium text-gray-700 mb-3 block">QR Code</label>
+        <div className="flex flex-col sm:flex-row items-center gap-4">
+          <div
+            ref={qrRef}
+            className="rounded-xl bg-white p-4 shadow-sm border border-gray-200"
+          >
+            <QRCodeCanvas
+              value={shortUrl}
+              size={150}
+              bgColor="#ffffff"
+              fgColor="#1e40af"
+              level="H"
+              includeMargin={false}
+            />
+          </div>
+          <div className="flex flex-col gap-2 w-full sm:w-auto">
+            <button
+              onClick={copyQRCode}
+              className={`flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-all ${
+                qrCopied
+                  ? 'bg-green-500 text-white'
+                  : 'bg-white border border-gray-300 text-gray-700 hover:bg-gray-50'
+              }`}
+            >
+              {qrCopied ? (
+                <>
+                  <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                  </svg>
+                  Copié !
+                </>
+              ) : (
+                <>
+                  <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                  </svg>
+                  Copier le QR Code
+                </>
+              )}
+            </button>
+            <button
+              onClick={downloadQRCode}
+              className="flex items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition-all hover:bg-gray-50"
+            >
+              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+              </svg>
+              Télécharger
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Nouveau lien */}
+      <div className="mt-6 pt-6 border-t border-green-200">
+        <button
+          onClick={onReset}
+          className="w-full rounded-lg border border-green-300 bg-white px-4 py-3 text-sm font-medium text-green-700 transition-all hover:bg-green-100"
+        >
+          Créer un nouveau lien
+        </button>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,125 @@
+import Link from 'next/link'
+
+interface PaginationProps {
+  currentPage: number
+  totalPages: number
+  baseUrl: string
+  searchParams?: Record<string, string>
+}
+
+// Composant de pagination
+export default function Pagination({ currentPage, totalPages, baseUrl, searchParams = {} }: PaginationProps) {
+  if (totalPages <= 1) return null
+
+  // Construire l'URL avec les paramètres
+  const buildUrl = (page: number) => {
+    const params = new URLSearchParams(searchParams)
+    params.set('page', page.toString())
+    return `${baseUrl}?${params.toString()}`
+  }
+
+  // Générer les numéros de pages à afficher
+  const getPageNumbers = () => {
+    const pages: (number | 'ellipsis')[] = []
+    const showEllipsis = totalPages > 7
+
+    if (!showEllipsis) {
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i)
+      }
+    } else {
+      pages.push(1)
+
+      if (currentPage > 3) {
+        pages.push('ellipsis')
+      }
+
+      const start = Math.max(2, currentPage - 1)
+      const end = Math.min(totalPages - 1, currentPage + 1)
+
+      for (let i = start; i <= end; i++) {
+        pages.push(i)
+      }
+
+      if (currentPage < totalPages - 2) {
+        pages.push('ellipsis')
+      }
+
+      pages.push(totalPages)
+    }
+
+    return pages
+  }
+
+  const pageNumbers = getPageNumbers()
+
+  return (
+    <nav className="flex items-center justify-center gap-1" aria-label="Pagination">
+      {/* Bouton précédent */}
+      {currentPage > 1 ? (
+        <Link
+          href={buildUrl(currentPage - 1)}
+          className="flex h-10 items-center gap-1 rounded-lg border border-gray-300 bg-white px-3 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50"
+          aria-label="Page précédente"
+        >
+          <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+          </svg>
+          <span className="hidden sm:inline">Précédent</span>
+        </Link>
+      ) : (
+        <span className="flex h-10 cursor-not-allowed items-center gap-1 rounded-lg border border-gray-200 bg-gray-100 px-3 text-sm font-medium text-gray-400">
+          <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+          </svg>
+          <span className="hidden sm:inline">Précédent</span>
+        </span>
+      )}
+
+      {/* Numéros de page */}
+      <div className="flex items-center gap-1">
+        {pageNumbers.map((page, index) =>
+          page === 'ellipsis' ? (
+            <span key={`ellipsis-${index}`} className="px-2 text-gray-500">
+              ...
+            </span>
+          ) : (
+            <Link
+              key={page}
+              href={buildUrl(page)}
+              className={`flex h-10 w-10 items-center justify-center rounded-lg text-sm font-medium transition-colors ${
+                page === currentPage
+                  ? 'bg-blue-600 text-white'
+                  : 'border border-gray-300 bg-white text-gray-700 hover:bg-gray-50'
+              }`}
+              aria-current={page === currentPage ? 'page' : undefined}
+            >
+              {page}
+            </Link>
+          )
+        )}
+      </div>
+
+      {/* Bouton suivant */}
+      {currentPage < totalPages ? (
+        <Link
+          href={buildUrl(currentPage + 1)}
+          className="flex h-10 items-center gap-1 rounded-lg border border-gray-300 bg-white px-3 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50"
+          aria-label="Page suivante"
+        >
+          <span className="hidden sm:inline">Suivant</span>
+          <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+          </svg>
+        </Link>
+      ) : (
+        <span className="flex h-10 cursor-not-allowed items-center gap-1 rounded-lg border border-gray-200 bg-gray-100 px-3 text-sm font-medium text-gray-400">
+          <span className="hidden sm:inline">Suivant</span>
+          <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+          </svg>
+        </span>
+      )}
+    </nav>
+  )
+}
@@ -0,0 +1,81 @@
+import type { GlobalStats } from '@/lib/types'
+import { formatNumber } from '@/lib/utils'
+
+interface StatsCardsProps {
+  stats: GlobalStats
+}
+
+// Cartes de statistiques globales
+export default function StatsCards({ stats }: StatsCardsProps) {
+  const cards = [
+    {
+      label: 'Liens créés',
+      value: formatNumber(stats.totalLinks),
+      icon: (
+        <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
+        </svg>
+      ),
+      color: 'blue',
+    },
+    {
+      label: 'Redirections',
+      value: formatNumber(stats.totalClicks),
+      icon: (
+        <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
+        </svg>
+      ),
+      color: 'green',
+    },
+    {
+      label: "Liens aujourd'hui",
+      value: formatNumber(stats.linksToday),
+      icon: (
+        <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+      ),
+      color: 'purple',
+    },
+    {
+      label: "Clics aujourd'hui",
+      value: formatNumber(stats.clicksToday),
+      icon: (
+        <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
+        </svg>
+      ),
+      color: 'orange',
+    },
+  ]
+
+  const colorClasses = {
+    blue: 'bg-blue-100 text-blue-600',
+    green: 'bg-green-100 text-green-600',
+    purple: 'bg-purple-100 text-purple-600',
+    orange: 'bg-orange-100 text-orange-600',
+  }
+
+  return (
+    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+      {cards.map((card, index) => (
+        <div
+          key={card.label}
+          className="rounded-xl border border-gray-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md"
+          style={{ animationDelay: `${index * 100}ms` }}
+        >
+          <div className="flex items-center gap-4">
+            <div className={`rounded-lg p-3 ${colorClasses[card.color as keyof typeof colorClasses]}`}>
+              {card.icon}
+            </div>
+            <div>
+              <p className="text-2xl font-bold text-gray-900">{card.value}</p>
+              <p className="text-sm text-gray-600">{card.label}</p>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
@@ -0,0 +1,9 @@
+// Export de tous les composants
+export { default as Header } from './Header'
+export { default as Footer } from './Footer'
+export { default as LinkForm } from './LinkForm'
+export { default as LinkResult } from './LinkResult'
+export { default as LinkCard } from './LinkCard'
+export { default as LinkFilters } from './LinkFilters'
+export { default as StatsCards } from './StatsCards'
+export { default as Pagination } from './Pagination'