car_trader/components/Car/Card.vue

27 lines
720 B
Vue

<script setup>
const props = defineProps({
car : Object
});
const handleClick = (car) => {
navigateTo(`/car/${car.name}-${car.id}`);
}
</script>
<template>
<div
class="shadow border w-full overflow-hidden mb-5 cursor-pointer h-[200px]"
@click="handleClick(car)">
<div class="flex h-full">
<img :src="car.url" alt=""/>
<div class="p-4 flex flex-col">
<div>
<h1 class="text-2xl text-blue-700">{{car.name}}</h1>
<p class="text-gray-700">{{car.description}}</p>
</div>
<h1 class="mt-auto text-xl">$39,555</h1>
</div>
</div>
</div>
</template>