41 lines
1.3 KiB
Vue
41 lines
1.3 KiB
Vue
<template>
|
|
<form role="search">
|
|
<label for="searchFiles" class="mr-4 relative" htmlFor="searchFiles">
|
|
Search
|
|
<input
|
|
type="search"
|
|
id="searchFiles"
|
|
placeholder="Search Activity"
|
|
class="px-5 py-2 w-52 rounded-full text-sm align-middle duration-300 border bg-neutral-100 border-neutral-300 hover:border-neutral-500 focus:outline-none focus:ring focus:border-neutral-500"
|
|
/>
|
|
<span
|
|
class="absolute top-2 bottom-0.5 right-0.5 flex justify-center items-center gap-2"
|
|
>
|
|
<IconSetting class="w-6 h-6 cursor-pointer"></IconSetting>
|
|
<span
|
|
class="w-px h-6 block after:border after:border-neutral-300 after:content-['']"
|
|
></span>
|
|
<button class="pr-2">
|
|
<IconSearch class="w-6 h-6"></IconSearch>
|
|
</button>
|
|
</span>
|
|
</label>
|
|
</form>
|
|
</template>
|
|
|
|
<script setup>
|
|
// The Lucia project.
|
|
// Copyright 2023-2026 DSP, inc. All rights reserved.
|
|
// Authors:
|
|
// chiayin.kuo@dsp.im (chiayin), 2023/1/31
|
|
// cindy.chang@dsp.im (Cindy Chang), 2024/5/30
|
|
// imacat.yang@dsp.im (imacat), 2023/9/23
|
|
/**
|
|
* @module components/Search Search bar component with activity
|
|
* search input, settings icon, and search icon button.
|
|
*/
|
|
|
|
import IconSearch from "@/components/icons/IconSearch.vue";
|
|
import IconSetting from "@/components/icons/IconSetting.vue";
|
|
</script>
|