Skip to content

Commit dca2d73

Browse files
KUN1007KUN1007
committed
mod: topbar items placements
1 parent 5df506b commit dca2d73

File tree

6 files changed

+204
-191
lines changed

6 files changed

+204
-191
lines changed

‎components/home/carousel/DesktopCard.tsx‎

Lines changed: 68 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,68 @@
1-
'use client'
2-
3-
import { Card, Chip, Link } from '@heroui/react'
4-
import { aboutDirectoryLabelMap } from '~/constants/about'
5-
import { KunNavigationMenu } from './KunNavigationMenu'
6-
import { formatDistanceToNow } from '~/utils/formatDistanceToNow'
7-
import type { HomeCarouselMetadata } from './mdx'
8-
9-
interface Props {
10-
posts: HomeCarouselMetadata[]
11-
currentSlide: number
12-
}
13-
14-
export const KunDesktopCard = ({ posts, currentSlide }: Props) => {
15-
const post = posts[currentSlide]
16-
17-
return (
18-
<div className="hidden h-full sm:block group">
19-
<img
20-
alt={post.title}
21-
className="object-cover w-full h-full brightness-75 rounded-2xl"
22-
src={post.banner}
23-
/>
24-
<div className="absolute inset-0 rounded-2xl bg-gradient-to-t from-black/30 via-black/10 to-transparent" />
25-
26-
<KunNavigationMenu />
27-
28-
<Card className="absolute border-none bottom-4 left-4 right-4 bg-background/80 backdrop-blur-md">
29-
<div className="p-4">
30-
<div className="flex justify-between">
31-
<div>
32-
<div className="flex items-center gap-3 mb-2">
33-
<img
34-
src={post.authorAvatar}
35-
alt={post.authorName}
36-
className="w-6 h-6 rounded-full"
37-
/>
38-
<span className="text-sm text-foreground/80">
39-
{post.authorName}
40-
</span>
41-
</div>
42-
<Link
43-
color="foreground"
44-
className="mb-2 text-2xl font-bold hover:text-primary-500 line-clamp-1"
45-
href={post.link}
46-
>
47-
<h1>{post.title}</h1>
48-
</Link>
49-
</div>
50-
51-
{/* <RandomGalgameButton color="primary" variant="solid">
52-
随机一部游戏
53-
</RandomGalgameButton> */}
54-
</div>
55-
56-
<p className="mb-2 text-sm text-foreground/80 line-clamp-1">
57-
{post.description}
58-
</p>
59-
<div className="flex flex-wrap gap-2">
60-
<Chip variant="flat" size="sm" color="primary">
61-
{aboutDirectoryLabelMap[post.directory]}
62-
</Chip>
63-
64-
<Chip variant="flat" size="sm">
65-
{formatDistanceToNow(post.date)}
66-
</Chip>
67-
</div>
68-
</div>
69-
</Card>
70-
</div>
71-
)
72-
}
1+
'use client'
2+
3+
import { Card, Chip, Link } from '@heroui/react'
4+
import { aboutDirectoryLabelMap } from '~/constants/about'
5+
import { KunNavigationMenu } from './KunNavigationMenu'
6+
import { formatDistanceToNow } from '~/utils/formatDistanceToNow'
7+
import type { HomeCarouselMetadata } from './mdx'
8+
9+
interface Props {
10+
posts: HomeCarouselMetadata[]
11+
currentSlide: number
12+
}
13+
14+
export const KunDesktopCard = ({ posts, currentSlide }: Props) => {
15+
const post = posts[currentSlide]
16+
17+
return (
18+
<div className="hidden h-full sm:block group">
19+
<img
20+
alt={post.title}
21+
className="object-cover w-full h-full brightness-75 rounded-2xl"
22+
src={post.banner}
23+
/>
24+
<div className="absolute inset-0 rounded-2xl bg-gradient-to-t from-black/30 via-black/10 to-transparent" />
25+
26+
<KunNavigationMenu />
27+
28+
<Card className="absolute border-none bottom-4 left-4 right-4 bg-background/80 backdrop-blur-md">
29+
<div className="p-4">
30+
<div className="flex justify-between">
31+
<div>
32+
<div className="flex items-center gap-3 mb-2">
33+
<img
34+
src={post.authorAvatar}
35+
alt={post.authorName}
36+
className="w-6 h-6 rounded-full"
37+
/>
38+
<span className="text-sm text-foreground/80">
39+
{post.authorName}
40+
</span>
41+
</div>
42+
<Link
43+
color="foreground"
44+
className="mb-2 text-2xl font-bold hover:text-primary-500 line-clamp-1"
45+
href={post.link}
46+
>
47+
<h1>{post.title}</h1>
48+
</Link>
49+
</div>
50+
</div>
51+
52+
<p className="mb-2 text-sm text-foreground/80 line-clamp-1">
53+
{post.description}
54+
</p>
55+
<div className="flex flex-wrap gap-2">
56+
<Chip variant="flat" size="sm" color="primary">
57+
{aboutDirectoryLabelMap[post.directory]}
58+
</Chip>
59+
60+
<Chip variant="flat" size="sm">
61+
{formatDistanceToNow(post.date)}
62+
</Chip>
63+
</div>
64+
</div>
65+
</Card>
66+
</div>
67+
)
68+
}

‎components/home/carousel/KunMobileCard.tsx‎

Lines changed: 61 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,61 @@
1-
'use client'
2-
3-
import { Card, Chip, Link } from '@heroui/react'
4-
import { aboutDirectoryLabelMap } from '~/constants/about'
5-
import { formatDistanceToNow } from '~/utils/formatDistanceToNow'
6-
import type { HomeCarouselMetadata } from './mdx'
7-
8-
interface Props {
9-
posts: HomeCarouselMetadata[]
10-
currentSlide: number
11-
}
12-
13-
export const KunMobileCard = ({ posts, currentSlide }: Props) => {
14-
const post = posts[currentSlide]
15-
16-
return (
17-
<Card className="h-full bg-transparent border-none shadow-none sm:hidden">
18-
<div className="relative h-1/2">
19-
<img
20-
alt={post.title}
21-
className="object-cover w-full h-full rounded-2xl"
22-
src={post.banner}
23-
/>
24-
</div>
25-
<div className="py-3 h-1/2">
26-
<div className="flex items-center justify-between mb-2">
27-
<div className="flex items-center gap-2">
28-
<img
29-
src={post.authorAvatar}
30-
alt={post.authorName}
31-
className="w-8 h-8 rounded-full"
32-
/>
33-
<span className="text-sm text-foreground/80">
34-
{post.authorName}
35-
</span>
36-
</div>
37-
38-
{/* <RandomGalgameButton color="primary" variant="flat" size="sm">
39-
随机一部游戏
40-
</RandomGalgameButton> */}
41-
</div>
42-
43-
<Link
44-
color="foreground"
45-
className="text-lg font-bold hover:text-primary-500 line-clamp-1"
46-
href={post.link}
47-
>
48-
<h1>{post.title}</h1>
49-
</Link>
50-
51-
<p className="mb-2 text-xs text-foreground/80 line-clamp-2">
52-
{post.description}
53-
</p>
54-
<div className="flex flex-wrap gap-1">
55-
<Chip variant="flat" size="sm" color="primary">
56-
{aboutDirectoryLabelMap[post.directory]}
57-
</Chip>
58-
<Chip variant="flat" size="sm">
59-
{formatDistanceToNow(post.date)}
60-
</Chip>
61-
</div>
62-
</div>
63-
</Card>
64-
)
65-
}
1+
'use client'
2+
3+
import { Card, Chip, Link } from '@heroui/react'
4+
import { aboutDirectoryLabelMap } from '~/constants/about'
5+
import { formatDistanceToNow } from '~/utils/formatDistanceToNow'
6+
import type { HomeCarouselMetadata } from './mdx'
7+
8+
interface Props {
9+
posts: HomeCarouselMetadata[]
10+
currentSlide: number
11+
}
12+
13+
export const KunMobileCard = ({ posts, currentSlide }: Props) => {
14+
const post = posts[currentSlide]
15+
16+
return (
17+
<Card className="h-full bg-transparent border-none shadow-none sm:hidden">
18+
<div className="relative h-1/2">
19+
<img
20+
alt={post.title}
21+
className="object-cover w-full h-full rounded-2xl"
22+
src={post.banner}
23+
/>
24+
</div>
25+
<div className="py-3 h-1/2">
26+
<div className="flex items-center justify-between mb-2">
27+
<div className="flex items-center gap-2">
28+
<img
29+
src={post.authorAvatar}
30+
alt={post.authorName}
31+
className="w-8 h-8 rounded-full"
32+
/>
33+
<span className="text-sm text-foreground/80">
34+
{post.authorName}
35+
</span>
36+
</div>
37+
</div>
38+
39+
<Link
40+
color="foreground"
41+
className="text-lg font-bold hover:text-primary-500 line-clamp-1"
42+
href={post.link}
43+
>
44+
<h1>{post.title}</h1>
45+
</Link>
46+
47+
<p className="mb-2 text-xs text-foreground/80 line-clamp-2">
48+
{post.description}
49+
</p>
50+
<div className="flex flex-wrap gap-1">
51+
<Chip variant="flat" size="sm" color="primary">
52+
{aboutDirectoryLabelMap[post.directory]}
53+
</Chip>
54+
<Chip variant="flat" size="sm">
55+
{formatDistanceToNow(post.date)}
56+
</Chip>
57+
</div>
58+
</div>
59+
</Card>
60+
)
61+
}

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

Lines changed: 44 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,44 @@
1-
'use client'
2-
3-
import { NavbarMenu, NavbarMenuItem } from '@heroui/navbar'
4-
import { Chip } from '@heroui/chip'
5-
import Link from 'next/link'
6-
import Image from 'next/image'
7-
import { kunMoyuMoe } from '~/config/moyu-moe'
8-
import { kunMobileNavItem } from '~/constants/top-bar'
9-
10-
export const KunMobileMenu = () => {
11-
return (
12-
<NavbarMenu>
13-
<NavbarMenuItem>
14-
<Link className="flex items-center" href="/">
15-
<Image
16-
src="/favicon.webp"
17-
alt={kunMoyuMoe.titleShort}
18-
width={50}
19-
height={50}
20-
priority
21-
/>
22-
<p className="ml-4 mr-2 font-bold text-inherit">
23-
{kunMoyuMoe.creator.name}
24-
</p>
25-
<Chip size="sm" variant="flat" color="primary">
26-
补丁
27-
</Chip>
28-
</Link>
29-
</NavbarMenuItem>
30-
{kunMobileNavItem.map((item, index) => (
31-
<NavbarMenuItem key={index}>
32-
<Link className="w-full" href={item.href}>
33-
{item.name}
34-
</Link>
35-
</NavbarMenuItem>
36-
))}
37-
</NavbarMenu>
38-
)
39-
}
1+
'use client'
2+
3+
import { NavbarMenu, NavbarMenuItem } from '@heroui/navbar'
4+
import { Chip } from '@heroui/chip'
5+
import Link from 'next/link'
6+
import Image from 'next/image'
7+
import { kunMoyuMoe } from '~/config/moyu-moe'
8+
import { kunMobileNavItem } from '~/constants/top-bar'
9+
import { RandomGalgameButton } from './RandomGalgameButton'
10+
11+
export const KunMobileMenu = () => {
12+
return (
13+
<NavbarMenu>
14+
<NavbarMenuItem>
15+
<Link className="flex items-center" href="/">
16+
<Image
17+
src="/favicon.webp"
18+
alt={kunMoyuMoe.titleShort}
19+
width={50}
20+
height={50}
21+
priority
22+
/>
23+
<p className="ml-4 mr-2 font-bold text-inherit">
24+
{kunMoyuMoe.creator.name}
25+
</p>
26+
<Chip size="sm" variant="flat" color="primary">
27+
补丁
28+
</Chip>
29+
</Link>
30+
</NavbarMenuItem>
31+
{kunMobileNavItem.map((item, index) => (
32+
<NavbarMenuItem key={index}>
33+
<Link className="w-full" href={item.href}>
34+
{item.name}
35+
</Link>
36+
</NavbarMenuItem>
37+
))}
38+
39+
<NavbarMenuItem>
40+
<RandomGalgameButton variant="flat" color="primary" />
41+
</NavbarMenuItem>
42+
</NavbarMenu>
43+
)
44+
}

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

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@ import {
1010
} from '@heroui/react'
1111
import { useSettingStore } from '~/store/settingStore'
1212
import { Ban, ShieldCheck, CircleSlash } from 'lucide-react'
13+
import {
14+
KUN_CONTENT_LIMIT_LABEL,
15+
KUN_CONTENT_LIMIT_MAP
16+
} from '~/constants/top-bar'
1317
import type { JSX } from 'react'
1418

1519
const themeIconMap: Record<string, JSX.Element> = {
@@ -22,20 +26,17 @@ export const NSFWSwitcher = () => {
2226
const settings = useSettingStore((state) => state.data)
2327
const setData = useSettingStore((state) => state.setData)
2428

25-
const themeIcon = themeIconMap[settings.kunNsfwEnable] || themeIconMap['all']
26-
2729
return (
2830
<Dropdown placement="bottom-end" className="min-w-0">
2931
<Tooltip disableAnimation showArrow closeDelay={0} content="内容显示切换">
3032
<div className="flex">
3133
<DropdownTrigger>
3234
<Button
33-
isIconOnly
34-
variant="light"
35-
aria-label="主题切换"
35+
variant="flat"
36+
aria-label="内容限制"
3637
className="text-default-500"
3738
>
38-
{themeIcon}
39+
{KUN_CONTENT_LIMIT_LABEL[settings.kunNsfwEnable]}
3940
</Button>
4041
</DropdownTrigger>
4142
</div>
@@ -57,9 +58,7 @@ export const NSFWSwitcher = () => {
5758
key={key}
5859
className="text-default-700"
5960
>
60-
{key === 'sfw' && '仅显示 SFW (内容安全) 的内容'}
61-
{key === 'nsfw' && '仅显示 NSFW (可能含有 R18) 的内容'}
62-
{key === 'all' && '同时显示 SFW 和 NSFW 的内容'}
61+
{KUN_CONTENT_LIMIT_MAP[key]}
6362
</DropdownItem>
6463
))}
6564
</DropdownMenu>

0 commit comments

Comments
 (0)