55 lines
1.2 KiB
Vue
55 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
title: string;
|
|
modelValue: string;
|
|
searchPlaceholder: string;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: string];
|
|
}>();
|
|
|
|
function updateValue(event: Event) {
|
|
emit('update:modelValue', (event.target as HTMLInputElement).value);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-5">
|
|
<h1 class="text-3xl font-extrabold text-[#0f2f20]">{{ props.title }}</h1>
|
|
|
|
<label class="input input-bordered flex w-full items-center gap-3 rounded-full bg-white">
|
|
<svg
|
|
class="h-4 w-4 shrink-0 text-base-content/45"
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M14.1667 14.1667L17.5 17.5"
|
|
stroke="currentColor"
|
|
stroke-width="1.6"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<circle
|
|
cx="8.75"
|
|
cy="8.75"
|
|
r="5.83333"
|
|
stroke="currentColor"
|
|
stroke-width="1.6"
|
|
/>
|
|
</svg>
|
|
<input
|
|
:value="props.modelValue"
|
|
type="text"
|
|
class="grow"
|
|
:placeholder="props.searchPlaceholder"
|
|
@input="updateValue"
|
|
>
|
|
</label>
|
|
|
|
<slot />
|
|
</div>
|
|
</template>
|