Wibx_Nuxt_UI_Pro/app/pages/connect/internet-exchanges.vue

<script setup lang="ts">
// Métadonnées de la page
useSeoMeta({
  title: 'Internet Exchanges - Wibx Tour Layer 2',
  description: 'Connectez-vous aux plus grands points d\'échange Internet (IXP) pour optimiser votre peering et réduire la latence.'
})

// Données des Internet Exchanges
const exchanges = ref([
  {
    id: 1,
    name: 'DE-CIX Frankfurt',
    location: 'Francfort, Allemagne',
    region: 'Europe',
    tier: 1,
    description: 'Le plus grand point d\'échange Internet au monde',
    members: 950,
    traffic: 11.2,
    pricing: 'À partir de 150€/mois'
  },
  {
    id: 2,
    name: 'AMS-IX Amsterdam',
    location: 'Amsterdam, Pays-Bas',
    region: 'Europe',
    tier: 1,
    description: 'Point d\'échange historique en Europe',
    members: 880,
    traffic: 8.5,
    pricing: 'À partir de 180€/mois'
  },
  {
    id: 3,
    name: 'France-IX Paris',
    location: 'Paris, France',
    region: 'Europe',
    tier: 1,
    description: 'Principal point d\'échange français',
    members: 520,
    traffic: 4.8,
    pricing: 'À partir de 120€/mois'
  },
  {
    id: 4,
    name: 'Equinix NY',
    location: 'New York, États-Unis',
    region: 'Amérique du Nord',
    tier: 1,
    description: 'Hub majeur en Amérique du Nord',
    members: 1200,
    traffic: 6.8,
    pricing: 'À partir de 300€/mois'
  }
])

const selectedRegion = ref('all')
const regions = computed(() => [...new Set(exchanges.value.map(exchange => exchange.region))])
const totalPeers = computed(() => exchanges.value.reduce((sum, exchange) => sum + exchange.members, 0))

const tabs = computed(() => [
  { value: 'all', label: 'Toutes les régions' },
  ...regions.value.map(region => ({ value: region, label: region }))
])

const filteredExchanges = computed(() => {
  if (selectedRegion.value === 'all') {
    return exchanges.value
  }
  return exchanges.value.filter(exchange => exchange.region === selectedRegion.value)
})
</script>

<template>
  <UDashboardPanel id="internet-exchanges">
    <template #header>
      <UDashboardNavbar title="Internet Exchanges">
        <template #leading>
          <UDashboardSidebarCollapse />
        </template>

        <template #right>
          <UButton to="/connect/data-centres" size="sm">
            Data Centres
          </UButton>
        </template>
      </UDashboardNavbar>

      <UDashboardToolbar>
        <template #left>
          <UBadge variant="subtle" size="lg">
            {{ exchanges.length }} points d'échange
          </UBadge>
        </template>

        <template #right>
          <UBadge variant="subtle" class="text-xs">
            {{ totalPeers }}+ membres
          </UBadge>
          <UBadge variant="subtle" class="text-xs">
            Peering multi-latéral
          </UBadge>
        </template>
      </UDashboardToolbar>
    </template>

    <template #body>
      <div class="space-y-12">
        <!-- Header Section -->
        <div class="text-center mb-8">
          <h1 class="text-3xl font-bold mb-4">
            Internet Exchanges (IXP)
          </h1>
          <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
            Connectez-vous aux plus grands points d'échange Internet pour un peering optimal
          </p>
        </div>

        <!-- Statistiques -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
          <UCard class="text-center">
            <div class="p-6">
              <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mx-auto mb-3">
                <UIcon name="i-lucide-network" class="w-6 h-6 text-primary" />
              </div>
              <div class="text-2xl font-bold mb-1">
                {{ exchanges.length }}
              </div>
              <div class="text-sm text-gray-600 dark:text-gray-400">
                Points d'échange
              </div>
            </div>
          </UCard>

          <UCard class="text-center">
            <div class="p-6">
              <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mx-auto mb-3">
                <UIcon name="i-lucide-users" class="w-6 h-6 text-primary" />
              </div>
              <div class="text-2xl font-bold mb-1">
                {{ totalPeers }}+
              </div>
              <div class="text-sm text-gray-600 dark:text-gray-400">
                Membres total
              </div>
            </div>
          </UCard>

          <UCard class="text-center">
            <div class="p-6">
              <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mx-auto mb-3">
                <UIcon name="i-lucide-activity" class="w-6 h-6 text-primary" />
              </div>
              <div class="text-2xl font-bold mb-1">
                100+
              </div>
              <div class="text-sm text-gray-600 dark:text-gray-400">
                Tbps total
              </div>
            </div>
          </UCard>

          <UCard class="text-center">
            <div class="p-6">
              <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mx-auto mb-3">
                <UIcon name="i-lucide-timer" class="w-6 h-6 text-primary" />
              </div>
              <div class="text-2xl font-bold mb-1">
                &lt; 5ms
              </div>
              <div class="text-sm text-gray-600 dark:text-gray-400">
                Latence
              </div>
            </div>
          </UCard>
        </div>

        <!-- Filtres -->
        <div>
          <UTabs v-model="selectedRegion" :items="tabs" class="w-full" />
        </div>

        <!-- Liste des Exchanges -->
        <div>
          <h2 class="text-2xl font-bold mb-8">
            Points d'échange disponibles
          </h2>
          
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <UCard 
              v-for="exchange in filteredExchanges" 
              :key="exchange.id"
              class="hover:shadow-lg transition-shadow duration-300"
            >
              <template #header>
                <div class="flex items-center justify-between">
                  <h3 class="font-semibold">
                    {{ exchange.name }}
                  </h3>
                  <UBadge 
                    :variant="exchange.tier === 1 ? 'solid' : 'outline'"
                    size="xs"
                  >
                    Tier {{ exchange.tier }}
                  </UBadge>
                </div>
              </template>

              <div class="space-y-3">
                <p class="text-sm text-gray-600 dark:text-gray-300">
                  {{ exchange.description }}
                </p>

                <div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
                  <UIcon name="i-lucide-map-pin" class="w-4 h-4" />
                  {{ exchange.location }}
                </div>

                <div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
                  <UIcon name="i-lucide-users" class="w-4 h-4" />
                  {{ exchange.members }} membres
                </div>

                <div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
                  <UIcon name="i-lucide-activity" class="w-4 h-4" />
                  {{ exchange.traffic }} Tbps
                </div>

                <div class="flex items-center justify-between pt-2 border-t">
                  <span class="text-sm font-medium">
                    Tarif mensuel
                  </span>
                  <span class="text-sm font-semibold text-primary">
                    {{ exchange.pricing }}
                  </span>
                </div>
              </div>

              <template #footer>
                <UButton variant="outline" block>
                  Se connecter
                </UButton>
              </template>
            </UCard>
          </div>
        </div>

        <!-- Avantages -->
        <div>
          <h2 class="text-2xl font-bold mb-8 text-center">
            Avantages du peering IXP
          </h2>

          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div class="text-center">
              <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <UIcon name="i-lucide-trending-down" size="24" class="text-primary" />
              </div>
              <h3 class="font-semibold mb-2">
                Réduction des coûts
              </h3>
              <p class="text-sm text-gray-600 dark:text-gray-300">
                Diminuez vos coûts de transit
              </p>
            </div>

            <div class="text-center">
              <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <UIcon name="i-lucide-timer" size="24" class="text-primary" />
              </div>
              <h3 class="font-semibold mb-2">
                Latence optimisée
              </h3>
              <p class="text-sm text-gray-600 dark:text-gray-300">
                Chemins plus courts et directs
              </p>
            </div>

            <div class="text-center">
              <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <UIcon name="i-lucide-shield" size="24" class="text-primary" />
              </div>
              <h3 class="font-semibold mb-2">
                Redondance
              </h3>
              <p class="text-sm text-gray-600 dark:text-gray-300">
                Résilience de l'infrastructure
              </p>
            </div>

            <div class="text-center">
              <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <UIcon name="i-lucide-network" size="24" class="text-primary" />
              </div>
              <h3 class="font-semibold mb-2">
                Écosystème riche
              </h3>
              <p class="text-sm text-gray-600 dark:text-gray-300">
                Large réseau de partenaires
              </p>
            </div>
          </div>
        </div>
      </div>
    </template>
  </UDashboardPanel>
</template>