34 lines
2.7 KiB
HTML
34 lines
2.7 KiB
HTML
<div x-data="{ firstValue: '', secondValue: '' }" class="flex w-full flex-col items-center gap-4">
|
|
<div class="relative flex w-full max-w-xs flex-col gap-1 text-on-surface dark:text-on-surface-dark">
|
|
<label for="modelName" class="w-fit pl-0.5 text-sm">Model</label>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="absolute pointer-events-none right-4 top-8 size-5">
|
|
<path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
|
|
</svg>
|
|
<select id="modelName" name="modelName" class="w-full appearance-none rounded-sm border border-outline bg-surface-alt px-4 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-75 dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:focus-visible:outline-primary-dark" x-model="firstValue">
|
|
<option value="" selected>Select Model</option>
|
|
<option value="camery">Camery</option>
|
|
<option value="4runner">4Runner</option>
|
|
<option value="tacoma">Tacoma</option>
|
|
<option value="rav4">Rav4</option>
|
|
<option value="corolla">Corolla</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="relative flex w-full max-w-xs flex-col gap-1 text-on-surface dark:text-on-surface-dark">
|
|
<label for="year" class="w-fit pl-0.5 text-sm">Year</label>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="absolute pointer-events-none right-4 top-8 size-5">
|
|
<path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
|
|
</svg>
|
|
<select id="year" name="year" class="w-full appearance-none rounded-sm border border-outline bg-surface-alt px-4 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-75 dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:focus-visible:outline-primary-dark" x-model="secondValue" x-bind:disabled="!firstValue">
|
|
<option value="" x-bind:selected="!firstValue" x-text="firstValue ? 'Select Year' : 'Select Model First'"></option>
|
|
<option value="2024">2024</option>
|
|
<option value="2023">2023</option>
|
|
<option value="2022">2022</option>
|
|
<option value="2021">2021</option>
|
|
<option value="2020">2020</option>
|
|
<option value="2019">2019</option>
|
|
<option value="2018">2018</option>
|
|
</select>
|
|
</div>
|
|
</div>
|