Joakim Mörling
210ac87ede
Move vehicle-info display logic out of HomePage into a reusable VehicleInfo component. The component accepts vehicle, loading, notFound, and plate props and renders the correct state with priority: vehicle card > loading > not found. Follows the small-page-component pattern from CODING_GUIDELINES.md. - Create VehicleInfo.vue with 3-state v-if chain and scoped styles - Define and export VehicleInfo interface (make/model/year/color) - Add VehicleInfo.spec.ts with 7 tests covering all states and priority edge cases - Update HomePage.vue to use VehicleInfo, replacing 3 inline v-if/else-if blocks with a single component tag - Remove 5 unused CSS classes from HomePage (home__status, home__vehicle, home__vehicle-text, home__not-found, home__not-found p) - Update AGENTS.md to require thorough commit messages with bullet points
65 lines
1.2 KiB
Vue
65 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
export interface VehicleInfo {
|
|
make: string
|
|
model: string
|
|
year: number
|
|
color: string
|
|
}
|
|
|
|
defineProps<{
|
|
vehicle: VehicleInfo | null
|
|
loading: boolean
|
|
notFound: boolean
|
|
plate: string
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="vehicle-info">
|
|
<div v-if="vehicle" class="vehicle-info__card">
|
|
<p class="vehicle-info__card-text">
|
|
{{ vehicle.make }} {{ vehicle.model }} ({{ vehicle.year }}) —
|
|
{{ vehicle.color }}
|
|
</p>
|
|
</div>
|
|
<div v-else-if="loading" class="vehicle-info__loading">Söker...</div>
|
|
<div v-else-if="notFound" class="vehicle-info__not-found">
|
|
<p>Inget fordon hittades</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.vehicle-info {
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
.vehicle-info__loading {
|
|
color: #718096;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.vehicle-info__card {
|
|
padding: 1rem;
|
|
background: #f0fff4;
|
|
border: 1px solid #c6f6d5;
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
.vehicle-info__card-text {
|
|
margin: 0;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.vehicle-info__not-found {
|
|
padding: 1rem;
|
|
background: #fffaf0;
|
|
border: 1px solid #feebc8;
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
.vehicle-info__not-found p {
|
|
margin: 0;
|
|
color: #c05621;
|
|
}
|
|
</style>
|