wonderlandpark/core
2
1
Fork 0
mirror of https://github.com/koreanbots/core.git synced 2025-12-15 06:10:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: 카테고리 태그 더보기/접기 기능 (#675)

Browse Source 
* feat: implement collapse/expand UI for category tags

* chore: add cursor-pointer

---------

Co-authored-by: SKINMAKER <skinmaker1345@gmail.com>
This commit is contained in:
Soyoka 2025-04-11 20:26:15 +09:00 committed by GitHub
parent 8ab5e433d2
commit 4416cb58b3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 25 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
components/Hero.tsx
View File

@ -1,5 +1,6 @@
import dynamic from 'next/dynamic'
import { NextSeo } from 'next-seo'
import dynamic from 'next/dynamic'
import { useState } from 'react'
import {
botCategories,
@ -13,6 +14,7 @@ const Tag = dynamic(() => import('@components/Tag'))
const Search = dynamic(() => import('@components/Search'))
const Hero: React.FC<HeroProps> = ({ type = 'all', header, description }) => {
const [showAllCategories, setShowAllCategories] = useState(false)
const link = `/${type}/categories`
return (
<>
@ -110,32 +112,36 @@ const Hero: React.FC<HeroProps> = ({ type = 'all', header, description }) => {
bigger
href={type === 'bots' ? '/bots/list/votes' : '/servers/list/votes'}
/>
{(type === 'bots' ? botCategories : serverCategories).slice(0, 4).map((t) => (
<Tag
key={t}
text={
<>
<i
className={(type === 'bots' ? botCategoryIcon : serverCategoryIcon)[t]}
/>{' '}
{t}
</>
}
dark
bigger
href={`${link}/${t}`}
/>
))}
{(type === 'bots' ? botCategories : serverCategories)
.slice(0, showAllCategories ? undefined : 4)
.map((t) => (
<Tag
key={t}
text={
<>
<i
className={(type === 'bots' ? botCategoryIcon : serverCategoryIcon)[t]}
/>{' '}
{t}
</>
}
dark
bigger
href={`${link}/${t}`}
/>
))}
<Tag
key='tag'
className='cursor-pointer'
text={
<>
<i className='fas fa-tag' /> 카테고리 더보기
<i className='fas fa-tag' />{' '}
{showAllCategories ? '간략히 보기' : '카테고리 더보기'}
</>
}
dark
bigger
href={link}
onClick={() => setShowAllCategories(!showAllCategories)}
/>
</>
)}