Untitled

<script lang="ts">
  // Define types
  type Brand = 'intel' | 'amd';
  type Socket = { value: string; name: string };
  type Model = { value: string; name: string };
  type CpuData = {
    [brand in Brand]: {
      sockets: Socket[];
      models: {
        [socket: string]: Model[];
      };
    };
  };

  // Define CPU data
  const cpuData: CpuData = {
    intel: {
      sockets: [
        { value: 'lga1700', name: 'LGA 1700' },
        { value: 'lga1200', name: 'LGA 1200' }
      ],
      models: {
        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: {
      sockets: [
        { value: 'am4', name: 'AM4' },
        { value: 'am5', name: 'AM5' }
      ],
      models: {
        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' }
        ]
      }
    }
  };

  // State variables
  let selectedBrand: Brand | '' = '';
  let selectedSocket = '';
  let selectedModel = '';

  // Derived values
  $: brands = Object.keys(cpuData) as Brand[];
  $: availableSockets = selectedBrand ? cpuData[selectedBrand].sockets : [];
  $: availableModels = selectedBrand && selectedSocket
    ? cpuData[selectedBrand].models[selectedSocket] || []
    : [];

  // Reset dependent selections when a parent selection changes
  $: 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>