3
3
import CardTag from "@/components/tags/card-tag" ;
4
4
import { getTags } from "@/components/tags/hooks/get-tags" ;
5
5
import { Input } from "@/components/ui/input" ;
6
- import { ScrollArea } from "@/components/ui/scroll-area" ;
6
+ import { ScrollArea , ScrollBar } from "@/components/ui/scroll-area" ;
7
7
import { Community } from "@/features/account/types/community" ;
8
8
import { CommunityCard } from "@/features/home/user/components/CommunityCard" ;
9
9
import { GetCommunities } from "@/features/home/user/hooks/gets-communities" ;
@@ -20,6 +20,11 @@ export default function Home() {
20
20
const [ tags , setTags ] = useState < TagType [ ] > ( [ ] ) ;
21
21
const [ selectedTags , setSelectedTags ] = useState < TagType [ ] > ( [ ] ) ;
22
22
const isFirstRender = useRef ( true ) ;
23
+ const [ searchQueryTag , setSearchQueryTag ] = useState ( "" ) ;
24
+
25
+ const filteredTags = tags ?. filter ( tag =>
26
+ tag . name . toLowerCase ( ) . includes ( searchQueryTag . toLowerCase ( ) )
27
+ ) ;
23
28
24
29
useEffect ( ( ) => {
25
30
if ( isFirstRender . current ) {
@@ -46,7 +51,7 @@ export default function Home() {
46
51
const matchesName = community . name . toLowerCase ( ) . includes ( searchQuery . toLowerCase ( ) ) ;
47
52
const matchesTags =
48
53
selectedTags . length === 0 ||
49
- selectedTags . every ( selectedTag => community . tags ?. includes ( selectedTag . name ) ) ;
54
+ selectedTags . every ( selectedTag => community . tag_name ?. includes ( selectedTag . name ) ) ;
50
55
return matchesName && matchesTags ;
51
56
} ) ;
52
57
@@ -82,13 +87,23 @@ export default function Home() {
82
87
83
88
< div className = "bg-[#FFFFFF1A] p-4 rounded-md mb-6" >
84
89
< h1 className = "text-xl font-bold text-[#FFFFFFD0] mb-2" > タグで絞り込む</ h1 >
85
- < div className = "flex flex-wrap gap-2" >
86
- { tags ?. map ( tag => (
87
- < CardTag key = { tag . name } variant = { tag . color } onClick = { ( ) => handleTagClick ( tag ) } >
88
- { tag . name }
89
- </ CardTag >
90
- ) ) }
91
- </ div >
90
+ < Input
91
+ type = "text"
92
+ placeholder = "タグ名で検索..."
93
+ value = { searchQueryTag }
94
+ onChange = { ( e ) => setSearchQueryTag ( e . target . value ) }
95
+ className = "mb-4"
96
+ />
97
+ < ScrollArea className = "w-full whitespace-nowrap rounded-md gap-1" >
98
+ < div className = "flex w-max space-x-4 p-4" >
99
+ { filteredTags ?. map ( tag => (
100
+ < CardTag key = { tag . name } variant = { tag . color } onClick = { ( ) => handleTagClick ( tag ) } >
101
+ { tag . name }
102
+ </ CardTag >
103
+ ) ) }
104
+ </ div >
105
+ < ScrollBar orientation = "horizontal" />
106
+ </ ScrollArea >
92
107
</ div >
93
108
94
109
< ScrollArea className = { styles . communityContainer } >
@@ -99,7 +114,7 @@ export default function Home() {
99
114
uuid = { community . uuid }
100
115
communityname = { community . name }
101
116
icon = { community . img }
102
- tags = { community . tags }
117
+ tags = { community . tag_name }
103
118
tag_colors = { community . tag_colors }
104
119
detail = { community . self }
105
120
university = { community . mem1 }
0 commit comments