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