Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit9689e2d

Browse files
committed
mod: open home galgame card on self tab
1 parent2a10591 commit9689e2d

File tree

2 files changed

+131
-126
lines changed

2 files changed

+131
-126
lines changed

‎components/galgame/Card.tsx‎

Lines changed: 66 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,66 @@
1-
'use client'
2-
3-
import{useState}from'react'
4-
import{Card,CardBody,CardFooter,CardHeader}from'@heroui/card'
5-
import{Image}from'@heroui/image'
6-
import{KunCardStats}from'~/components/kun/CardStats'
7-
importLinkfrom'next/link'
8-
import{KunPatchAttribute}from'~/components/kun/PatchAttribute'
9-
import{cn}from'~/utils/cn'
10-
11-
interfaceProps{
12-
patch:GalgameCard
13-
}
14-
15-
exportconstGalgameCard=({ patch}:Props)=>{
16-
const[imageLoaded,setImageLoaded]=useState(false)
17-
18-
return(
19-
<Card
20-
isPressable
21-
as={Link}
22-
href={`/${patch.uniqueId}`}
23-
target="_blank"
24-
className="w-full border border-default-100 dark:border-default-200"
25-
>
26-
<CardHeaderclassName="p-0">
27-
<divclassName="relative w-full mx-auto overflow-hidden text-center rounded-t-lg opacity-90">
28-
<div
29-
className={cn(
30-
'absolute inset-0 animate-pulse bg-default-100',
31-
imageLoaded ?'opacity-0' :'opacity-90',
32-
'transition-opacity duration-300'
33-
)}
34-
style={{aspectRatio:'16/9'}}
35-
/>
36-
<Image
37-
radius="none"
38-
alt={patch.name}
39-
className={cn(
40-
'size-full object-cover transition-all duration-300',
41-
imageLoaded ?'scale-100 opacity-90' :'scale-105 opacity-0'
42-
)}
43-
removeWrapper={true}
44-
src={
45-
patch.banner
46-
?patch.banner.replace(/\.avif$/,'-mini.avif')
47-
:'/touchgal.avif'
48-
}
49-
style={{aspectRatio:'16/9'}}
50-
onLoad={()=>setImageLoaded(true)}
51-
/>
52-
</div>
53-
</CardHeader>
54-
<CardBodyclassName="justify-between space-y-2">
55-
<h2className="font-semibold transition-colors text-small sm:text-lg line-clamp-2 hover:text-primary-500">
56-
{patch.name}
57-
</h2>
58-
<KunCardStatspatch={patch}isMobile={true}/>
59-
</CardBody>
60-
<CardFooterclassName="pt-0">
61-
<KunPatchAttributetypes={patch.type}size="sm"/>
62-
</CardFooter>
63-
</Card>
64-
)
65-
}
1+
'use client'
2+
3+
import{useState}from'react'
4+
import{Card,CardBody,CardFooter,CardHeader}from'@heroui/card'
5+
import{Image}from'@heroui/image'
6+
import{KunCardStats}from'~/components/kun/CardStats'
7+
importLinkfrom'next/link'
8+
import{KunPatchAttribute}from'~/components/kun/PatchAttribute'
9+
import{cn}from'~/utils/cn'
10+
11+
interfaceProps{
12+
patch:GalgameCard
13+
openOnNewTab?:boolean
14+
}
15+
16+
exportconstGalgameCard=({ patch, openOnNewTab=true}:Props)=>{
17+
const[imageLoaded,setImageLoaded]=useState(false)
18+
19+
return(
20+
<Card
21+
isPressable
22+
as={Link}
23+
href={`/${patch.uniqueId}`}
24+
target={openOnNewTab ?'_blank' :'_self'}
25+
className="w-full border border-default-100 dark:border-default-200"
26+
>
27+
<CardHeaderclassName="p-0">
28+
<divclassName="relative w-full mx-auto overflow-hidden text-center rounded-t-lg opacity-90">
29+
<div
30+
className={cn(
31+
'absolute inset-0 animate-pulse bg-default-100',
32+
imageLoaded ?'opacity-0' :'opacity-90',
33+
'transition-opacity duration-300'
34+
)}
35+
style={{aspectRatio:'16/9'}}
36+
/>
37+
<Image
38+
radius="none"
39+
alt={patch.name}
40+
className={cn(
41+
'size-full object-cover transition-all duration-300',
42+
imageLoaded ?'scale-100 opacity-90' :'scale-105 opacity-0'
43+
)}
44+
removeWrapper={true}
45+
src={
46+
patch.banner
47+
?patch.banner.replace(/\.avif$/,'-mini.avif')
48+
:'/touchgal.avif'
49+
}
50+
style={{aspectRatio:'16/9'}}
51+
onLoad={()=>setImageLoaded(true)}
52+
/>
53+
</div>
54+
</CardHeader>
55+
<CardBodyclassName="justify-between space-y-2">
56+
<h2className="font-semibold transition-colors text-small sm:text-lg line-clamp-2 hover:text-primary-500">
57+
{patch.name}
58+
</h2>
59+
<KunCardStatspatch={patch}isMobile={true}/>
60+
</CardBody>
61+
<CardFooterclassName="pt-0">
62+
<KunPatchAttributetypes={patch.type}size="sm"/>
63+
</CardFooter>
64+
</Card>
65+
)
66+
}

‎components/home/Container.tsx‎

Lines changed: 65 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,65 @@
1-
import{Button}from'@heroui/button'
2-
import{ChevronRight}from'lucide-react'
3-
import{GalgameCard}from'~/components/galgame/Card'
4-
import{ResourceCard}from'~/components/resource/ResourceCard'
5-
importLinkfrom'next/link'
6-
import{HomeHero}from'./hero/HomeHero'
7-
importtype{HomeResource}from'~/types/api/home'
8-
9-
interfaceProps{
10-
galgames:GalgameCard[]
11-
resources:HomeResource[]
12-
}
13-
14-
exportconstHomeContainer=({ galgames, resources}:Props)=>{
15-
return(
16-
<divclassName="mx-auto space-y-8 max-w-7xl">
17-
<HomeHero/>
18-
19-
<sectionclassName="space-y-6">
20-
<divclassName="flex items-center space-x-4">
21-
<h2className="text-lg font-bold sm:text-2xl">最新 Galgame</h2>
22-
<Button
23-
variant="light"
24-
as={Link}
25-
color="primary"
26-
endContent={<ChevronRightclassName="size-4"/>}
27-
href="/galgame"
28-
>
29-
查看更多
30-
</Button>
31-
</div>
32-
<divclassName="grid grid-cols-2 gap-2 sm:gap-6 md:grid-cols-3 lg:grid-cols-4">
33-
{galgames.map((galgame)=>(
34-
<GalgameCardkey={galgame.id}patch={galgame}/>
35-
))}
36-
</div>
37-
</section>
38-
39-
<sectionclassName="space-y-6">
40-
<divclassName="flex items-center space-x-4">
41-
<h2className="text-lg font-bold sm:text-2xl">最新补丁资源下载</h2>
42-
<Button
43-
variant="light"
44-
as={Link}
45-
color="primary"
46-
endContent={<ChevronRightclassName="size-4"/>}
47-
href="/resource"
48-
>
49-
查看更多
50-
</Button>
51-
</div>
52-
53-
<divclassName="grid grid-cols-1 gap-2 sm:gap-6 md:grid-cols-2">
54-
{resources.map((resource)=>(
55-
<ResourceCardkey={resource.id}resource={resource}/>
56-
))}
57-
</div>
58-
</section>
59-
</div>
60-
)
61-
}
1+
import{Button}from'@heroui/button'
2+
import{ChevronRight}from'lucide-react'
3+
import{GalgameCard}from'~/components/galgame/Card'
4+
import{ResourceCard}from'~/components/resource/ResourceCard'
5+
importLinkfrom'next/link'
6+
import{HomeHero}from'./hero/HomeHero'
7+
importtype{HomeResource}from'~/types/api/home'
8+
9+
interfaceProps{
10+
galgames:GalgameCard[]
11+
resources:HomeResource[]
12+
}
13+
14+
exportconstHomeContainer=({ galgames, resources}:Props)=>{
15+
return(
16+
<divclassName="mx-auto space-y-8 max-w-7xl">
17+
<HomeHero/>
18+
19+
<sectionclassName="space-y-6">
20+
<divclassName="flex items-center space-x-4">
21+
<h2className="text-lg font-bold sm:text-2xl">最新 Galgame</h2>
22+
<Button
23+
variant="light"
24+
as={Link}
25+
color="primary"
26+
endContent={<ChevronRightclassName="size-4"/>}
27+
href="/galgame"
28+
>
29+
查看更多
30+
</Button>
31+
</div>
32+
<divclassName="grid grid-cols-2 gap-2 sm:gap-6 md:grid-cols-3 lg:grid-cols-4">
33+
{galgames.map((galgame)=>(
34+
<GalgameCard
35+
key={galgame.id}
36+
patch={galgame}
37+
openOnNewTab={false}
38+
/>
39+
))}
40+
</div>
41+
</section>
42+
43+
<sectionclassName="space-y-6">
44+
<divclassName="flex items-center space-x-4">
45+
<h2className="text-lg font-bold sm:text-2xl">最新补丁资源下载</h2>
46+
<Button
47+
variant="light"
48+
as={Link}
49+
color="primary"
50+
endContent={<ChevronRightclassName="size-4"/>}
51+
href="/resource"
52+
>
53+
查看更多
54+
</Button>
55+
</div>
56+
57+
<divclassName="grid grid-cols-1 gap-2 sm:gap-6 md:grid-cols-2">
58+
{resources.map((resource)=>(
59+
<ResourceCardkey={resource.id}resource={resource}/>
60+
))}
61+
</div>
62+
</section>
63+
</div>
64+
)
65+
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp