padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

replace input and button component with shadcn

Browse source
This commit is contained in:
padreug 2025-02-02 18:29:12 +01:00
parent 9ea94d3703
commit 08b505c145
1 changed files with 9 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/components/directory/DirectoryFilter.vue
View file

@ -1,5 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { Search } from 'lucide-vue-next' import { Search } from 'lucide-vue-next'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'
const props = defineProps<{ const props = defineProps<{
category: string category: string
@ -28,30 +30,27 @@ const categories = [
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<Search class="h-5 w-5 text-muted-foreground" /> <Search class="h-5 w-5 text-muted-foreground" />
</div> </div>
<input <Input
type="text" type="text"
:value="search" :value="search"
@input="emit('update:search', ($event.target as HTMLInputElement).value)" @input="emit('update:search', ($event.target as HTMLInputElement).value)"
class="block w-full rounded-md border-input pl-10 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary" class="pl-10"
placeholder="Search businesses..." placeholder="Search businesses..."
/> />
</div> </div>
<!-- Category Filter --> <!-- Category Filter -->
<div class="flex gap-2 overflow-x-auto pb-2 md:pb-0"> <div class="flex gap-2 overflow-x-auto pb-2 md:pb-0">
<button <Button
v-for="cat in categories" v-for="cat in categories"
:key="cat.id" :key="cat.id"
@click="emit('update:category', cat.id)" @click="emit('update:category', cat.id)"
class="inline-flex items-center rounded-full px-3 py-1 text-sm font-medium whitespace-nowrap transition-colors" :variant="category === cat.id ? 'default' : 'secondary'"
:class="[ size="sm"
category === cat.id class="rounded-full"
? 'bg-primary text-primary-foreground'
: 'bg-secondary text-secondary-foreground hover:bg-secondary/80'
]"
> >
{{ cat.label }} {{ cat.label }}
</button> </Button>
</div> </div>
</div> </div>
</template> </template>