Skip to content

Commit 8c89e27

Browse files
KUN1007KUN1007
committed
feat: adding a topbar dropdown nav
1 parent 2ea3ad5 commit 8c89e27

File tree

9 files changed

+390
-281
lines changed

9 files changed

+390
-281
lines changed

‎app/api/patch/get.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,11 @@ export const getPatchById = async (
4545
const response: PatchHeader = {
4646
id: patch.id,
4747
vndbId: patch.vndb_id,
48-
name: patch.name,
48+
name: {
49+
'zh-cn': patch.name_zh_cn,
50+
'ja-jp': patch.name_ja_jp,
51+
'en-us': patch.name_en_us
52+
},
4953
introduction: patch.introduction,
5054
banner: patch.banner,
5155
status: patch.status,

‎app/patch/[id]/metadata.ts‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import { kunMoyuMoe } from '~/config/moyu-moe'
22
import { convert } from 'html-to-text'
33
import { generateNullMetadata } from '~/utils/noIndex'
4+
import { getPreferredLanguageText } from '~/utils/getPreferredLanguageText'
45
import type { Metadata } from 'next'
5-
import type { Patch } from '~/types/api/patch'
6+
import type { PatchHeader } from '~/types/api/patch'
67

7-
export const generateKunMetadataTemplate = (patch: Patch): Metadata => {
8+
export const generateKunMetadataTemplate = (patch: PatchHeader): Metadata => {
9+
const patchName = getPreferredLanguageText(patch.name)
810
const pageTitle = patch.alias.length
9-
? `${patch.name} | ${patch.alias[0]}`
10-
: `${patch.name}`
11+
? `${patchName} | ${patch.alias[0]}`
12+
: `${patchName}`
1113

1214
if (patch.content_limit === 'nsfw') {
1315
return generateNullMetadata(pageTitle)
@@ -18,8 +20,8 @@ export const generateKunMetadataTemplate = (patch: Patch): Metadata => {
1820
description: convert(patch.introduction).slice(0, 170),
1921
openGraph: {
2022
title: patch.alias[0]
21-
? `${patch.name} | ${patch.alias[0]}`
22-
: `${patch.name}`,
23+
? `${patchName} | ${patch.alias[0]}`
24+
: `${patchName}`,
2325
description: convert(patch.introduction, {
2426
wordwrap: false,
2527
selectors: [{ selector: 'p', format: 'inline' }]
@@ -32,7 +34,7 @@ export const generateKunMetadataTemplate = (patch: Patch): Metadata => {
3234
url: patch.banner,
3335
width: 1920,
3436
height: 1080,
35-
alt: patch.name
37+
alt: patchName
3638
}
3739
]
3840
},

‎components/kun/Header.tsx‎

Lines changed: 47 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,47 @@
1-
import { Divider } from '@heroui/divider'
2-
import { Image } from '@heroui/image'
3-
4-
interface Props {
5-
name: string
6-
image?: string
7-
description?: string
8-
isShowDivider?: boolean
9-
endContent?: React.ReactNode
10-
headerEndContent?: React.ReactNode
11-
}
12-
13-
export const KunHeader = ({
14-
name,
15-
image,
16-
description,
17-
isShowDivider = true,
18-
endContent,
19-
headerEndContent
20-
}: Props) => {
21-
return (
22-
<>
23-
<div className="space-y-2">
24-
{image && image !== '' && (
25-
<div className="flex justify-center my-10">
26-
<Image
27-
isBlurred
28-
src={image}
29-
alt={name}
30-
className="max-h-40"
31-
classNames={{ blurredImg: 'scale-125' }}
32-
/>
33-
</div>
34-
)}
35-
<div className="flex justify-between">
36-
<div className="space-y-2">
37-
<h1 className="text-2xl font-medium">
38-
<span>{name}</span>
39-
</h1>
40-
{description && (
41-
<p className="whitespace-pre-wrap text-default-500">
42-
{description}
43-
</p>
44-
)}
45-
</div>
46-
{headerEndContent}
47-
</div>
48-
{endContent}
49-
</div>
50-
{isShowDivider && <Divider className="my-8" />}
51-
</>
52-
)
53-
}
1+
import { Image } from '@heroui/image'
2+
3+
interface Props {
4+
name: string
5+
image?: string
6+
description?: string
7+
endContent?: React.ReactNode
8+
headerEndContent?: React.ReactNode
9+
}
10+
11+
export const KunHeader = ({
12+
name,
13+
image,
14+
description,
15+
endContent,
16+
headerEndContent
17+
}: Props) => {
18+
return (
19+
<div className="space-y-2">
20+
{image && image !== '' && (
21+
<div className="flex justify-center my-10">
22+
<Image
23+
isBlurred
24+
src={image}
25+
alt={name}
26+
className="max-h-40"
27+
classNames={{ blurredImg: 'scale-125' }}
28+
/>
29+
</div>
30+
)}
31+
<div className="flex justify-between">
32+
<div className="space-y-2">
33+
<h1 className="text-2xl font-medium">
34+
<span>{name}</span>
35+
</h1>
36+
{description && (
37+
<p className="whitespace-pre-wrap text-default-500">
38+
{description}
39+
</p>
40+
)}
41+
</div>
42+
{headerEndContent}
43+
</div>
44+
{endContent}
45+
</div>
46+
)
47+
}

‎components/kun/top-bar/TopBar.tsx‎

Lines changed: 96 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,74 @@
11
'use client'
22

3+
import Link from 'next/link'
34
import { KunTopBarBrand } from './Brand'
45
import { KunTopBarUser } from './User'
56
import { usePathname } from 'next/navigation'
7+
import { kunNavItemDesktop } from '~/constants/top-bar'
68
import { KunMobileMenu } from './KunMobileMenu'
79
import { useEffect, useState } from 'react'
8-
import { Navbar, NavbarContent, NavbarMenuToggle } from '@heroui/react'
10+
import {
11+
Navbar,
12+
NavbarContent,
13+
NavbarItem,
14+
NavbarMenuToggle,
15+
Button,
16+
Tooltip
17+
} from '@heroui/react'
18+
import {
19+
ChevronDown,
20+
Building2,
21+
Gamepad2,
22+
Puzzle,
23+
Tags,
24+
BookUser,
25+
Clapperboard,
26+
ChartColumnBig
27+
} from 'lucide-react'
28+
import { cn } from '~/utils/cn'
929

1030
export const KunTopBar = () => {
1131
const pathname = usePathname()
1232
const [isMenuOpen, setIsMenuOpen] = useState(false)
1333

34+
const items: Array<{ href: string; label: string; icon: React.ReactNode }> = [
35+
{
36+
href: '/galgame',
37+
label: 'Galgame 列表',
38+
icon: <Gamepad2 className="size-4" />
39+
},
40+
{
41+
href: '/resource',
42+
label: '最新补丁列表',
43+
icon: <Puzzle className="size-4" />
44+
},
45+
{
46+
href: '/tag',
47+
label: 'Galgame 标签列表',
48+
icon: <Tags className="size-4" />
49+
},
50+
{
51+
href: '/company',
52+
label: 'Galgame 会社列表',
53+
icon: <Building2 className="size-4" />
54+
},
55+
{
56+
href: '/character',
57+
label: 'Galgame 角色列表',
58+
icon: <BookUser className="size-4" />
59+
},
60+
{
61+
href: '/person',
62+
label: 'Galgame 制作人列表',
63+
icon: <Clapperboard className="size-4" />
64+
},
65+
{
66+
href: '/ranking',
67+
label: 'Galgame 排行',
68+
icon: <ChartColumnBig className="size-4" />
69+
}
70+
]
71+
1472
useEffect(() => {
1573
setIsMenuOpen(false)
1674
}, [pathname])
@@ -30,6 +88,43 @@ export const KunTopBar = () => {
3088

3189
<KunTopBarBrand />
3290

91+
<div className="hidden md:flex items-center gap-6">
92+
<Tooltip
93+
content={
94+
<nav className="p-2 space-y-1">
95+
{items.map((it) => (
96+
<Link
97+
key={it.href}
98+
href={it.href}
99+
className="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-default-700 hover:bg-default-100"
100+
>
101+
<span className="shrink-0 text-default-600">{it.icon}</span>
102+
<span className="truncate">{it.label}</span>
103+
</Link>
104+
))}
105+
</nav>
106+
}
107+
>
108+
<Link href="/galgame" className="text-base">
109+
下载补丁
110+
</Link>
111+
</Tooltip>
112+
113+
{kunNavItemDesktop.map((item) => (
114+
<Link
115+
key={item.href}
116+
className={cn(
117+
'text-base',
118+
pathname === item.href ? 'text-primary' : 'text-foreground'
119+
)}
120+
href={item.href}
121+
color="primary"
122+
>
123+
{item.name}
124+
</Link>
125+
))}
126+
</div>
127+
33128
<KunTopBarUser />
34129

35130
<KunMobileMenu />

‎components/ranking/Container.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,6 @@ export const RankingContainer = ({
6868
? `查看${currentTimeRange.label}的数据增长情况`
6969
: '查看全部时间的数据累计'
7070
}
71-
isShowDivider={false}
7271
endContent={
7372
<div className="flex flex-wrap items-center justify-between gap-3">
7473
<Tabs

0 commit comments

Comments
 (0)