Untitled

<script lang="ts">
  let selectedBrand = '';
  let selectedSocket = '';
  let selectedModel = '';

  const brands = [
    { value: 'intel', name: 'Intel' },
    { value: 'amd', name: 'AMD' }
  ];

  const allSockets = {
    intel: [
      { value: 'lga1700', name: 'LGA 1700' },
      { value: 'lga1200', name: 'LGA 1200' }
    ],
    amd: [
      { value: 'am4', name: 'AM4' },
      { value: 'am5', name: 'AM5' }
    ]
  };

  const allCpuModels = {
    intel: {
      lga1700: [
        { value: 'intel_i9_14900k', name: 'Intel Core i9-14900K' },
        { value: 'intel_i7_14700k', name: 'Intel Core i7-14700K' }
      ],
      lga1200: [
        { value: 'intel_i9_11900k', name: 'Intel Core i9-11900K' },
        { value: 'intel_i7_11700k', name: 'Intel Core i7-11700K' }
      ]
    },
    amd: {
      am5: [
        { value: 'ryzen9_7950x3d', name: 'Ryzen 9 7950X3D' },
        { value: 'ryzen7_7800x3d', name: 'Ryzen 7 7800X3D' }
      ],
      am4: [
        { value: 'ryzen9_5950x', name: 'Ryzen 9 5950X' },
        { value: 'ryzen7_5800x3d', name: 'Ryzen 7 5800X3D' }
      ]
    }
  };

  type Socket = { value: string; name: string };
  type Model = { value: string; name: string };

  let availableSockets: Socket[] = [];
  let availableModels: Model[] = [];

  $: availableSockets = selectedBrand ? allSockets[selectedBrand as keyof typeof allSockets] : [];
  $: availableModels = selectedBrand && selectedSocket
    ? allCpuModels[selectedBrand as keyof typeof allCpuModels][selectedSocket as keyof (typeof allCpuModels)[keyof typeof allCpuModels]]
    : [];

  $: if (selectedBrand) {
    selectedSocket = '';
    selectedModel = '';
  }

  $: if (selectedSocket) {
    selectedModel = '';
  }
</script>

<style>
  .cpu-selector-card {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  .select-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .select {
    width: 200px;
  }
</style>

<div class="flex justify-center items-center min-h-screen py-8">
  <div class="cpu-selector-card max-w-md">
    <header>
      <h2 class="text-2xl font-bold mb-6 text-center">CPU Selector</h2>
    </header>
    <section class="space-y-4 select-container">
      <label class="label">
        <span>CPU Brand</span>
        <select class="select" bind:value={selectedBrand}>
          <option value="">Select a brand</option>
          {#each brands as brand}
            <option value={brand.value}>{brand.name}</option>
          {/each}
        </select>
      </label>

      <label class="label">
        <span>CPU Socket</span>
        <select class="select" bind:value={selectedSocket} disabled={!selectedBrand}>
          <option value="">Select a socket</option>
          {#each availableSockets as socket}
            <option value={socket.value}>{socket.name}</option>
          {/each}
        </select>
      </label>

      <label class="label">
        <span>CPU Model</span>
        <select class="select" bind:value={selectedModel} disabled={!selectedSocket}>
          <option value="">Select a model</option>
          {#each availableModels as model}
            <option value={model.value}>{model.name}</option>
          {/each}
        </select>
      </label>
    </section>
  </div>
</div>