<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>
