56 lines
1.0 KiB
Svelte
56 lines
1.0 KiB
Svelte
|
<script>
|
||
|
|
|
||
|
|
import { searchAllComponents } from "./pagesParsing/searchComponents";
|
||
|
|
|
||
|
|
export let allComponents = [];
|
||
|
|
export let onComponentChosen = () => {};
|
||
|
|
|
||
|
|
let phrase = "";
|
||
|
|
|
||
|
|
$: filteredComponents =
|
||
|
|
!phrase
|
||
|
|
? []
|
||
|
|
: searchAllComponents(allComponents, phrase);
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="root">
|
||
|
|
|
||
|
|
<input class="uk-input" bind:value={phrase}>
|
||
|
|
<div>
|
||
|
|
{#each filteredComponents as component}
|
||
|
|
<div class="component" on:click={() => onComponentChosen(component)}>
|
||
|
|
<div class="title">{component.name}</div>
|
||
|
|
<div class="description">{component.description}</div>
|
||
|
|
</div>
|
||
|
|
{/each}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
|
||
|
|
.component {
|
||
|
|
padding:5px;
|
||
|
|
border-style: solid;
|
||
|
|
border-width: 0 0 1px 0;
|
||
|
|
border-color: var(--lightslate);
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.component:hover {
|
||
|
|
background-color: var(--primary10);
|
||
|
|
}
|
||
|
|
|
||
|
|
.component > .title {
|
||
|
|
font-size: 13pt;
|
||
|
|
color: var(--secondary100);
|
||
|
|
}
|
||
|
|
|
||
|
|
.component > .description {
|
||
|
|
font-size: 10pt;
|
||
|
|
color: var(--primary75);
|
||
|
|
font-style: italic;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|