Merge pull request #59 from miyaoka/keyword

keywordとhashtagを結合
miyaoka · Oct 20, 2024 · e96ca7f · e96ca7f
2 parents 7d8fc58 + f5cd851
commit e96ca7f
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 42 deletions.
diff --git a/src/components/menu/keywordList/KeywordListButton.vue b/src/components/menu/keywordList/KeywordListButton.vue
@@ -14,8 +14,8 @@ const popover = usePopover();
     <i
       class="size-8"
       :class="{
-        'i-f7-ellipses-bubble-fill': popover.isShow.value,
-        'i-f7-ellipses-bubble': !popover.isShow.value,
+        'i-icon-park-solid-topic': popover.isShow.value,
+        'i-icon-park-outline-topic': !popover.isShow.value,
       }"
     />
   </button>

diff --git a/src/components/menu/keywordList/KeywordListPopover.vue b/src/components/menu/keywordList/KeywordListPopover.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed } from "vue";
 import KeywordListPopoverItem from "./KeywordListPopoverItem.vue";
 import { getFilteredEventList } from "@/lib/search";
 import { useEventListStore } from "@/store/eventListStore";
@@ -45,6 +45,11 @@ const hashtagList = computed(() => {
   });
 });
 
+const wholeList = computed(() => {
+  const list = [...keywordList.value, ...hashtagList.value];
+  return list.sort((a, b) => b.count - a.count);
+});
+
 // 大文字小文字を区別せずにカウントし、一番多いものをキーにする
 function createCountList(eventList: string[][]): KeywordItem[] {
   const keywordMap: Map<string, Map<string, number>> = new Map();
@@ -79,23 +84,16 @@ function createCountList(eventList: string[][]): KeywordItem[] {
     resultList.push({ value: key, count: totalCount });
   });
 
-  return resultList.sort((a, b) => b.count - a.count);
+  return resultList;
 }
-
-const groupList = ["keyword", "hashtag"];
-const selectedGroup = ref<(typeof groupList)[number]>("keyword");
-
-const selectedItem = computed(() => {
-  return selectedGroup.value === "keyword" ? keywordList.value : hashtagList.value;
-});
 </script>
 
 <template>
   <div
     class="flex max-h-[min(500px,calc(100dvh-5rem))] min-h-[150px] w-[350px] flex-col overflow-hidden rounded-md border-2 border-gray-800 bg-white"
   >
     <div class="flex h-11 shrink-0 items-center justify-start gap-1 bg-black p-2 text-white">
-      <i class="i-mdi-hashtag size-5" />
+      <i class="i-icon-park-solid-topic size-5" />
       <span>トレンド</span>
 
       <button
@@ -106,35 +104,7 @@ const selectedItem = computed(() => {
       </button>
     </div>
 
-    <header class="place-items-center gap-1 border-black bg-white p-2 font-bold shadow-md">
-      <fieldset role="radiogroup" class="flex flex-row">
-        <label
-          class="flex cursor-pointer flex-row items-center gap-1 rounded-xl px-2 py-1 focus-within:outline has-[input:checked]:bg-gray-200"
-          v-for="group in groupList"
-          :key="group"
-        >
-          <input
-            type="radio"
-            name="searchType"
-            v-model="selectedGroup"
-            :value="group"
-            class="sr-only"
-          />
-          <i
-            class="size-4"
-            :class="{
-              'i-mdi-chat-outline': group === 'keyword',
-              'i-mdi-hashtag': group !== 'keyword',
-            }"
-          />
-          <span>
-            {{ group }}
-          </span>
-        </label>
-      </fieldset>
-    </header>
-
-    <KeywordListPopoverItem :itemList="selectedItem" :key="selectedGroup" />
+    <KeywordListPopoverItem :itemList="wholeList" />
   </div>
 </template>
 

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -12,7 +12,15 @@ export default {
       // Select the icon collections you want to use
       // You can also ignore this option to automatically discover all individual icon packages you have installed
       // If you install @iconify/json, you should explicitly specify the collections you want to use, like this:
-      collections: getIconCollections(["mdi", "lucide", "ic", "f7", "eva"]),
+      collections: getIconCollections([
+        "mdi",
+        "lucide",
+        "ic",
+        "f7",
+        "eva",
+        "icon-park-outline",
+        "icon-park-solid",
+      ]),
       // If you want to use all icons from @iconify/json, you can do this:
       // collections: getIconCollections("all"),
       // and the more recommended way is to use `dynamicIconsPlugin`, see below.