Untitled

<script>
    import { Select, Card, Heading } from 'flowbite-svelte';
  
    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' }
        ]
      }
    };
  
    $: availableSockets = selectedBrand ? allSockets[selectedBrand] : [];
    $: availableModels = (selectedBrand && selectedSocket) ? allCpuModels[selectedBrand][selectedSocket] : [];
  
    $: {
      if (selectedBrand) {
        selectedSocket = '';
        selectedModel = '';
      }
    }
  
    $: {
      if (selectedSocket) {
        selectedModel = '';
      }
    }
  </script>
  
  <Card class="max-w-md mx-auto">
    <Heading tag="h2" class="mb-4 text-center">CPU Selector</Heading>
    
    <div class="space-y-4">
      <div>
        <Heading tag="h3" customSize="text-lg font-semibold mb-2">CPU Brand</Heading>
        <Select 
          items={brands}
          bind:value={selectedBrand}
        />
      </div>
  
      <div>
        <Heading tag="h3" customSize="text-lg font-semibold mb-2">CPU Socket</Heading>
        <Select 
          items={availableSockets}
          bind:value={selectedSocket}
          disabled={!selectedBrand}
        />
      </div>
  
      <div>
        <Heading tag="h3" customSize="text-lg font-semibold mb-2">CPU Model</Heading>
        <Select 
          items={availableModels}
          bind:value={selectedModel}
          disabled={!selectedSocket}
        />
      </div>
    </div>
  </Card>