72 lines
2.8 KiB
PHP
72 lines
2.8 KiB
PHP
|
@props(['data' => []])
|
||
|
|
<div x-data="magicsearchbar">
|
||
|
|
<input x-model="search" class="w-96" x-on:click="open = true" x-on:click.outside="close"
|
||
|
|
placeholder="🪄 Add / find anything" />
|
||
|
|
<div x-cloak x-show="open" class="absolute text-sm top-11 w-[25rem] bg-neutral-800">
|
||
|
|
<template x-for="item in filteredItems" :key="item.name">
|
||
|
|
<div x-on:click="execute(item.action)" class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
|
||
|
|
<span class="px-2 mr-1 text-xs bg-purple-700 rounded" x-show="item.type" x-text="item.type"></span>
|
||
|
|
<span x-text="item.name"></span>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
document.addEventListener('alpine:init', () => {
|
||
|
|
const data = @js($data);
|
||
|
|
console.log(data)
|
||
|
|
Alpine.data('magicsearchbar', () => ({
|
||
|
|
open: false,
|
||
|
|
search: '',
|
||
|
|
items: [{
|
||
|
|
name: 'Public Repository',
|
||
|
|
type: 'add',
|
||
|
|
tags: 'application,public,repository',
|
||
|
|
action: 'public-repo',
|
||
|
|
}, {
|
||
|
|
name: 'Private Repository (with GitHub App)',
|
||
|
|
type: 'add',
|
||
|
|
tags: 'application,private,repository',
|
||
|
|
action: 'github-private-repo-app'
|
||
|
|
}, {
|
||
|
|
name: 'Private Repository (with Deploy Key)',
|
||
|
|
type: 'add',
|
||
|
|
tags: 'application,private,repository',
|
||
|
|
action: 'github-private-repo-deploy-key'
|
||
|
|
}, {
|
||
|
|
name: 'Database',
|
||
|
|
type: 'add',
|
||
|
|
tags: 'data,database,mysql,postgres,sql,sqlite,redis,mongodb,maria,percona',
|
||
|
|
action: 'database'
|
||
|
|
}],
|
||
|
|
close() {
|
||
|
|
this.open = false
|
||
|
|
this.search = ''
|
||
|
|
},
|
||
|
|
filteredItems() {
|
||
|
|
if (this.search === '') return this.items
|
||
|
|
return this.items.filter(item => {
|
||
|
|
return item.name.toLowerCase().includes(this.search.toLowerCase())
|
||
|
|
})
|
||
|
|
},
|
||
|
|
execute(action) {
|
||
|
|
switch (action) {
|
||
|
|
case 'public-repo':
|
||
|
|
window.location.href = '/project/new/public-repository'
|
||
|
|
break
|
||
|
|
case 'github-private-repo-app':
|
||
|
|
window.location.href = '/project/new/github-private-repository'
|
||
|
|
break
|
||
|
|
case 'github-private-repo-deploy-key':
|
||
|
|
window.location.href = '/project/new/github-private-repository-deploy-key'
|
||
|
|
break
|
||
|
|
case 'database':
|
||
|
|
window.location.href = '/database/new'
|
||
|
|
break
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}))
|
||
|
|
})
|
||
|
|
</script>
|